<template>
  <view class="card" @click="jumpToOrderDetail">
    <view class="flex top">
      <view class="title">{{ data.title }}</view>
      <view :class="['flex', 'status', `status-${status}`]">{{ statusDesc }}</view>
    </view>
    <view class="flex main">
      <image class="img" :src="coverImg" mode="scaleToFill"></image>
      <view class="info">
        <view class="flex row">
          <view class="row-label">客户姓名：</view>
          <view class="row-content">{{ data.customerName }}</view>
        </view>
        <view class="flex row">
          <view class="row-label">下单时间：</view>
          <view class="row-content">{{ data.orderDate }}</view>
        </view>
        <view class="flex row">
          <view class="row-label">联系电话：</view>
          <view class="row-content">{{ data.customerPhone }}</view>
        </view>
      </view>
    </view>
    <view class="flex bottom">
      <view class="flex price">
        <text class="price-label">总价格：</text>
        <text class="price-unit">¥</text><text class="price-value">{{ data.orderAmount }}</text>
      </view>
      <view class="flex btns">
        <!-- 待支付 -->
        <template v-if="status == 0">
          <button class="btn" @click.stop="onPay">立即支付</button>
        </template>
        <!-- 待发货 -->
        <template v-else-if="status == 1">
          <button class="btn" @click.stop="onApplyService">申请售后</button>
          <!-- 自采检测
          <template v-if="detectProduct && detectProduct.subscribeType == 0">
            <button class="btn" @click="onDetectModify">修改</button>
          </template> -->
        </template>
        <!-- 待收货 -->
        <template v-else-if="status == 2">
          <button class="btn" @click.stop="onApplyService">申请售后</button>
          <button class="btn" @click.stop="onConfirmReceipt">确认收货</button>
          <!-- 检测 subscribeType: 0自采，1上门，2到店，3已取消
          <template v-if="detectProduct">
            <template v-if="detectProduct.subscribeType == 0">
              <button class="btn" @click="onDetectSendBack">线上回寄试剂盒</button>
            </template>
            <template v-else>
              <button class="btn" @click="onDetectBook">检测预约</button>
            </template>
          </template>
          其他商品
          <template v-else>
            <button class="btn" @click.stop="onConfirmReceipt">确认收货</button>
          </template> -->
        </template>
        <!-- 待评价 -->
        <template v-else-if="status == 3">
          <button class="btn" @click.stop="onApplyService">申请售后</button>
          <button class="btn" @click.stop="onComment">立即评价</button>
        </template>
        <!-- 已完成 -->
        <template v-else-if="status == 4">
          <button class="btn" @click.stop="onApplyService">申请售后</button>
        </template>
        <!-- 售后 -->
        <template v-else-if="status == 5">
          
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  // 订单状态 0待支付 1待发货 2待收货 3待评价 4已完成
  const STATUS_AND_DESC_MAPPING = {
    0: '待支付',
    1: '待发货',
    2: '待收货',
    3: '待评价',
    4: '已完成',
    5: '售后',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      status() {
        const { orderStatus, afterSales } = this.data || {}

        if (afterSales) {
          return 5
        }

        return orderStatus
      },
      statusDesc() {
        return STATUS_AND_DESC_MAPPING[this.status]
      },
      coverImg() {
        const { appletOrderProductList } = this.data || {}

        let arr = appletOrderProductList?.[0]?.image?.split?.(',')

        return arr?.[0]
      },
      // detectProduct() {
      //   const { appletOrderProductList } = this.data || {}

      //   if (appletOrderProductList?.length == 1 && appletOrderProductList?.[0]?.type == 1) { // type: 产品类型（0营养剂，1预约，2课程）
      //     return appletOrderProductList[0]
      //   }
        
      //   return null
      // },
    },
    methods: {
      onPay() {
        this.$emit('pay')
      },
      async onConfirmReceipt() {
        try {
  
          await this.$fetch('confirmOrder', { id: this.data.id })

					uni.showToast({
						icon: 'success',
						title: '确认收货成功',
					});

          this.$emit('statusChange')

        } catch (err) {

        }
      },
      onComment() {
        this.$utils.navigateTo(`/pages_order/comment/commentWrite?orderId=${this.data.id}`)
      },
      onApplyService() {
        
        const {
          id,
          appletOrderProductList,
        } = this.data

        
        const obj = {
          id,
          appletOrderProductList: appletOrderProductList.map(item => ({ ...item, statusDesc: this.statusDesc })),
        }

        this.$emit('applyService', obj)
      },
      onDetectModify() {
        // todo
      },
      onDetectSendBack() {
        // todo
      },
      onDetectBook() {
        // todo
      },
      jumpToOrderDetail() {
        this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
      },
    },
  }
</script>

<style scoped lang="scss">
  .card {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    background: #FAFAFF;
    border: 2rpx solid #FFFFFF;
  }

  .top {
    justify-content: space-between;
    
    .title {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1.4;
      color: #252545;
    }

    .status {
      display: inline-flex;
      min-width: 120rpx;
      padding: 6rpx 0;
      box-sizing: border-box;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #252545;
      background: #F3F3F3;
      border-radius: 12rpx;

      &-0 {
        color: #FF860E;
        background: #FFF4E9;
      }

      &-1 {
        color: #2799E0;
        background: #EEF7FD;
      }

      &-2 {
        color: #7D27E0;
        background: #F5EEFD;
      }

      &-5 {
        color: #E53C29;
        background: #FDE7E5;
      }
    }
  }

  .main {
    margin: 24rpx 0;
    column-gap: 24rpx;

    .img {
      flex: none;
      width: 120rpx;
      height: 120rpx;
    }

    .info {
      flex: 1;
      padding: 24rpx;
      background: #FFFFFF;
      border-radius: 32rpx;
    }

    .row {
      justify-content: flex-start;
      column-gap: 4rpx;

      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;

      &-label {
        color: #8B8B8B;
      }

      &-content {
        color: #393939;
      }
    }

    .row + .row {
      margin-top: 16rpx;
    }
  }

  .bottom {
    justify-content: space-between;

    .price {
      column-gap: 8rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 1.4;

      &-label {
        font-weight: 400;
        font-size: 26rpx;
        color: #8B8B8B;
      }

      &-unit {
        font-size: 24rpx;
        color: #7451DE;
      }

      &-value {
        font-size: 32rpx;
        color: #7451DE;
      }
    }

    .btns {
      flex: 1;
      justify-content: flex-end;
      column-gap: 16rpx;
    }

    .btn {
      padding: 10rpx 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;
      color: #393939;
      border: 2rpx solid #252545;
      border-radius: 32rpx;
    }
  }
</style>
