<template>
  <!-- 平台选择 -->
  <picker
    @change="handleVendorChange"
    range-key="vendorStoreName"
    :range="vendorArr"
  >
    <view class="select-root">
      <text class="all-text">{{ vendorArr[+pickValue].vendorStoreName }}</text>
      <text class="slect-text">选择平台</text>
    </view>
  </picker>

  <!-- 今日完成实时数据 -->
  <order-data
    :saleInfo="toDaySaleInfo"
    :showline="true"
    :isAllplatfrom="isAllplatfrom"
    :_vendorPayPercentage="_vendorPayPercentage"
    :isNotQuote="isNotQuote"
    :isZero="isZero"
    :isUpperfif="isUpperfif"
  />

  <!-- 营业状况 -->
  <view class="business-status">
    <view class="business-text">
      <text>营业概况 </text>
      <jx-icon icon="wenhaoxiao" color="#cfcccc" @tap.stop="explain"></jx-icon>
    </view>

    <view class="slect-item-root">
      <text
        class="item"
        v-for="(item, i) in tabArr"
        :key="i"
        :class="{ 'item-active': i == active }"
        @tap="tabClick(i)"
        >{{ item }}</text
      >
    </view>

    <view class="time-root">
      <view class="slect-edit" v-if="active == 3">
        <picker
          :value="fromTime"
          mode="date"
          @change="fnChangeFrom"
          :end="timeFormatD(+new Date())"
        >
          <view class="time-item">
            <jx-icon
              icon="xiangzuojiantou"
              :size="28"
              color="#919191"
            ></jx-icon>
            <text>{{ fromTime }}</text>
            <jx-icon
              icon="xiangyoujiantou"
              :size="28"
              color="#919191"
            ></jx-icon>
          </view>
        </picker>
        <text class="middle-text">至</text>
        <picker
          :value="toTime"
          mode="date"
          @change="fnChangeTo"
          :end="timeFormatD(+new Date())"
        >
          <view class="time-item">
            <jx-icon
              icon="xiangzuojiantou"
              :size="28"
              color="#919191"
            ></jx-icon>
            <text>{{ toTime }}</text>
            <jx-icon
              icon="xiangyoujiantou"
              :size="28"
              color="#919191"
            ></jx-icon>
          </view>
        </picker>
        <button size="mini" @tap="getFromTime">查询</button>
      </view>
      <view class="no-edit" v-else>
        <text>{{ fromTime }}</text>
        至
        <text>{{ toTime }}</text>
      </view>
    </view>

    <view class="money-data-root">
      <view class="row">
        <view class="money-item active">
          <text class="number">{{ price }}</text>
          <text>{{ vendortitle }}</text>
        </view>
        <view class="money-item">
          <text class="number">{{ saleInfo.count || '0' }}</text>
          <text>有效订单量</text>
        </view>
      </view>

      <view class="row">
        <view class="money-item active">
          <text class="number">{{ saleInfo.cancelCount || '0' }}</text>
          <text>取消订单</text>
        </view>
        <view class="money-item">
          <text class="number" :class="{'afterNumber': saleInfo.actualFee > 0}">{{ saleInfo.actualFee || 0 }}</text>
          <text>运费</text>
        </view>
      </view>

      <view class="row">
        <view class="money-item active">
          <text class="number" :class="{'afterNumber': +afsPrice > 0}">{{ afsPrice }}</text>
          <text>售后退款</text>
        </view>
        <view class="money-item">
          <text class="number">{{ saleInfo.afsCount || '0' }}</text>
          <text>售后单量</text>
        </view>
      </view>

      <view class="row-last">
        <view class="money-item active">
          <text class="number" :class="{'afterNumber': +waybillTipMoney > 0}">{{ waybillTipMoney }}</text>
          <text>配送小费</text>
        </view>
        <view class="money-item">
          <text class="number" :class="{'afterNumber': +distanceFreightMoney > 0}">{{ distanceFreightMoney }}</text>
          <text>{{isPointStore ? '远距离费' : '服务费' }}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import orderRealTime from './orderRealTime'
import { timeFormatD } from '@/utils/tools'
import jxIcon from '@/components/jx-icon/jx-icon.vue'
import orderData from '@/pages/merchant/orderData/orderData.vue'
const {
  vendorArr,            // 平台列表
  handleVendorChange,   // 切换平台
  explain,              // 今日订单说明窗口
  tabArr,               // 营业概况选择列表
  active,               // 列表高亮
  tabClick,             // 营业概况筛选
  fromTime,             // 开始时间
  toTime,               // 结束时间
  saleInfo,             // 今日数据概况
  fnChangeFrom,         // 自定义开始时间
  fnChangeTo,           // 自定义结束时间
  pickValue,            // 平台名字
  getFromTime,          // 查询订单
  toDaySaleInfo,        // 今日订单数据
  isAllplatfrom,
  _vendorPayPercentage,
  isNotQuote,
  isZero,
  isUpperfif,
  price,
  vendortitle,
  waybillTipMoney,
  distanceFreightMoney,
  afsPrice,
  isPointStore
} = orderRealTime()
</script>

<style lang="scss" scoped>
@import './orderRealTime.scss';
</style>