<template>
  <a-card :bordered="false" :title="modalTitle" v-show="visible">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <title-divider title="基本信息" width="90px"></title-divider>
    <detail-list title="" :col="2">
      <detail-list-item term="单号">{{ model.billNo }}</detail-list-item>
      <!--      <detail-list-item term="项目名称">{{ model.projectName }}</detail-list-item>-->
      <detail-list-item term="公司名称">{{ model.companyName }}</detail-list-item>
      <detail-list-item term="发运日期">{{ model.dispatchDate }}</detail-list-item>
      <detail-list-item term="始发地国家">{{ BaseTool.Object.getField(countryMap, model.originCountryId) }}</detail-list-item>
      <detail-list-item term="始发地国家地址">{{ model.originCountryAddress }}</detail-list-item>
      <detail-list-item term="目的地国家">{{ BaseTool.Object.getField(countryMap, model.destinationCountryId) }}</detail-list-item>
      <detail-list-item term="目的地国家地址">{{ model.destinationCountryAddress }}</detail-list-item>
      <detail-list-item term="采购员名称">{{ model.purchaserName }}</detail-list-item>
      <detail-list-item term="采购员联系方式">{{ model.purchaserPhone }}</detail-list-item>
      <detail-list-item term="发货员名称">{{ model.shipperName }}</detail-list-item>
      <detail-list-item term="发货员联系方式">{{ model.shipperPhone }}</detail-list-item>
      <detail-list-item term="收货员名称">{{ model.receiverName }}</detail-list-item>
      <detail-list-item term="收货员联系方式">{{ model.receiverPhone }}</detail-list-item>
      <detail-list-item term="货运方式">{{ BaseTool.Object.getField(dispatchTypeMap,model.dispatchType) }}</detail-list-item>
      <detail-list-item term="存货位置">{{ BaseTool.Object.getField(storePlaceMap, model.inventoryLocation) }}</detail-list-item>
      <detail-list-item term="发运港">{{ model.dispatchPort }}</detail-list-item>
      <detail-list-item term="报关单号">{{ model.customsDeclarationNo }}</detail-list-item>
      <detail-list-item term="POVC">{{ model.povc }}</detail-list-item>
      <detail-list-item term="提单号">{{ model.billOfLading }}</detail-list-item>
      <detail-list-item term="提单邮寄号">{{ model.billOfLadingMailing }}</detail-list-item>
      <detail-list-item term="速递公司">{{ model.expressCompany }}</detail-list-item>
      <detail-list-item term="陆运车牌号">{{ model.plateNumber }}</detail-list-item>
      <detail-list-item term="数量">{{ BaseTool.Amount.formatter(model.quantity) }}</detail-list-item>
      <detail-list-item term="已发数量">{{ BaseTool.Amount.formatter(model.dispatchedQuantity) }}</detail-list-item>
      <detail-list-item term="未发数量">{{ BaseTool.Amount.formatter(model.quantity - model.dispatchedQuantity) }}</detail-list-item>
      <detail-list-item term="发运单邮寄单号">{{ model.mailingNum }}</detail-list-item>
      <detail-list-item term="运费(按项目主币)">{{ BaseTool.Amount.formatter(model.freightFee) }}</detail-list-item>
      <detail-list-item term="保险费(按项目主币)">{{ BaseTool.Amount.formatter(model.insuranceFee) }}</detail-list-item>
      <detail-list-item term="运杂费(按项目主币)">{{ BaseTool.Amount.formatter(model.dispatchSurcharge) }}</detail-list-item>
      <detail-list-item term="关税(按项目主币)">{{ BaseTool.Amount.formatter(model.tariff) }}</detail-list-item>
      <detail-list-item term="清关费(按项目主币)">{{ BaseTool.Amount.formatter(model.clearanceCharge) }}</detail-list-item>
      <detail-list-item term="港杂税(按项目主币)">{{ BaseTool.Amount.formatter(model.portSurcharge) }}</detail-list-item>
      <detail-list-item term="二次转运费(按项目主币)">{{ BaseTool.Amount.formatter(model.secondaryTransportationFee) }}</detail-list-item>
      <detail-list-item term="差额情况">{{ BaseTool.Object.getField(differenceTypeMap,model.differenceType) }}</detail-list-item>
      <detail-list-item term="陆运车牌号">{{ model.plateNumber }}</detail-list-item>
      <detail-list-item term="入库仓库">{{ model.warehouseName }}</detail-list-item>
      <detail-list-item term="入库原因">{{ BaseTool.Object.getField(enterReasonMap,model.enterReason) }}</detail-list-item>
      <detail-list-item term="状态"><badge :status="DictCache.COLOR.PURCHASE_DISPATCH_ORDER_STATUS[model.status]" :text="statusMap[model.status]"></badge></detail-list-item>
      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
      <detail-list-item term="更新人名称">{{ model.updateUserName }}</detail-list-item>
      <detail-list-item term="更新时间">{{ model.updateTime }}</detail-list-item>
    </detail-list>
    <detail-list title="" :col="2">
      <detail-list-item term="报关单"><div v-for="item in customsDeclarations" :key="item.url"><a target="_blank" :href="item.url">{{ item.name }}</a></div></detail-list-item>
      <detail-list-item term="形式发票"><div v-for="item in customsDeclarations" :key="item.url"><a target="_blank" :href="item.url">{{ item.name }}</a></div></detail-list-item>
    </detail-list>
    <title-divider title="发运明细" width="90px"></title-divider>
    <purchase-dispatch-order-list-page ref="orderList"/>
    <title-divider title="装箱明细" width="90px"></title-divider>
    <purchase-dispatch-container-list-page ref="containerList"/>
    <title-divider title="发运费用" width="90px"></title-divider>
    <purchase-dispatch-fee ref="feeList"/>
  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import PurchaseDispatchOrderListPage from '@/views/purchase/purchase-dispatch-order-list/PurchaseDispatchOrderListPage'
import PurchaseDispatchContainerListPage from '@/views/purchase/purchase-dispatch-container-list/PurchaseDispatchContainerListPage'
import PurchaseDispatchFee from '@/views/purchase/purchase-dispatch-fee/PurchaseDispatchFee'
const DetailListItem = DetailList.Item

export default {
  name: 'PurchaseDispatchOrderDetail',
  components: {
    DetailList,
    PurchaseDispatchOrderListPage,
    PurchaseDispatchContainerListPage,
    PurchaseDispatchFee,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      visible: false,
      // 下拉框map
      typeMap: {},
      dispatchTypeMap: {},
      differenceTypeMap: {},
      enterReasonMap: {},
      model: {
        'billNo': null,
        'purchaseApplyId': null,
        'purchasePlanId': null,
        'demandPlanId': null,
        'purchaseOrderId': null,
        'companyId': null,
        'companyName': null,
        'projectId': null,
        'projectName': null,
        'dispatchPort': null,
        'customsDeclarationNo': null,
        'povc': null,
        'billOfLading': null,
        'billOfLadingMailing': null,
        'expressCompany': null,
        'type': null,
        'dispatchDate': null,
        'originCountryId': null,
        'originCountryName': null,
        'originCountryAddress': null,
        'destinationCountryId': null,
        'destinationCountryName': null,
        'destinationCountryAddress': null,
        'purchaserId': null,
        'purchaserName': null,
        'purchaserPhone': null,
        'shipperId': null,
        'shipperName': null,
        'shipperPhone': null,
        'receiverId': null,
        'receiverName': null,
        'receiverPhone': null,
        'inventoryLocation': null,
        'dispatchType': null,
        'quantity': null,
        'dispatchedQuantity': null,
        'notDispatchQuantity': null,
        'mailingNum': null,
        'freightFee': null,
        'insuranceFee': null,
        'dispatchSurcharge': null,
        'tariff': null,
        'clearanceCharge': null,
        'portSurcharge': null,
        'customsDeclaration': [],
        'proformaInvoice': [],
        'freightFeeType': null,
        'insuranceFeeType': null,
        'dispatchSurchargeType': null,
        'tariffType': null,
        'clearanceChargeType': null,
        'portSurchargeType': null,
        'secondaryTransportationFeeType': null,
        'secondaryTransportationFee': null,
        'differenceType': null,
        'plateNumber': null,
        'warehouseId': null,
        'warehouseName': null,
        'enterReason': null,
        'status': null,
        'remark': null,
        'delFlag': null,
        'createdUserId': null,
        'updateUserId': null,
        'updateUserName': null,
        'updateTime': null
      },
      statusMap: {},
      customsDeclarations: [],
      proformaInvoices: [],
      ladingFiles: [],
      insuranceFiles: [],
      countryMap: {},
      moneyTypeMap: {},
      storePlaceMap: {}
    }
  },
  created () {
    // 下拉框map
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_DISPATCH_STATUS)
    this.dispatchTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.DISPATCH_TYPE)
    this.differenceTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_DIFF_TYPE)
    this.enterReasonMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.IN_STORE_FORM_TYPE)
    this.storePlaceMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_STORE_PLACE)
    this.countryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SYS_USER_COUNTRY)
    this.moneyTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.MONEY_TYPE)
  },
  methods: {
    base (record) {
      this.visible = true
      this.modalTitle = '发运单详情'
      this.model = record
      const customsDeclaration = record.customsDeclaration
      const customsDeclarationName = record.customsDeclarationName
      if (!customsDeclaration) {
        this.customsDeclarations = []
      } else {
        const customsDeclarations = []
        const urls = customsDeclaration.split(',')
        const names = customsDeclarationName.split(',')
        for (let i = 0; i < urls.length; i++) {
          customsDeclarations.push({
            url: urls[i],
            name: names[i]
          })
        }
        this.customsDeclarations = customsDeclarations
      }
      const proformaInvoice = record.proformaInvoice
      const proformaInvoiceName = record.proformaInvoiceName
      if (!proformaInvoice) {
        this.proformaInvoices = []
      } else {
        const proformaInvoices = []
        const urls = proformaInvoice.split(',')
        const names = proformaInvoiceName.split(',')
        for (let i = 0; i < urls.length; i++) {
          proformaInvoices.push({
            url: urls[i],
            name: names[i]
          })
        }
        this.proformaInvoices = proformaInvoices
      }
      const insuranceFile = record.insuranceFile
      const insuranceFileName = record.insuranceFileName
      if (!insuranceFile) {
        this.insuranceFiles = []
      } else {
        const insuranceFiles = []
        const urls = insuranceFile.split(',')
        const names = insuranceFileName.split(',')
        for (let i = 0; i < urls.length; i++) {
          insuranceFiles.push({
            url: urls[i],
            name: names[i]
          })
        }
        this.insuranceFiles = insuranceFiles
      }
      const ladingFile = record.ladingFile
      const ladingFileName = record.ladingFileName
      if (!ladingFile) {
        this.ladingFiles = []
      } else {
        const ladingFiles = []
        const urls = ladingFile.split(',')
        const names = ladingFileName.split(',')
        for (let i = 0; i < urls.length; i++) {
          ladingFiles.push({
            url: urls[i],
            name: names[i]
          })
        }
        this.ladingFiles = ladingFiles
      }
      const modal = this.$refs.orderList
      modal.base(record.id, null)
      const containerModal = this.$refs.containerList
      containerModal.base(record.id)
      const feeModal = this.$refs.feeList
      feeModal.base(record.id)
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok', {})
    }

  }
}
</script>
