<template>
  <view
    class="pending-picking-root position-relative"
    @tap="orderDetail(item.vendorOrderID, item.vendorID)"
  >
    <order-list-top :item="item" />
    <view class="remarks"
      >备注：{{ item.buyerComment || '该订单用户未进行备注' }}</view
    >
    <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" v-if="item.status === 10 && item.lockStatus === 0">
      <view
        class="printerBtn"
        @tap.stop="printerOrder(item.vendorOrderID, item.vendorID)"
        >打印订单</view
      >
      <view
        class="pickingBtn"
        @tap.stop="pickingComplete(item.vendorOrderID, item.vendorID)"
        >拣货完成</view
      >
    </view>

    <view class="self-order" v-if="item.deliveryType === 'self'"
      >[自提订单]</view
    >
  </view>
</template>

<script lang="ts" setup>
import orderListTop from '../component/orderListTop.vue'
import orderMoney from '../component/orderMoney.vue'
import useOrderInfo from '@/composables/useOrderInfo'
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, // 订单详情
  printerOrder, // 打印订单
} = useOrderInfo()
interface PropsType {
  item: any
}
defineProps<PropsType>()

/**
 * 拣货完成
 */
async function pickingComplete(vendorOrderID: string, vendorID: string) {
  let data = {
    vendorOrderID,
    vendorID,
  }
  let res = await order.finished_pickup(data)
  if (res.code == 0) {
    toast('拣货成功', 1)
    // 刷新订单
    store.commit('serveInfo/setUpdateOrder', Date.now())
  } else {
    toast('拣货异常', 2)
  }
}
</script>

<style lang="scss" scoped>
:deep(.order-number) {
  border: none !important;
}
.pending-picking-root {
  position: relative;
  background-color: #fff;

  .remarks {
    padding: 15rpx;
    background-color: rgba($color: #908f96, $alpha: 0.15);
    border-radius: 10rpx;
  }

  .divider {
    width: 100%;
    height: 7rpx;
    background: white url('../../../../static/image/global/order-divider.png') 0
      0 no-repeat;
    background-size: 100%;
  }

  // 操作按钮
  .operation {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15rpx 20rpx;

    .printerBtn,
    .pickingBtn {
      width: 100%;
      padding: 20rpx;
      text-align: center;
      border-radius: 10rpx;
      color: #fff;
    }

    .printerBtn {
      margin-right: 15rpx;
      background-image: linear-gradient(135deg, #85c972, $jx-primary);
    }

    .pickingBtn {
      margin-left: 15rpx;
      background-image: linear-gradient(135deg, #ff6a20, #ec903f);
    }
  }
}
</style>