<template>
  <view class="mall-order-item" @click="$emit('click', orderData)">
    <view class="item-title u-flex-center-sb">
      <view class="left u-flex-center">
        <view class="title-text">{{ orderData.businessName }}</view>
        <uv-icon name="arrow-right" color="#1a1a1a" size="32rpx"></uv-icon>
      </view>
      <view class="right">
        <template v-if="orderData.rightsStatus == 0">
          <text
            v-if="
              orderData.transactionStatus == 0 && orderData.rightsMethod == 0
            "
            >待付款</text
          >

          <text v-if="orderData.transactionStatus == 10">{{
            shippingStatusHandle(orderData)
          }}</text>
          <text v-if="orderData.transactionStatus == 20">{{
            rightsStatusHandle(orderData)
          }}</text>
          <text v-if="orderData.transactionStatus == 30">交易完成</text>
          <text
            v-if="
              orderData.transactionStatus == 100 && orderData.rightsMethod == 0
            "
            >订单取消</text
          >
        </template>
        <text v-if="orderData.rightsMethod > 0">{{
          receivingStatusHandle(orderData)
        }}</text>
      </view>
    </view>
    <view class="item-content">
      <view class="order-info">
        <view class="info-list u-flex-center-sb">
          <view class="list-main u-flex-center">
            <image
              class="info-list-img"
              v-for="(item, index) in orderData.orderDetails || orderData.rightsChildOrders || []"
              :key="index"
              :src="item.productCover + '?x-oss-process=style/w_150'"
              v-show="index < 3"
              mode=""
            >
            </image>
          </view>
          <view class="list-total u-flex-center">
            <text>共计{{ orderData.productNumber || orderData.refundNum }}件</text>
            <uv-icon name="arrow-right" color="#666666" size="28rpx"></uv-icon>
          </view>
        </view>
        <view class="order-info-item u-flex-center-sb">
          <view class="label">订单编号：</view>
          <view class="value">{{ orderData.orderNo }}</view>
        </view>
        <view class="order-info-item u-flex-center-sb" v-if="orderData.orderDetails">
          <view class="label">下单时间：</view>
          <view class="value">{{ orderData.orderTime }}</view>
        </view>
        <view class="order-info-item u-flex-center-sb" v-else>
          <view class="label">退款申请时间：</view>
          <view class="value">{{ orderData.createTime }}</view>
        </view>
      </view>

      <view class="btn-group u-flex-center-sb">
        <view class="total-price u-flex-center">
          <text class="total-price-text">合计：</text>
          <view class="total-price-value">
            <text class="unit">¥</text>
            <text class="num">{{
              $addDecimals(orderData.actualPayment || orderData.refundMoney || 0, 2)
            }}</text>
          </view>
        </view>
        <slot name="btnGroup"></slot>
      </view>
    </view>
  </view>
</template>

<script setup name="mallOrderItem">
import { ref, watch } from "vue";
const props = defineProps({
  orderData: {
    type: Object,
    default: () => {},
  },
});

const orderData = ref(props.orderData || {});

watch(
  () => props.orderData,
  (newVal) => {
    // console.log(newVal);
    orderData.value = newVal || {};
  }
);

const shippingStatusHandle = (mainOrder) => {
  let text = "发";
  if (mainOrder.shippingMethod == 10) {
    text = "备";
  }
  if (mainOrder.shippingStatus == 0) {
    return "待" + text + "货";
  } else if (mainOrder.shippingStatus == 10) {
    return "部分" + text + "货";
  } else {
    return "已" + text + "货";
  }
};

const receivingStatusHandle = (mainOrder) => {
  if (mainOrder.rightsMethod == 0) {
    return "";
  } else if (mainOrder.rightsMethod == 5) {
    return mainOrder.rightsStatus == 5 ? "退款中" : "退款完成";
  } else {
    return mainOrder.rightsStatus == 5 ? "退货中" : "退货完成";
  }
};

const rightsStatusHandle = (mainOrder) => {
  let text = "收货";
  if (mainOrder.shippingMethod == 10) {
    text = "自提";
  }
  if (mainOrder.rightsStatus == 0) {
    return "待" + text;
  } else if (mainOrder.rightsStatus == 10) {
    return "部分" + text;
  } else {
    return "已" + text;
  }
};
</script>

<style lang="scss" scoped>
.mall-order-item {
  background: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  padding: 22rpx 0;
  box-sizing: border-box;
  .item-title {
    border-bottom: 1rpx solid #f0f0f0;
    padding: 20rpx 30rpx;
    .left {
      flex: 1;
      .title-text {
        font-size: 36rpx;
        font-weight: 700;
        color: #1a1a1a;
        margin-right: 5rpx;
      }
    }
    .right {
      flex-shrink: 0;
      margin-left: 10rpx;
      font-size: 26rpx;
    }
  }
  .item-content {
    padding: 30rpx 30rpx 20rpx 30rpx;
    .order-info {
      .info-list {
        padding-bottom: 10rpx;
        .list-main {
          .info-list-img {
            width: 146rpx;
            height: 146rpx;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 14rpx;
            margin-right: 20rpx;
          }
        }
        .list-total {
          font-size: 28rpx;
          color: #666666;
        }
      }
      .order-info-item {
        margin-top: 20rpx;
        .label {
          font-size: 28rpx;
          color: #999999;
        }
        .value {
          font-size: 28rpx;
          color: #1a1a1a;
        }
      }
    }
    .btn-group {
      margin-top: 30rpx;
      border-top: 1rpx solid #f0f0f0;
      padding-top: 30rpx;
      .total-price {
        .total-price-text {
          font-size: 28rpx;
          color: #1a1a1a;
          flex-shrink: 0;
        }
        .total-price-value {
          font-size: 34rpx;
          color: #da4f4f;
          .unit {
            font-size: 28rpx;
            margin-right: 5rpx;
          }
          .num {
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
