<template>
  <view class="details">
    <headersVue @headerJump="topgi" header-title="订单详情"></headersVue>
    <view class="details-back">
      <image
        src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813171413571.png"
        mode="widthFix"
      ></image>
      <view class="details-back-biaohsi">
        <view class="details-back-biaohsi-kuan">
          <image :src="formDataItem(orderData, 'image')" mode="widthFix">
          </image>
        </view>
        <view class="details-back-biaohsi-zhuanbgtia">
          <view class="details-back-biaohsi-zhuanbgtia-top">
            {{ formDataItem(orderData, "status") }}
          </view>
          <view class="details-back-biaohsi-zhuanbgtia-bot">
            {{ formDataItem(orderData, "text") }}
          </view>
        </view>
      </view>
      <logisticInfocardJianjieVue
        @goToLogistic="goToLogistic"
        class="logistic--wrapper"
        :detail="orderData"
        :logisticText="logisticText"
      />
    </view>

    <view
      class="order-detail-card"
      :style="{ 'margin-top': orderData.status == 5 ? '140rpx' : '160rpx' }"
    >
      <orderCardDetailInfoVue :detail="orderData" :ruleOptions="ruleOptions" @onSendGoodsHandle="onSendGoodsHandle"/>
      <!-- <deliverCardItemVue
       class="inputInfo"
       :isBottomMessage="true"
       leftTitle="物流信息有误？"
       rightTitle="更改物流信息"
     /> -->
    </view>
  </view>
</template>

<script>
import {
  orderDetailApi,
  getExpress,
  getOrderList,
  orderDeliveryRuleApi,
  getOrderListProduct
} from "@/commit/order.js";
import headersVue from "../components/headers/headers.vue";
import logisticInfocardJianjieVue from "./components/orderDetail/logisticInfocardJianjie.vue";
import { orderStatus } from "../commodity/orderUtil.js";
import { toQueryString } from "@/utils/index.js";
import deliverCardItemVue from "./components/changeDetailInfo/pendingReceiptGoodsModules/deliverCardItem.vue";
import orderCardDetailInfoVue from "./components/orderDetail/orderCardDetailInfo.vue";
import {
  getOrderListStatus,
  getOrderDetailStatus,
} from "../commodity/orderUtil.js";
export default {
  components: {
    headersVue,
    //物流jianjiecard
    logisticInfocardJianjieVue,
    //产品信息
    orderCardDetailInfoVue,
    deliverCardItemVue,
  },
  data() {
    return {
      order_id: "", //订单ID
      is_limin: true,
      orderList: [],
      indexs: "",
      status: "",
      orderData: {},
      logisticText: "运输中",
      listDetailPro: {},
      ruleOptions:[]
    };
  },
  onLoad(e) {
    this.order_id = e.order_id;
    this.indexs = e.indexs;
    this.status = e.status;
    this.getOrderDetails();
    if (e && e.detailInfo) {
      this.listDetailPro = JSON.parse(e.detailInfo);
    }
  },
  methods: {
        async getOrderListSigleData(order_sn) {
       try {
         const res = await getOrderListProduct(order_sn)
         if (res.data.status == 200) {
           let detailDa = res.data.data.list[0] && res.data.data.list[0].orderProduct || [];
           this.orderData = { ...this.orderData, customProductInfo: detailDa };
         }
       } catch (error) {
        
       }
    },
   async onSendGoodsHandle(){
    await this.getOrderDetails();
   },
    async getLogisticData(id) {
      if (!id) return;
      try {
        const res = await getExpress(id);
        if (res.data.status == 200) {
          const data = res.data.data || [];
          console.log("物流信息", data.length > 0);
          if (data.length > 0) {
            data.forEach((item) => {
              if (["派送中"].includes(item.status)) {
                this.logisticText = "派送中";
              } else if (["已揽收"].includes(item.status)) {
                this.logisticText = "已揽收";
              } else if (["已发货"].includes(item.status)) {
                this.logisticText = "已发货";
              } else if (["运输中"].includes(item.status)) {
                this.logisticText = "运输中";
              } else if (["已签收"].includes(item.status)) {
                this.logisticText = "已签收";
              } else if (["待签收"].includes(item.status)) {
                this.logisticText = "待签收";
              } else {
                this.logisticText = "运输中";
              }
            });
          } else {
            this.logisticText = "待出货中";
          }
        }
      } catch (error) {}
      // /mer/store/order/express/5881
    },
    goToLogistic() {
    const obj = {
        status: this.status,
        index: this.indexs,
        indexs: this.indexs,
        formType: "detail",
        order_id: this.order_id,
      };
      const urlParams = toQueryString(obj);
      uni.redirectTo({
        url: `./logisticsInformationDetail?${urlParams}`,
      });
    },
    formDataItem(val, type = "status") {
      if (type === "status") {
        return getOrderListStatus(val["status"]);
      } else if (type === "image") {
        return getOrderDetailStatus(val, "image");
      } else if (type === "text") {
        return getOrderDetailStatus(val, "text");
      } else {
        return val[type] || "";
      }
    },
    // 订单详情页面
    async getOrderDetails() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const res = await orderDetailApi(this.order_id);
        if (res.data.status == 200) {
          this.orderData = {
            ...res.data.data
          };
          if (this.orderData.delivery_id) {
            await this.getLogisticData(this.order_id);
          }
          if (this.orderData.status == 0) {
            await this.getOrderDeliveryRule();
          }
            this.getOrderListSigleData(this.orderData.order_sn);
          // this.getOrderListSigleData(this.orderData.order_sn)
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
       // 获取发货规则
    async getOrderDeliveryRule() {
      try {
        const res = await orderDeliveryRuleApi(this.orderData.order_id);
        if (res.data.status == 200) {
          let data = res.data.data.rule;
          data.forEach((item) => {
            let ruleData =
              (item.control[0] &&
                item.control[0].rule[0] &&
                item.control[0].rule[0].options) ||
              [];
            this.ruleOptions = ruleData;
          });
          // console.log("发货规则", this.ruleOptions);
        }
      } catch (error) {
      } finally {
      }
    },
    topgi() {
      uni.redirectTo({
        url: "./order?status=" + this.status + "&index=" + this.indexs,
        // url: './order'
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f7f8fc;
}
</style>
<style lang="scss" scoped>
.details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  .details-back {
    width: 100%;
    height: 277rpx;
    margin-top: 98rpx;
    display: flex;
    justify-content: center;
    position: relative;
    image {
      width: 100%;
      height: 100%;
    }

    .details-back-biaohsi {
      position: absolute;
      height: 80rpx;
      top: 55rpx;
      left: 43rpx;
      display: flex;
      align-items: flex-start;

      .details-back-biaohsi-kuan {
        width: 38rpx;
        height: 38rpx;
        margin-top: 6rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .details-back-biaohsi-zhuanbgtia {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        margin-left: 8rpx;

        .details-back-biaohsi-zhuanbgtia-top {
          font-size: 36rpx;
          font-weight: 600;
          color: #ffffff;
        }

        .details-back-biaohsi-zhuanbgtia-bot {
          font-size: 26rpx;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  .logistic--wrapper {
    position: absolute;
    top: 190rpx;
  }
  .order-detail-card {
    width: calc(100% - 54rpx);
    height: calc(100% - 260rpx);
    margin-top: 220rpx;
    margin-bottom: 50rpx;
  }
}
.inputInfo {
  padding: 0 25rpx;
  margin: 26rpx 0 0;
}
</style>
