<template>
  <view class="logistics-info-cardssss">
    <headersVue @headerJump="topgi" header-title="物流信息"></headersVue>
    <view class="logistics-info-card-headers">
      <view class="logistics-info-card-headers__imagelist">
        <view class="image-list">
          <view class="image-scroll_box">
            <view class="image-scroll_box__image">
              <template v-if="isShouHou">
                <view
                  v-for="(item, index) in procductList"
                  :key="item.cart_id + '_index_' + index"
                  class="cmsd-ocm"
                >
                  <image
                    :src="item.product.cart_info.product.image"
                    v-if="item.product"
                  />
                  <view class="tip-num"
                    >{{ item.product.product_num || 0 }}件</view
                  >
                </view>
              </template>
              <template v-else>
                <view
                  v-for="(item, index) in procductList"
                  :key="item.cart_id + '_index_' + index"
                  class="cmsd-ocm"
                >
                  <image
                    :src="item.cart_info.product.image"
                    v-if="item.cart_info"
                  />
                  <view class="tip-num">{{ item.product_num || 0 }}件</view>
                </view>
              </template>
            </view>
          </view>
        </view>
        <view class="icon-right" @click="handlePopup">
          <uni-icons type="right" size="20" class="icon-image"></uni-icons>
        </view>
      </view>
      <view class="logistics-info-card-headers__logicistics">
        <view class="image-company__image" v-if="orderData.delivery_image">
          <image :src="orderData.delivery_image" />
        </view>
        <view class="image-company__content">
          <view class="image-company__content-title">
            <text>{{ orderData.delivery_name }}： </text>
            <text>{{ orderData.delivery_id }}</text>
          </view>
        </view>
        <view class="image-company__btn">
          <view
            class="copy-btn btn"
            @click="handleGiop('copy', orderData.delivery_id)"
            >复制</view
          >
          <view
            class="tel-btn btn"
            @click="handleGiop('tel', orderData.delivery_phone)"
            >电话</view
          >
        </view>
      </view>
    </view>
    <template v-if="true">
      <view class="logistics-info-card-wrapper">
        <view class="logistics-info-card-wrapper__logicistics">
          <view class="logistics-info-card-wrapper__logicistics-title">
            <view class="order-list-yi-bot-xiangxi">
              <view class="order-list-yi-bot-xiangxier">
                <view class="shou-icon">收</view>
              </view>
              <view class="order-list-yi-bot-xadasrfe">
                <view class="order-list-yi-bot-xadasrfe-top">
                  <view>{{ orderData.user_address }}</view>
                  <text> {{ orderData.real_name }}</text>
                  <text> {{ formatData(orderData, "user_phone") }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="logicistis" v-if="logisticsData.length > 0">
            <view
              class="logicistis-bot-xiangxi"
              v-for="(items, index) in logisticsData"
              :key="index + '_index_'"
            >
              <view class="logicistis-bot-xiangxier">
                <view
                  class="shou-icon"
                  :class="[index === 0 ? 'ativedata' : '']"
                ></view>
              </view>
              <view class="logicistis-bot-xadasrfe">
                <view class="logicistis-bot-xadasrfe-top">
                  <view class="title-cs">{{ items.status }}</view>
                  <view class="title-time">{{ items.time }}</view>
                </view>
              </view>
            </view>
          </view>
          <template v-else>
            <emptyData
              title="暂无物流信息"
              style="top: 45%; width: calc(100% - 60rpx)"
            ></emptyData>
          </template>
        </view>
      </view>
    </template>
    <emptyData v-else></emptyData>
    <ItemsInsidePackageVue
      ref="refsPackage"
      :orderProduct="procductList"
      :isShouHou="isShouHou"
    />
  </view>
</template>

<script>
import headersVue from "../components/headers/headers.vue";
import { toQueryString, copy, MaskRules } from "@/utils/index.js";
import ItemsInsidePackageVue from "./components/changeDetailInfo/ItemsInsidePackage.vue";
import { mockDataLogistics } from "./mockData.js";
import emptyData from "../components/emptyData/emptyData.vue";
import {
  getExpress,
  getOrderListProduct,
  orderDetailApi,
  // 退单
  refundorderExpressApi,
  refundorderDetailApi,
} from "@/commit/order.js";
export default {
  components: { headersVue, ItemsInsidePackageVue, emptyData },
  data() {
    return {
      indexs: "",
      status: "",
      order_id: "", //订单ID
      formType: "",
      logisticsData: [],
      orderData: {},
      procductList: [],
      isShouHou: false,
    };
  },
  async onLoad(e) {
    this.order_id = e.order_id;
    this.indexs = e.indexs;
    this.status = e.status;
    this.formType = e.formType || "";
    this.isShouHou = e.shouhou == 0 ? true : false;
    this.refund_order_id = e.refund_order_id;
    if (e.shouhou == 0 || ["shouehuoDetail", "shouhou"].includes(e.formType)) {
      await this.getRefundorderDetailData();
      await this.getOrderDetails(false);
    } else {
      await this.getOrderDetails(true);
    }
  },
  methods: {
    handleGiop(type, value) {
      if (type === "copy") {
        copy(value);
      } else {
        if (!value) {
          uni.showToast({
            title: "暂无电话",
            icon: "none",
          });
          return;
        }
        uni.makePhoneCall({
          phoneNumber: value,
        });
        uni.hideToast();
      }
    },
    formatData(data, type) {
      if (type === "user_phone") {
        if (!data[type]) return "";
        return MaskRules.mobile(data[type]);
      } else {
        return data[type] || "--";
      }
    },
    handlePopup() {
      this.$refs.refsPackage.open();
    },
    async getRefundorderDetailData() {
      //
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const res = await refundorderDetailApi(this.refund_order_id);
        if (res.data.status == 200) {
          let data = res.data.data || {};
          this.orderData = {
            ...data,
            delivery_name: data.delivery_type,
          };
          this.procductList = data.refundProduct || [];
          if (this.orderData.delivery_id) {
            await this.getRefundorderExpress(this.refund_order_id);
          }
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
    async getRefundorderExpress(id) {
      //
      if (!id) return;
      try {
        const res = await refundorderExpressApi(id);
        if (res.data.status == 200) {
          const data = res.data.data || [];
          this.logisticsData = data;
        }
      } catch (error) {}
    },
    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.procductList = detailDa || [];
          console.log(this.procductList, "this.procductList");
        }
      } catch (error) {}
    },
    async getOrderDetails(flag) {
      if (flag) {
        uni.showLoading({
          title: "加载中...",
          mask: true,
        });
      }
      try {
        const res = await orderDetailApi(this.order_id);
        if (res.data.status == 200) {
          if (flag) {
            this.orderData = {
              ...res.data.data,
            };
            if (this.orderData.delivery_id) {
              await this.getLogisticData(this.order_id);
            }
            this.getOrderListSigleData(this.orderData.order_sn);
          }else {
             this.orderData = {
              
              ...res.data.data,
              ...this.orderData,
            };
          }
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
        uni.hideToast();
      }
    },
    async getLogisticData(id) {
      if (!id) return;
      try {
        const res = await getExpress(id);
        if (res.data.status == 200) {
          const data = res.data.data || [];
          this.logisticsData = data;
        }
      } catch (error) {}
    },
    topgi() {
      let obj = {
        // status: this.status,
        // index: this.indexs,
        // formType: this.formType,
        // order_id: this.order_id
      };
      if (["oldInfo", "shouhou"].includes(this.formType)) {
        obj = {
          status: this.status,
          indexs: this.indexs,
          index: this.indexs,
        };
      } else {
        obj = {
          status: this.status,
          indexs: this.indexs,
          formType: this.formType,
          order_id: this.order_id,
          index: this.indexs,
          refund_order_id: this.refund_order_id,
        };
      }
      const params = toQueryString(obj);
      const redirectUrl = {
        detail: `./details?`,
        oldInfo: `./order?`,
        shouhou: `../afterSalesManagement/index?`,
        shouhouDetail: "../afterSalesManagement/afterSalesDetail?",
      }[this.formType];
      uni.redirectTo({
        url: `${redirectUrl}${params}`,
        // url: './order'
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
  /* height: 100%; */
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.logistics-info-cardssss {
  // height: 100%;
  box-sizing: border-box;
  .logistics-info-card-headers {
    padding: 15rpx 16rpx 15rpx 32rpx;
    margin-top: 95rpx;
    width: 100%;
    min-height: 260rpx;
    background: #ffffff;
    box-sizing: border-box;
    &__imagelist {
      display: flex;
      align-items: center;
      .image-list {
        // border: 2rpx solid #4e14ec;
        flex: 1;
        height: 160rpx;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 20rpx;
        .image-scroll_box {
          display: flex;
          .image-scroll_box__image {
            display: flex;
            flex: 1;
            flex-shrink: 0;
            .cmsd-ocm {
              position: relative;
            }
            image {
              border-radius: 16rpx;
              width: 158rpx;
              height: 158rpx;
              flex-shrink: 0;
              margin-right: 20rpx;
              &:last-child {
                margin-right: 50rpx;
              }
            }
            .tip-num {
              position: absolute;
              right: 20rpx;
              bottom: 10rpx;
              width: 61rpx;
              height: 37rpx;
              background: rgba($color: #000000, $alpha: 0.2);
              border-radius: 16rpx 0rpx 16rpx 0rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
              padding: 0 5rpx;
              text-align: center;
            }
          }
        }
      }
      .icon-right {
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 2rpx 6rpx 20rpx 0rpx rgba(231, 79, 79, 0.1);
        flex-shrink: 0;
        width: 30rpx;
        height: 160rpx;
        text-align: center;

        .icon-image {
        }
      }
    }
    &__logicistics {
      // border: 2rpx solid #4e14ec;
      display: flex;
      min-height: 70rpx;
      align-items: center;
      gap: 20rpx;
      padding-top: 10rpx;
      .image-company__image {
        width: 35rpx;
        height: 35rpx;
        border-radius: 50%;
        flex-shrink: 0;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .image-company__content-title {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        flex: 1;
        word-break: break-all;
      }
      .image-company__btn {
        display: flex;
        gap: 20rpx;
        user-select: none;
        .btn {
          width: 62rpx;
          height: 35rpx;
          border-radius: 4rpx;
          border: 1rpx solid #c8c8c8;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          text-align: center;
          line-height: 35rpx;
        }
      }
    }
  }
  .logistics-info-card-wrapper {
    margin-top: 30rpx;
    background: #ffffff;
    min-height: 100rpx;
    &__logicistics {
      padding: 32rpx 20rpx 15rpx 32rpx;
      &-title {
        .order-list-yi-bot-xiangxi {
          position: relative;
          display: flex;
          align-items: flex-start;

          .order-list-yi-bot-xiangxier {
            width: 40rpx;
            height: 40rpx;
            background: #1f7cff;
            flex-shrink: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            .shou-icon {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
            }
          }

          .order-list-yi-bot-xadasrfe {
            height: 100%;
            margin-left: 16rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            &:last-child {
              padding-bottom: 20rpx;
            }

            .order-list-yi-bot-xadasrfe-top {
              width: 100%;
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
              // display: -webkit-box;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2;
              // overflow: hidden;
              padding-bottom: 5rpx;
              text {
                padding-right: 20rpx;
              }
            }
          }
        }
      }
    }
  }
  .logicistis {
    .logicistis-bot-xiangxi {
      position: relative;
      display: flex;
      padding-bottom: 35rpx;
      &::before {
        content: "";
        width: 2rpx;
        background: #bdafaf;
        height: calc(100% - 2rpx);
        position: absolute;
        left: 13rpx;
        top: 23rpx;
      }
      &:last-child {
        &::before {
          height: 0rpx;
        }
      }
      .logicistis-bot-xiangxier {
        padding-right: 20rpx;
        // padding-left: 5rpx;
        .shou-icon {
          width: 20rpx;
          height: 20rpx;
          background: #999999;
          flex-shrink: 0;
          border-radius: 50%;
          &:not(.ativedata) {
            margin-left: 5rpx;
          }
          &.ativedata {
            width: 28rpx;
            height: 28rpx;
            background: #1f7cff;
            z-index: 66;
          }
        }
      }
      .title-cs {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
      }
      .title-time {
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        padding-top: 10rpx;
      }
    }
  }
}
</style>
