<template>
  <view
    class="deliver-cell"
    :class="{ deActive: waybillFee.waybill && waybillFee.waybill.status > 10 }"
  >
    <!-- 遮罩禁止点击  -->
    <view class="deActive-mak"></view>
    <!-- 左边快递 -->
    <view class="vendor-name">
      <!-- 左边名字与操作按钮 -->
      <view class="map-op">
        <view :class="vendorClass">{{ vendorName }}</view>
        <view
          class="switch-group"
          :class="{
            'group-active':
              waybillFee.waybill && waybillFee.waybill.status > 10,
          }"
        >
          <view
            class="left-check"
            :class="{ activeWarring: !waybillFeeStatus.status }"
            @tap="switchStatus(0)"
          >
            关闭
          </view>
          <view
            class="right-check"
            :class="{ active: waybillFeeStatus.status }"
            @tap="switchStatus(1)"
          >
            打开
          </view>
        </view>
      </view>
      <!-- 等待发单的时间 -->
      <view
        v-if="
          orderData.status === 15 &&
          !waybillFee.waybill &&
          waybillFee.timeoutSecond > 0
        "
      >
        等待发单 <text style="color: #d34b3b">{{ countDown }}</text>
      </view>
    </view>

    <!-- 右边状态 -->
    <view class="right-handler">
      <!-- 配送费 -->
      <view class="waybill-price" v-html="newPrice"></view>
      <!-- 重新发单与取消发单 -->
      <view class="operation" v-if="!waybillFee.errCode">
        <!-- 立即召唤 -->
        <view
          class="btn"
          @tap="createWaybill"
          v-if="
            (orderData.deliveryFlag & maskMap[vendor]) !== maskMap[vendor] &&
            !waybillFee.waybill &&
            waybillFee.status
          "
        >
          召唤骑手
        </view>
        <!-- 取消 -->
        <view
          class="btn cancel"
          @tap="cancelWaybill"
          v-if="
            waybillFee.waybill &&
            waybillFee.waybill.status <= 10 &&
            !((orderData.deliveryFlag & maskMap[vendor]) === maskMap[vendor])
          "
        >
          取消
        </view>
        <view>
          <!-- 正在配送 -->
          <view
            class="text text-ing"
            v-if="waybillFee.waybill && waybillFee.waybill.status > 10"
          >
            配送中...
          </view>
          <!-- 正在召唤 -->
          <view
            class="text"
            v-if="
              (orderData.deliveryFlag & maskMap[vendor]) === maskMap[vendor]
            "
          >
            创建中...
          </view>
        </view>
      </view>
      <!-- 未开启自动发单 -->
      <view
        class="operation operation-text"
        v-if="waybillFee.errCode && !waybillFeeStatus.status"
      >
        <view class="text">不用</view>
        <text class="text">{{ vendorName }}</text>
      </view>

      <!-- 当前范围无骑手 -->
      <view class="operation operation-text" v-if="tipText">
        <view class="text">该范围</view>
        <text class="text">暂无骑手</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import threeDeliverFn from './threeDeliver'
interface propType {
  vendor: string | number
  waybillFee: AnyObject
  orderData: AnyObject
  accountBalance: number
  sotreID: number
  createDeliveryType: number
}
const props = defineProps<propType>()

const emit = defineEmits<{
  (
    e: 'switchStatus',
    data: {
      vendorID: number | string
      status: number
      waybillFee: AnyObject
    }
  ): void
  (e: 'refresh'): void
}>()

let {
  vendorClass, // 动态class
  vendorName, // 配送名字
  countDown, // 等待发单
  newPrice, // 新的计算方式
  maskMap, // 立即召唤
  createWaybill, // 立即发单
  switchStatus, // 切换发单
  cancelWaybill, // 取消三方配送
  waybillFeeStatus, // 是否开启自动发单
  tipText, // 是否展示当前范围无骑手问题
} = threeDeliverFn(props, emit)
</script>

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