<template>
  <view class="bg-white px-40rpx" @tap="$u.route('/pages/order_details/index',{id:item.id})">
    <view class="h-78rpx flex justify-between items-center">
      <text class="text-lg">订单编号：{{item.sn}}</text>
      <text class="text-md text-hex-2A82E4">{{item.status |payStatusText}}</text>
    </view>
    <u-line color="#E5E5E5" />
    <block v-for="(ite,ind) in item.products" :key="ind">
      <view class="flex py-base">
        <u-image border-radius="10" width="160rpx" height="160rpx" :src="ite.cover" :lazy-load="true"></u-image>
        <view class="flex-1 ml-16rpx w-0">
          <view class="h-70rpx">
            <view class="line-2">{{ite.name}}</view>
          </view>
          <view class="text-right text-lg mt-20rpx"> x{{ite.quantity}} </view>
        </view>
      </view>
      <u-line color="#E5E5E5" />
    </block>
    <view class="flex items-center justify-between h-85rpx">
      <text class="text-md">{{item.created_date}}</text>
      <text class="text-lg font-medium">共{{total}}件 应付总额：{{item.total_amount}} </text>
    </view>
    <block>
      <u-line color="#E5E5E5" />
      <view class="py-16rpx flex justify-end">
        <!-- 待付款 -->
       <!-- <view v-if="item.status==0 ||item.status==1"
          class="btn btn-primary py-10rpx px-28rpx text-md ml-base" @tap.stop="cancelOrder(item.id)">取消订单</view> -->
        <view v-if="item.status==0" class="btn btn-primary py-10rpx px-28rpx text-md ml-base"
          @tap.stop="$u.routeAuth({ url: '/pages/confirm_payment/confirm_payment', params: { id:item.id } })">立即付款
        </view>
        <!-- 待收货 -->
        <!-- <view v-if="item.status==2 ||item.status==3 || item.status==9 " class="btn btn-primary py-10rpx px-28rpx text-md ml-base" @tap.stop="$u.routeAuth({ url: '/pages/apply_refund/index', params: { id:item.id } })">去售后</view> -->
        <view v-if="item.status==3 "
          class="btn btn-primary py-10rpx px-28rpx text-md ml-base" @tap.stop="confirmReceipt(item.id)">确认收货</view>
        <!-- 已完成 -->
        <!-- <view v-if="item.status==9"  class="btn btn-primary py-10rpx px-28rpx text-md ml-base "
            @tap.stop="$u.routeAuth({ url: '/pages/publish_evaluation/index', params: { id:item.id } })">去评价</view> -->
      </view>
    </block>
    <!-- 取消订单弹窗 -->
    <cu-modal v-model="cancelShow" @confirm="canceConfirm" confirm-color="#378264" show-cancel-button content="是否取消该订单" confirmText="确认取消" cancelText="再想想">
    </cu-modal>
    <!-- 确认收货弹窗 -->
    <cu-modal v-model="receiptShow" title="确认收货" @confirm="receiptConfirm" confirm-color="#378264" show-cancel-button
      content="是否确认收货？"></cu-modal>
  </view>
</template>
<script>
  export default {
    props: {
      item: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        cancelShow: false,
        id: '',
        receiptShow: false
      };
    },
    computed: {
      price(){
        let price = ''
        if(this.item.total_amount > 0 || this.item.total_points == 0) price+=`￥${parseFloat(this.item.total_amount)}`
        if(this.item.total_amount > 0 && this.item.total_points > 0) price+= '+'
        if(this.item.total_points > 0) price+=`${this.item.total_points}积分`
        return price
      },
      total() {
        let total = 0
        this.item.products.forEach(val => {
          total += val.quantity * 1
        })
        return total
      }
    },
    methods: {
      //取消订单
      cancelOrder(id) {
        this.cancelShow = true
        this.id = id
      },
      async canceConfirm() {
        try {
          await this.$api.post(`/v1/order/orders/${this.id}/cancel`, {}, {
            custom: {
              loading: true
            },
          });
          // this.item.status = 10
          this.Parent(this.id)
          this.$u.toast(" 订单取消成功")
        } catch (err) {}
      },
      //确认收货
      confirmReceipt(id) {
        this.receiptShow = true
        this.id = id
      },
      async receiptConfirm() {
        try {
          await this.$api.post(`/v1/order/orders/${this.id}/confirm`, {}, {
            custom: {
              loading: true
            },
          });
          this.Parent(this.id)
          this.$u.toast("确认收货成功")
        } catch (err) {}
      },
      //给父元素传参，删除
      Parent(id) {
        this.$emit('Parent', id)
      }
    }
  }
</script>
