<template>
  <view class="Mall4j page-logistics-detail">
    <!-- tab -->
    <view class="tab">
      <scroll-view
        scroll-x="true"
        class="tab-box"
      >
        <view
          v-for="(packageItem, packageIndex) in deliveryPackageList"
          :key="packageIndex"
          :class="[showPackageIndex === packageIndex ? 'item active' : 'item']"
          @tap="onSwitchPackages(packageIndex)"
        >
          包裹{{ packageIndex + 1 }}
        </view>
      </scroll-view>
    </view>
    <!-- 商品 -->
    <view
      v-if="deliveryPackageList.length"
      class="prods-box"
    >
      <view class="logistics-info">
        <view class="item">
          <view class="tit">
            发货方式：
          </view>
          <view
            v-if="showPackageDeliveryInfo.deliveryType === 1 || showPackageDeliveryInfo.deliveryType === 0"
            class="text"
          >
            快递
          </view>
          <view
            v-if="showPackageDeliveryInfo.deliveryType === 3"
            class="text"
          >
            无需快递
          </view>
        </view>
        <view
          v-if="showPackageDeliveryInfo.deliveryType !== 3"
          class="item"
        >
          <view class="tit">
            承运公司：
          </view>
          <view class="text">
            {{ showPackageDeliveryInfo.deliveryName }}
          </view>
        </view>
        <view
          v-if="showPackageDeliveryInfo.deliveryType !== 3"
          class="item"
        >
          <view class="tit">
            运单号码：
          </view>
          <view class="text">
            {{ showPackageDeliveryInfo.deliveryNo }}
          </view>
          <view
            class="copy"
            @tap="copyDvyFlowId"
          >
            复制
          </view>
        </view>
      </view>
      <scroll-view
        scroll-x="true"
        class="img-item"
      >
        <view
          v-for="(prodItem, prodIndex) in showPackageDeliveryInfo.orderItems"
          :key="prodIndex"
          class="img"
        >
          <img-show
            :src="prodItem.imgUrl"
            img-mode="aspectFit"
          />
          <view class="count">
            ×{{ prodItem.count }}
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 物流详情 -->
    <view
      v-if="showPackageDeliveryInfo.deliveryType === 3"
      class="logistics-box"
    >
      <view>
        暂无物流详情
      </view>
    </view>
    <view
      v-else
      class="logistics-box"
    >
      <view
        v-if="showPackageDeliveryInfo.delivery && showPackageDeliveryInfo.delivery.traces && showPackageDeliveryInfo.delivery.traces.length"
      >
        <view
          v-for="(traceItem, traceIndex) in showPackageDeliveryInfo.delivery.traces"
          :key="traceIndex"
          class="item"
        >
          <view class="text">
            {{ traceItem.acceptStation }}
          </view>
          <view class="time">
            {{ traceItem.acceptTime }}
          </view>
        </view>
      </view>
      <div
        v-if="orderInfo.status >= 3 && orderInfo.deliveryTime !== null"
        class="item"
      >
        <div class="text">
          商家已发货，请等待快递拣货
        </div>
        <div class="time">
          {{ orderInfo.deliveryTime[0] + '&nbsp;' + orderInfo.deliveryTime[1] }}
        </div>
      </div>
      <div
        v-if="orderInfo.status >= 2 && orderInfo.payTime !== null"
        class="item"
      >
        <div class="text">
          您已支付完成，请等待商家发货
        </div>
        <div class="time">
          {{ orderInfo.payTime[0] + '&nbsp;' + orderInfo.payTime[1] }}
        </div>
      </div>
      <div
        v-if="orderInfo.status >= 1"
        class="item first-item"
      >
        <div class="text">
          您提交了订单，请等待系统确认
        </div>
        <div class="time">
          {{ orderInfo.createTime[0] + '&nbsp;' + orderInfo.createTime[1] }}
        </div>
      </div>
    </view>
  </view>
</template>

<script setup>
import uniCopy from '@/js_sdk/uni-copy'

let orderId = ''
onLoad((options) => {
  orderId = options.orderId
  onGetDeliveryInfoByOrderId()
  getOrderDetail()
})

/**
 * 切换展示的包裹
 * @param {Number} packageIndex 索引值
 */
const showPackageIndex = ref(0) // 当前展示的包裹索引
const deliveryPackageList = ref([]) // 所有包裹信息
const onSwitchPackages = (packageIndex) => {
  showPackageIndex.value = packageIndex
  onGetDeliveryDtoById(deliveryPackageList.value[packageIndex].deliveryOrderId)
}

/**
 * 通过物流订单id获取包裹物流详情
 */
const showPackageDeliveryInfo = ref({}) // 当前展示的包裹的物流信息
const onGetDeliveryDtoById = (deliveryOrderId) => {
  http.request({
    url: `/mall4cloud_order/my_delivery/delivery_order/${deliveryOrderId}`,
    method: 'GET',
    data: {}
  }).then(res => {
    showPackageDeliveryInfo.value = res
  })
}

/**
 * 通过订单id获取物流详情
 */
const onGetDeliveryInfoByOrderId = () => {
  http.request({
    url: `/mall4cloud_order/my_delivery/order_info/${orderId}`,
    method: 'GET'
  }).then(res => {
    if (res.length) {
      deliveryPackageList.value = res
      showPackageDeliveryInfo.value = res[0]
    }
  })
}

const orderInfo = ref({}) // 订单详情
/**
 * 通过订单id获取物流详情
 */
const getOrderDetail = () => {
  http.request({
    url: '/mall4cloud_order/my_order/order_detail',
    method: 'GET',
    data: {
      orderId
    }
  }).then(data => {
    data.finallyTime = data.finallyTime ? data.finallyTime.split(' ') : ''
    data.payTime = data.payTime ? data.payTime.split(' ') : ''
    data.createTime = data.createTime ? data.createTime.split(' ') : ''
    data.deliveryTime = data.deliveryTime ? data.deliveryTime.split(' ') : ''
    data.cancelTime = data.cancelTime ? data.cancelTime.split(' ') : ''
    orderInfo.value = data
  })
}

/**
 * 复制物流单号
 */
const copyDvyFlowId = () => {
  uniCopy({
    content: showPackageDeliveryInfo.value.deliveryNo,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: 'none'
      })
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: 'none',
        duration: 3000
      })
    }
  })
}

</script>

<style lang="scss" scoped>
@use "./logistics-detail.scss";
@use "@/popup.scss";
</style>
