<template>
  <view class="pt-20rpx">
    <loading-view v-if="isFirstLoading"></loading-view>
    <block v-for="(item,index) in order.products" :key="index">
      <view class="bg-white px-40rpx notFrist">
        <view class="flex py-base">
          <u-image border-radius="10" width="170rpx" height="170rpx" :src="item.cover" :lazy-load="true"></u-image>
          <view class="flex-1 ml-16rpx w-0">
            <view class="h-70rpx">
              <view class="line-2">{{item.name}}</view>
            </view>
            <view class="flex items-center justify-between mt-20rpx">
              <text>待提货</text>
              <text>x {{item.remain_quantity}}</text>
            </view>
            <view class="flex items-center justify-between ">
              <text>已提货</text>
              <text>x {{item.quantity*1-item.remain_quantity*1}}</text>
            </view>
          </view>
        </view>
        <u-line color="#E5E5E5" />
        <view class="flex items-center justify-between h-85rpx" v-if="order.status==1 ||order.status==2">
          <view>本次提货</view>
          <view>
            <u-number-box @change="update" :min="0" :max="item.remain_quantity" v-model="item.amount">
            </u-number-box>
          </view>
        </view>
      </view>
    </block>
    <view class="h-170rpx"></view>
    <!-- 底部按钮 -->
    <view v-if="order.status==1 ||order.status==2" class="fixed bottom-0 left-0 w-full bg-white shadow-t ">
      <view class="h-100rpx flex items-center px-24rpx justify-between text-hex-999999" @click="onSubmit">
        <view
          class="h-72rpx flex-1 leading-72rpx text-center rounded-full bg-hex-ED1B13 text-26rpx text-center text-white">
          提货</view>
      </view>
    </view>
    <cu-modal v-model="modeShow" @confirm="confirm" confirm-color="#378264" show-cancel-button content="是否确认提货？"
      confirmText="确认" cancelText="再想想">
    </cu-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        modeShow: false,
        id: '',
        isFirstLoading: true,
        order: {},
      };
    },
    onLoad({
      id
    }) {
      this.id = id
      this.getDate()
    },
    computed: {
      //需要提货的商品
      pickGoods() {
        return this.order?.products?.filter(item => item.amount) ?? []
      }
    },
    methods: {
      async getDate() {
        try {
          const resDate = await this.$api.get(`/v1/order/underline/${this.id}`)
          this.order = resDate
        } catch (err) {} finally {
          this.isFirstLoading = false
        }
      },
      onSubmit() {
        this.pickGoods.length == 0 ? this.$u.toast('请至少选择一个商品提货') : this.modeShow = true
      },
      //更新
      update(e) {
        this.order.products = [...this.order.products]
      },
      async confirm() {
        try {
          const arr = this.pickGoods.map(item => {
            return {
              amount: item.amount,
              id: item.id
            }
          })
          await this.$api.post(`/v1/order/underline/${this.id}/package`, {
            products: arr
          })
          this.$u.toast('提货成功')
          await this.getDate()
        } catch (err) {}
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shadow-t {
    box-shadow: 0px -2px 5px rgb(0 0 0 / 11%);
  }

  .notFrist:not(:first-child) {
    margin-top: 20rpx;
  }
</style>
