<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div class="title-font">
      <label>【{{ $t("包裹信息") }}】</label>
    </div>
    <el-descriptions :column="6" :colon="false"  :border="true" :contentStyle="{'color': '#000000'}" :labelStyle="{'color': '#000000'}">
      <el-descriptions-item :label="$t('包裹编号')+'：'">{{ form.consNum }}</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-item :label="$t('包裹状态')+'：'">
          <dict-tag :type="DICT_TYPE.CONS_STATUS" :value="form.status"/>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('客户编号')+'：'">{{ 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('快递单号')+'：'">{{ form.expressNo }}</el-descriptions-item>
    </el-descriptions>
    <div class="title-font">
      <label>【{{ $t("申请理由") }}】</label>
    </div>
    <div>
      <span>{{ $t("退仓原因") }}:{{ approvalDetail.reason }}</span><br/>
      <span>{{ $t("退仓收件人") }}:{{ approvalDetail.name }}</span><br/>
      <span>{{ $t("退仓收件电话") }}:{{ approvalDetail.phone }}</span><br/>
      <span>{{ $t("退仓收件地址") }}:{{ approvalDetail.address }}</span>
      <image-and-video-upload   :file-type="['png' , 'jpg', 'jpeg']" readonly :fileSize="50" :isShowTip="true" v-model="approvalDetail.imgUrl" ></image-and-video-upload>
    </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"
import Template from "@/views/cms/template/index.vue";
import ImageAndVideoUpload from "@/components/ImageAndVideoUpload/index.vue";

export default {
  name: "retiredWarehouseApproval",
  components: {ImageAndVideoUpload, Template},
  props: {
    id: [String]
  },
  data() {
    return {
      approvalDetail: [],
      currencyList: [],
      form: {
        consigneeWarehouseId: null,
        wareId: null
      },
      warehouseList:[],
    }
  },
  created() {
    getWarehouseList().then((r) => {
      this.warehouseList = r.data;
    });
    getCurrencyList().then((res) => (this.currencyList = res.data))
    if (this.id) {
      getConsApprovalList({ formId: this.id }).then((res) => {
        if (res.data.length != 0) {
          this.approvalDetail = 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>
