<template>
  <view class="container">
    <view class="u-font28 u-1A1A1A bg-fff">
      <view class="u-flex-center-sb u-border-one-one u-p30">
        <view>订单编号</view>
        <view class="u-999 u-font3">{{ order_code }}</view>
      </view>
      <view class="u-flex-center-sb u-border-one-one u-p30">
        <view>下单时间</view>
        <view class="u-999">{{ format_order_time }}</view>
      </view>
    </view>
    <view
      class="bg-fff u-mt20 u-p30"
      v-for="value in goodsList"
      :key="value.id"
    >
      <view
        class="goodsItem u-flex-center"
        @click="goSalesReturn(value.orderDetailId, value)"
      >
        <image
          :src="value.productCover"
          v-if="value.productCover"
          class="u-goods200 u-ml15"
          mode=""
        ></image>
        <view class="u-flex1 u-flex-column-start rightText u-ml30">
          <view class="u-text2 u-1A1A1A u-font28 textWidth">{{
            value.productTitle
          }}</view>
          <view class="bottext u-flex-column-start u-flex1">
            <text class="u-font22 u-999" v-if="value.skuSetName"
              >规格： {{ value.skuSetName }}</text
            >
            <view class="u-flex-center botPrice">
              <view class="u-FF0000 u-font32">
                <rich-text
                  v-if="!exchange"
                  :nodes="$mUtil.priceBigSmall(value.realPrice)"
                ></rich-text>
                <text v-else>{{ value.singlePoint }}积分</text>
              </view>
              <text class="u-font26 u-666 u-ml15" v-if="value.productNum"
                >x {{ value.productNum }}</text
              >
            </view>
          </view>
          <view class="protect_rights">
            <text class="u-FF0000 u-font28" v-if="value.rightsMethod == 5">
              仅退款 {{ value.rightsStatus == "5" ? "维权中" : "完成" }}</text
            >
            <text class="u-FF0000 u-font28" v-if="value.rightsMethod == 10">
              退货退款
              {{ value.rightsStatus == "10" ? "维权中" : "完成" }}</text
            >
          </view>
        </view>
        <view class="iconfont u-font36 u-999 blackPositin">&#xe6c7;</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { shoporderInfo_Api } from "@/api/order";

// 响应式数据
const keystatus = ref(1); //1未发货，退款，2收到货退款/退货
const order_code = ref("");
const format_order_time = ref("");
const exchange = ref(false);
const goodsList = ref([]);
const orderId = ref(null);

// 页面加载
onLoad((options) => {
  console.log(options);
  if (options.keystatus) {
    keystatus.value = options.keystatus;
  }
  if (options.orderId) {
    orderId.value = options.orderId;
  }
  // getOrderDetail();
});
onShow(() => {
  console.log("onShow");
  if (orderId.value) getOrderDetail();
});

// 获取订单详情
const getOrderDetail = () => {
  shoporderInfo_Api(orderId.value).then((res) => {
    if (res.code == 200 && res.data) {
      goodsList.value = res.data.orderDetails || [];
      order_code.value = res.data.orderNo || "";
      format_order_time.value = res.data.orderTime || "";
      exchange.value = res.data.exchange || false;
    }
  });
};

// 跳转到申请退款页面
const goSalesReturn = async (id, item) => {
  if (item.rights_status == 1)
    return uni.$uv.toast("维权中");
  let title = "";
  uni.navigateTo({
    url: `applicationDrawback?title=${title}&id=${id}&keystatus=2&orderId=${orderId.value}`,
  });
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.textWidth {
  width: 400rpx;
}

.bg-fff {
  background-color: #fff;
}

.goodsItem {
  position: relative;
}

.blackPositin {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -18rpx;
}

.protect_rights {
  width: 100%;
  text-align: right;
}
</style>
