<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class="page-purchase-order-info">
    <div class="new-page-title">
      <div class="line" />
      <div class="text">
        {{
          $t('order.order.purchaseOrderDetails')
        }}
      </div>
    </div>
    <div class="red-tip">
      <el-icon><WarningFilled /></el-icon>{{ $t('order.order.redTips') }}
    </div>
    <div class="top-info">
      <span class="text">{{ $t('order.order.shopName') }}:</span>{{ dataList.shopName }}
    </div>
    <div
      v-if="dataList.deliverTime"
      class="top-info"
    >
      <span class="text">{{ $t('order.order.deliveryOfTime') }}:</span>{{ dataList.deliverTime }}
    </div>
    <div
      v-loading="loadingDelivery"
      class="mod-order-orderInfo"
    >
      <el-tabs
        v-if="deliveryExpress.length > 0"
        type="border-card"
        @tab-click="onClickListDelivery"
      >
        <el-tab-pane
          v-for="(item,i) in deliveryExpress"
          :key="i"
          :label="$t('order.order.package') + (i + 1)"
        >
          <div class="deliver-logistics">
            <div class="deliver-msg">
              <div class="d-item">
                <div class="text">
                  {{ $t("order.order.delType") }}：
                </div>
                <div class="res">
                  {{
                    [
                      $t("order.order.ordinaryExpress"),
                      $t("order.order.ordinaryExpress"),
                      $t("order.order.selfMention"),
                      $t("order.order.noNeedRequired"),
                      $t("order.order.sameCityDelivery")
                    ][item.deliveryType] || [
                      $t("order.order.ordinaryExpress"),
                      $t("order.order.ordinaryExpress"),
                      $t("order.order.selfMention"),
                      $t("order.order.noNeedRequired"),
                      $t("order.order.sameCityDelivery")
                    ][dataList.dvyType]
                  }}
                </div>
              </div>
              <div class="d-item">
                <div class="text">
                  {{ $t("order.order.deliveryTime") }}：
                </div>
                <div class="res">
                  {{ item.createTime }}
                </div>
              </div>
              <div
                v-if="item.deliveryType!==3"
                class="d-item"
              >
                <div class="text">
                  {{ $t("order.order.courierCompany") }}：
                </div>
                <div class="res">
                  {{ item.deliveryName ? item.deliveryName : '' }}
                </div>
              </div>
              <div
                v-if="item.deliveryType!==3"
                class="d-item"
              >
                <div class="text">
                  {{ $t("order.order.waybillNumber") }}：
                </div>
                <div class="res">
                  {{ item.deliveryNo ? item.deliveryNo : '' }}
                </div>
              </div>
              <div
                class="d-goods"
              >
                <div
                  v-for="(
                    orderItem, index
                  ) in item.orderItems"
                  :key="index"
                  class="item"
                >
                  <div class="img">
                    <ImgShow :src="orderItem.imgUrl" />
                    <div class="number">
                      ×{{ orderItem.count }}
                    </div>
                  </div>
                  <div class="name">
                    {{ orderItem.spuName }}
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="item.deliveryType!==3"
              class="logistics"
            >
              <div class="l-tit">
                <span
                  class="text"
                >{{ $t("order.order.logisticsStatus") }}：</span>
                <span
                  v-if="item.status === 0"
                  class="l-state"
                >{{ $t("order.order.noRecord") }}</span>
                <span
                  v-if="item.delivery && item.delivery.state === 1"
                  class="l-state"
                >{{ $t("order.order.collected") }}</span>
                <span
                  v-if="item.delivery && item.delivery.state === 2"
                  class="l-state"
                >{{ $t("order.order.delivering") }}</span>
                <span
                  v-if="item.delivery && item.delivery.state === 3"
                  class="l-state"
                >{{ $t("order.order.haveBeenReceived") }}</span>
                <span
                  v-if="item.delivery && item.delivery.state === 201"
                  class="l-state"
                >{{ $t("order.order.reachTheDestinationCity") }}</span>
                <span
                  v-if="item.delivery && item.delivery.state === 4"
                  class="l-state"
                >{{ $t("order.order.problemPiece") }}</span>
              </div>
              <div
                v-if="item && item.delivery"
                class="logistics-box"
              >
                <div
                  v-if="
                    item.delivery.state === 0
                      && dataList.status === 5
                      && dataList.finallyTime !== null
                  "
                  class="item"
                >
                  <div class="time">
                    {{ dataList.finallyTime }}
                  </div>
                  <div class="text">
                    {{ $t("order.order.receivedGoods") }}
                  </div>
                </div>
                <div
                  v-for="(trace, index) in item.delivery
                    .traces"
                  :key="index"
                  class="item"
                >
                  <div class="time">
                    {{ trace.acceptTime }}
                  </div>
                  <div class="text">
                    {{ trace.acceptStation }}
                  </div>
                </div>
                <div
                  v-if="
                    item.delivery.traces
                      && item.delivery.traces.length < 1
                  "
                  class="item"
                >
                  {{ $t("order.order.noLogisticsInformation") }}
                </div>
                <div
                  v-if="dataList.status >= 3 && dataList.dvyTime !== null"
                  class="item"
                >
                  <div class="time">
                    {{ dataList.dvyTime }}
                  </div>
                  <div class="text">
                    {{ $t("order.order.merchantHasShippedWa") }}
                  </div>
                </div>
                <div
                  v-if="dataList.status >= 2 && dataList.payTime !== null"
                  class="item"
                >
                  <div class="time">
                    {{ dataList.payTime }}
                  </div>
                  <div class="text">
                    {{ $t("order.order.buyerHasPaidWa") }}
                  </div>
                </div>
                <div
                  v-if="dataList.status >= 1"
                  :class="['item', dataList.status >= 1?'left-line':'']"
                >
                  <div class="time">
                    {{ dataList.createTime }}
                  </div>
                  <div class="text">
                    {{ $t("order.order.buyerSubmittedAnOrder") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="mid">
        {{ $t('order.order.amountOfGoods') }}:&nbsp; {{ dataList.totalStock }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('order.order.totalPrice') }}:&nbsp; {{ onHandlerPrice(dataList.totalAmount) }}
      </div>
      <div class="goods-list">
        <el-table
          :data="dataList.purchaseOrderItemList"
          header-cell-class-name="table-header"
        >
          <el-table-column
            prop=""
            :label="$t('order.order.product')"
            width="380"
          >
            <template #default="scope">
              <div class="df">
                <ImgShow
                  :src="scope.row.pic"
                  :img-style="{width:'60px',height:'60px'}"
                />
                <div class="name">
                  {{ scope.row.spuName + ' ' + (scope.row.skuName === null?' ':scope.row.skuName) }}
                  <div
                    v-if="
                      scope.row.returnMoneySts &&
                        scope.row.returnMoneySts < 6 &&
                        scope.row.returnMoneySts > 0
                    "
                    class="order-status"
                  >
                    {{
                      [
                        "",
                        $t("order.order.buyerApplication"),
                        $t("order.order.sellerAccepts"),
                        $t("order.order.selShipment"),
                        $t("order.order.sellerReceiving"),
                        $t("order.order.refundsuccessfully"),
                      ][scope.row.returnMoneySts]
                    }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="partyCode"
            :label="$t('order.order.commodityCode')"
            align="center"
          />
          <el-table-column
            prop="purchaseStock"
            :label="$t('order.order.purchaseQuantity2')"
            align="center"
          />
          <el-table-column
            prop="purchasePrice"
            :label="$t('order.order.purchaseUnitPrice')"
            align="center"
          >
            <template #default="scope">
              <span>￥{{ onHandlerPrice(scope.row.purchasePrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="purchaseAmount"
            :label="$t('order.order.purchaseAmount')"
            align="center"
          >
            <template #default="scope">
              <span>￥{{ onHandlerPrice(scope.row.purchaseAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="purchaseStock"
            :label="$t('order.order.scheduledReceipt')"
            align="center"
          />
          <el-table-column
            prop="actualStock"
            :label="$t('order.order.actualReceipt')"
            align="center"
          />
        </el-table>
      </div>
    </div>
    <!-- 返回上一页 -->
    <el-button
      plain
      class="btn"
      @click="onBackPreviousPage()"
    >
      {{ $t('order.order.backPreviousPage') }}
    </el-button>
  </div>
</template>

<script setup>
import * as api from '@/api/order/purchase-order'
import { deliveryPurchaseOrder } from '@/api/delivery/delivery-company'
import Big from 'big.js'

const searchForm = reactive({
  purchaseNumber: ''
})

const dataList = reactive({
  purchaseOrderId: '',
  shopName: '',
  dvyType: '',
  deliveryExpresses: [],
  purchaseOrderItemList: [],
  actualTotal: 0,
  deliveryType: '',
  status: 1,
  totalStock: 0,
  totalAmount: 0,
  dvyTime: '',
  payTime: '',
  deliveryTime: '',
  deliverTime: '',
  finallyTime: '',
  createTime: ''
})

onMounted(() => {
  init()
})

// 初始化
const init = () => {
  searchForm.purchaseNumber = useRoute().query.purchaseNumber || 0
  if (searchForm.purchaseNumber) {
    onGetDataList()
  }
}

// 获取数据
const deliveryExpress = reactive([])
const loadingDelivery = ref(true)
const onGetDataList = () => {
  loadingDelivery.value = true
  api.orderInfo(searchForm.purchaseNumber).then((data) => {
    onHandleDataList(data)
    deliveryExpress.length = 0
    if (dataList.deliveryType !== 3) {
      api.deliveryExpressInfo({ orderId: dataList.purchaseOrderId }).then((data) => {
        dataList.deliveryExpresses = data
        if (data && data.length > 0) {
          deliveryExpress.push(...data)
        }
        loadingDelivery.value = false
      })
    } else {
      loadingDelivery.value = false
    }
  })
}

// dataList赋值
const onHandleDataList = (data) => {
  dataList.purchaseOrderId = data.purchaseOrderId
  dataList.shopName = data.shopName
  dataList.status = data.status
  dataList.totalStock = data.totalStock
  dataList.totalAmount = data.totalAmount
  dataList.deliveryType = data.deliveryType
  dataList.purchaseOrderItemList = data.purchaseOrderItemList
  dataList.deliverTime = data.deliverTime
  dataList.createTime = data.createTime
}

/**
 * 物流事件
 */
const onClickListDelivery = (event) => {
  loadingDelivery.value = true
  const delivery = deliveryExpress[event.index]
  deliveryPurchaseOrder(delivery.deliveryOrderId).then((data) => {
    if (dataList.deliveryExpresses) {
      dataList.deliveryExpresses[event.index] = data
    }
    deliveryExpress[event.index] = data
    loadingDelivery.value = false
  })
}

/**
 * 精度运算-过滤
 */
const onHandlerPrice = (val) => {
  if (val == null) {
    return ''
  }
  return new Big(val).div(100).toFixed(2)
}

// 返回上一页
const router = useRouter()
const onBackPreviousPage = () => {
  router.go(-1)
}

</script>

<style lang="scss" scoped>
@use 'index';
</style>
