<template>
  <div>
    <div class="title-font">
      <label>【{{ $t("包裹信息") }}】</label>
    </div>
    <el-descriptions :column="6" :colon="false" :contentStyle="{'color': '#000000'}" :labelStyle="{'color': '#000000'}">
      <el-descriptions-item :label="$t('快递单号')+'：'">{{ form.expressNo }}</el-descriptions-item>
      <el-descriptions-item :label="$t('包裹号')+'：'">{{ form.consNum }}</el-descriptions-item>
      <el-descriptions-item :label="$t('发货人')+'：'">{{ form.customerName }}{{ form.customerNumber }}
      </el-descriptions-item>
      <el-descriptions-item :label="$t('始发仓')+'：'">{{ warehouseList.filter(a => a.id == form.wareId)[0]!=undefined?warehouseList.filter(a => a.id == form.wareId)[0].titleZh:'' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('目的仓')+'：'">{{ warehouseList.filter(a => a.id == form.consigneeWarehouseId)[0]!=undefined?warehouseList.filter(a => a.id == form.consigneeWarehouseId)[0].titleZh:'' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('运输方式')+'：'">
        <dict-tag class="mr-10" :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="form.transportId" />
      </el-descriptions-item>
    </el-descriptions>
    <div class="title-font">
      <label>【{{ $t("申请理由") }}】</label>
    </div>
    <div v-for="(item, index) in list" :key="item.id" style="font-size: 14px;">
      {{ index + 1 }}、【
      <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="item.feeType" />
      】，
      <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="item.payType" />
      ，
      {{ item.fee }}{{ currencyList.filter(a => a.id == item.feeCurrency)[0].titleZh }}，
      {{ $t("备注") }}：{{ item.remarks }}
    </div>
  </div>
</template>
<script>
import { getConsApprovalList } from "@/api/ecw/consApproval"
import { getCurrencyList } from "@/api/ecw/currency"
import { getCons } from "@/api/ecw/cons"
import { getWarehouseList } from "@/api/ecw/warehouse"

export default {
  name: "updateFeeApproval",
  props: {
    id: [String]
  },
  data() {
    return {
      list: [],
      currencyList: [],
      form: {
        consigneeWarehouseId: null,
        wareId: null
      },
      warehouseList:[],
    }
  },
  created() {
    getWarehouseList().then((r) => {
      this.warehouseList = r.data;
    });
    getCurrencyList().then((res) => (this.currencyList = res.data))
    console.log("id", this.id)
    if (this.id) {
      getConsApprovalList({ formId: this.id }).then((res) => {
        if (res.data.length != 0) {
          this.list = JSON.parse(res.data[0].approvalDetail)
          getCons(res.data[0].consId).then(res => {
            this.form = res.data
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.title {
  padding: 10px 0;

  span {
    font-size: 14px;
    font-weight: bold;
  }
}

.bold {
  font-weight: bold;
}

.title-font {
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
