<script>
import { getApproval, getOrderDetail } from "@/api/ecw/order"
import { getPickRleaseInfo } from "@/api/ecw/orderCargoControl"
import Template from "@/views/cms/template/index.vue"
import dayjs from "dayjs"

export default {
  name: "updateReleaseTypeApproval",
  components: { Template },
  props: {
    // 审批ID
    id: Number
  },
  data() {
    return {
      detail: null,
      releaseInfo: null
    }
  },
  mounted() {
    this.getApprovalDetail()
  },
  computed: {
    showExpireTime() {
      return (days) => {
        if (!this.releaseInfo?.unloadTime || !days) {
          return "-"
        }
        return dayjs(this.releaseInfo.unloadTime).add(this.detail.newLockConsigneeDay, "day").format("YYYY-MM-DD HH:mm:ss")
      }
    }
  },
  methods: {
    getApprovalDetail() {
      getApproval(this.id).then((res) => {
        try {
          this.detail = JSON.parse(res.data?.details)
          this.getPickRleaseInfo(this.detail.orderId)
        } catch (e) {
          console.error("审核详情解析失败", e)
          this.$message.error("审核详情数据解析失败")
        }
      })
    },
    getPickRleaseInfo(orderId) {
      getPickRleaseInfo(orderId).then((res) => {
        this.releaseInfo = res.data
      })
    }
  }
}
</script>

<template>
  <div v-if="detail && releaseInfo">
    <el-descriptions>
      <el-descriptions-item :label="$t('订单号')">
        {{ detail.orderNo }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('总箱数')">
        {{ detail.sumNum }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('总体积')"> {{ detail.sumVolume }}m³ </el-descriptions-item>
      <el-descriptions-item :label="$t('总重量')"> {{ detail.sumWeight }}Kg </el-descriptions-item>
      <el-descriptions-item :label="$t('总控货箱数')">
        {{ detail.sumNum }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('剩余放货箱数')">
        {{ detail.sumNum - detail.releaseNum }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('卸柜/到仓时间')">
        {{ releaseInfo.unloadTime || "-" }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('订单限制修改收货人')">
        {{ releaseInfo.isLimitUpdateConsignee ? $t("是") : $t("否") }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('订单锁定收货人天数')" v-if="releaseInfo.isLimitUpdateConsignee">
        {{ releaseInfo.lockConsigneeDay }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('放货锁定收货人到期时间')" v-if="releaseInfo.isLimitUpdateConsignee">
        {{ showExpireTime(releaseInfo.lockConsigneeDay) }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider>{{ $t("修改内容") }}</el-divider>
    <el-descriptions :column="3">
      <el-descriptions-item :label="$t('增值服务')">
        {{ detail.newIsLimitUpdateConsignee ? $t("海外仓") : $t("非海外仓") }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('修改原因')" :span="3">
        {{ detail.reasonZh }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('附件')" :span="3">
        <div v-if="detail.annex">
          <div v-for="url in detail.annex.split(',').filter((item) => !!item)">
            <el-link :href="url" target="_blank">{{ url.split("/").pop() }}</el-link>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped lang="scss"></style>
