<template>
  <view
    class="pending-order-root 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="operation-btn">
      <view
        class="refuse"
        @tap.stop="
          AcceptOrRefuseOrder(item.vendorOrderID, item.vendorID, false)
        "
        >拒绝接单</view
      >
      <view
        class="need"
        @tap.stop="AcceptOrRefuseOrder(item.vendorOrderID, item.vendorID, true)"
        >立即接单</view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import useOrderInfo from '@/composables/useOrderInfo'
import orderListTop from '../component/orderListTop.vue'
import orderMoney from '../component/orderMoney.vue'
import orderMoneyJxgy from '../component/orderMoneyJxgy.vue'
import { getStorage } from '@/utils/storage'
import order from '@/api/https/order'
import toast from '@/utils/toast'
import { store } from '@/store'
const {
  orderDetail, // 订单详情
} = useOrderInfo()

interface PropsType {
  item: any
}
defineProps<PropsType>()

/**
 * 确定接单
 */
async function AcceptOrRefuseOrder(
  vendorOrderID: string,
  vendorID: string,
  isAccept: boolean
) {
  let data = {
    vendorOrderID,
    vendorID,
    isAccept,
  }
  let res = await order.accept_or_refuse_order(data)
  if (res.code == 0) {
    if (isAccept) {
      toast('接单成功', 1)
    } else {
      toast('拒绝订单成功', 1)
    }
    // 刷新订单
    store.commit('serveInfo/setUpdateOrder', Date.now())
  } else {
    toast('订单数据异常')
  }
}
</script>

<style lang="scss" scoped>
.pending-order-root {
  box-sizing: border-box;
  background-color: #fff;

  // 操作按钮
  .operation-btn {
    display: flex;
    align-items: center;
    padding: 20rpx;
    justify-content: space-evenly;
    border-bottom: 2rpx dashed #e7e7e7;

    .refuse,
    .need {
      padding: 8rpx 35rpx;
      border-radius: 7rpx;
      color: #fff;
      font-size: 28rpx;
    }

    .refuse {
      background-color: #f60d58;
    }

    .need {
      background-color: $jx-primary;
    }
  }
}
</style>