<template>
  <view
    class="abnormal-order position-relative"
    @tap="orderDetail(item.vendorOrderID, item.vendorID)"
  >
    <order-list-top :item="item" />
    <template v-if="getStorage('terrace') == 'jxcs' || getStorage('terrace') == 'gblm'">
      <!-- 京西菜市 -->
      <order-money :item="item" />
    </template>
    <template v-else>
      <!-- 京西果园 -->
      <order-money-jxgy :item="item" />
    </template>

    <!-- 地址 -->
    <view class="divider"></view>
    <view class="address">地址：{{ item.consigneeAddress }}</view>

    <view v-if="item.lockStatus === -5">
      <view class="abnormal-op" @tap.stop v-if="(item.flag & 6) === 0">
        <view class="title">用户申请取消订单</view>
        <view class="op">
          <view class="btn-cancel" @tap.stop="fnCancelOrder(0)">拒绝</view>
          <view class="btn-confirm" @tap.stop="fnCancelOrder(1)">同意</view>
        </view>
      </view>
      <view class="abnormal-dealed" v-if="(item.flag & 6) !== 0">
        用户申请取消订单
        <text class="agree" v-if="(item.flag & 6) === 2">[已同意]</text>
        <text class="refuse" v-if="(item.flag & 6) === 6">[已拒绝]</text>
      </view>
    </view>

    <template v-if="item.status === 17 && item.lockStatus === 0">
      <bottom-component
        title="骑手申请取消配送"
        @handleCancel="fnCancelDeliver(0)"
        @handleConfirm="fnCancelDeliver(1)"
        confirmText="同意"
        :order="item"
      />
    </template>

    <template v-if="item.status === 18 && item.lockStatus === 0">
      <bottom-component
        title="骑手取货失败"
        @handleConfirm="fnCallNew"
        confirmText="重新召唤骑手"
        :order="item"
      />
    </template>

    <template v-if="item.status === 22 && item.lockStatus === 0">
      <bottom-component
        title="用户拒收"
        @handleConfirm="fnGoodsReturn()"
        confirmText="确认退回"
        :order="item"
      />
    </template>
  </view>
</template>

<script lang="ts" setup >
import orderListTop from '../component/orderListTop.vue'
import orderMoney from '../component/orderMoney.vue'
import orderMoneyJxgy from '../component/orderMoneyJxgy.vue'
import { getStorage } from '@/utils/storage'
import bottomComponent from './bottom-component.vue'
import abonmrmalFn from './abonmrmal-order'
import useOrderInfo from '@/composables/useOrderInfo'
interface PropsType {
  item: AnyObject
}
const props = defineProps<PropsType>()
const {
  fnCancelOrder, // 是否统一用户取消订单
  fnCancelDeliver, // 骑手申请取消
  fnCallNew, // 重新召唤骑手
  fnGoodsReturn, // 是否退回商品
} = abonmrmalFn(props)
const {
  orderDetail, // 订单详情
} = useOrderInfo()
</script>

<style lang="scss" scoped>
@import './abnormal-order.scss';
</style>