<template>
  <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button type="primary" @click="save()">提交</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <title-divider title="基本信息" width="90px"></title-divider>
    <a-form :form="form">

      <a-form-item v-show="false">
        <a-input v-decorator="['id']" type="hidden"/>
      </a-form-item>
      <row-list :col="3">
        <row-item>
          <a-form-item
            label="发运邮寄单号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['mailingNum', {rules: [{required: true, message: '运单号不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="货运方式"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select
              v-decorator="['dispatchType', {rules: [{required: true, message: '货运方式不能为空'}]}]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in dispatchTypeMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="报关单号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['customsDeclarationNo']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="POVC"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['povc']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="提单号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['billOfLading']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="提单邮寄号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['billOfLadingMailing']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="速递公司"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['expressCompany']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="报关单"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <upload-file :max-size="100" ref="upload1" @catchFile="catchFile1"></upload-file>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="形式发票"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <upload-file :max-size="100" ref="upload2" @catchFile="catchFile2"></upload-file>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="保单"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <upload-file :max-size="100" ref="upload3" @catchFile="catchFile3"></upload-file>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="提单"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <upload-file :max-size="100" ref="upload4" @catchFile="catchFile4"></upload-file>
          </a-form-item>
        </row-item>
      </row-list>
      <title-divider title="运费" width="90px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in freightFeeKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              承运公司{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`freightFeeMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            label="船运信息"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input
              v-decorator="[`freightFeeSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="费用"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`freightFeeMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'freightFeeExchangeRates')"
              v-decorator="[`freightFeeMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`freightFeeExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="freightFeeKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="freightFeeKeys.length === 1"
              @click="() => removeFreightFee(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addFreightFee">
            <a-icon type="plus" />添加运费
          </a-button>
        </a-col>
      </a-row>
      <title-divider title="保险费" width="90px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in insuranceFeeKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              保险公司{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`insuranceFeeMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="保单号"
          >
            <a-input
              v-decorator="[`insuranceFeeSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="费用"
          >
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`insuranceFeeMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'insuranceFeeExchangeRates')"
              v-decorator="[`insuranceFeeMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`insuranceFeeExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="insuranceFeeKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="insuranceFeeKeys.length === 1"
              @click="() => removeInsuranceFee(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addInsuranceFee">
            <a-icon type="plus" />添加保险费
          </a-button>
        </a-col>
      </a-row>
      <title-divider title="运杂费" width="90px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in dispatchSurchargeKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              单位{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`dispatchSurchargeMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="摘要"
          >
            <a-input
              v-decorator="[`dispatchSurchargeSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="费用"
          >
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`dispatchSurchargeMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'dispatchSurchargeExchangeRates')"
              v-decorator="[`dispatchSurchargeMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`dispatchSurchargeExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="dispatchSurchargeKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="dispatchSurchargeKeys.length === 1"
              @click="() => removeDispatchSurcharge(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addDispatchSurcharge">
            <a-icon type="plus" />添加运杂费
          </a-button>
        </a-col>
      </a-row>
      <title-divider title="关税" width="90px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in tariffKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              单位{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`tariffMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="摘要"
          >
            <a-input
              v-decorator="[`tariffSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              费用
            </span>
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`tariffMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'tariffExchangeRates')"
              v-decorator="[`tariffMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`tariffExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="tariffKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="tariffKeys.length === 1"
              @click="() => removeTariff(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addTariff">
            <a-icon type="plus" />添加关税
          </a-button>
        </a-col>
      </a-row>
      <title-divider title="清关费" width="90px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in clearanceChargeKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              单位{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`clearanceChargeMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="摘要"
          >
            <a-input
              v-decorator="[`clearanceChargeSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              费用
            </span>
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`clearanceChargeMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'clearanceChargeExchangeRates')"
              v-decorator="[`clearanceChargeMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`clearanceChargeExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="clearanceChargeKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="clearanceChargeKeys.length === 1"
              @click="() => removeClearanceCharge(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addClearanceCharge">
            <a-icon type="plus" />添加清关费
          </a-button>
        </a-col>
      </a-row>
      <title-divider title="港杂税" width="90px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in portSurchargeKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              单位{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`portSurchargeMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="摘要"
          >
            <a-input
              v-decorator="[`portSurchargeSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              费用
            </span>
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`portSurchargeMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'portSurchargeExchangeRates')"
              v-decorator="[`portSurchargeMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`portSurchargeExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="portSurchargeKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="portSurchargeKeys.length === 1"
              @click="() => removePortSurcharge(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addPortSurcharge">
            <a-icon type="plus" />添加港杂税
          </a-button>
        </a-col>
      </a-row>
      <title-divider title="二次转运费" width="120px"></title-divider>
      <a-row
        :gutter="24"
        v-for="(k, index) in secondaryTransportationFeeKeys"
        :key="k">
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              单位{{ index + 1 }}
            </span>
            <a-input
              style="width: 100%"
              :min="1"
              v-decorator="[`secondaryTransportationFeeMainItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
            label="摘要"
          >
            <a-input
              v-decorator="[`secondaryTransportationFeeSubItems[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <span slot="label">
              费用
            </span>
            <a-input
              type="number"
              style="width: 100%"
              :min="1"
              v-decorator="[`secondaryTransportationFeeMoneys[${k}]`]">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="币种"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-select
              @select="value => changeMoneyType(value, k, 'secondaryTransportationFeeExchangeRates')"
              v-decorator="[`secondaryTransportationFeeMoneyTypes[${k}]`]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in moneyType"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <a-form-item
            label="汇率"
            :labelCol="BaseTool.Constant.labelCol3"
            :wrapperCol="BaseTool.Constant.wrapperCol3"
          >
            <a-input-number
              style="width: 80%; margin-right: 8px"
              :min="0"
              :step="0.01"
              v-decorator="[`secondaryTransportationFeeExchangeRates[${k}]`, {initialValue: 0}]"/>
            <a-icon
              v-if="secondaryTransportationFeeKeys.length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="secondaryTransportationFeeKeys.length === 1"
              @click="() => removeSecondaryTransportationFee(k)"
            />
          </a-form-item>

        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="24">
          <a-button type="dashed" style="width: 60%;margin-left: 20%" @click="addSecondaryTransportationFee">
            <a-icon type="plus" />添加二次转运费
          </a-button>
        </a-col>
      </a-row>
    </a-form>
    <title-divider title="发运明细" width="120px"></title-divider>
    <purchase-dispatch-order-list-page ref="list"/>
  </a-card>
</template>

<script>
import pick from 'lodash.pick'
import { updatePurchaseDispatchOrderInfo } from '@/api/purchase/purchase-dispatch-order'
import PurchaseDispatchOrderListPage from '@/views/purchase/purchase-dispatch-order-list/PurchaseDispatchOrderListPage'
import UploadFile from '@/components/Upload/UploadFile'
import { querySysConfig } from '@/api/upms/config'

export default {
  name: 'BasePurchaseDispatchOrder',
  components: { PurchaseDispatchOrderListPage, UploadFile },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      addFlag: false,
      // 下拉框map
      countryMap: {},
      record: {},
      dispatchTypeMap: {},
      storePlaceMap: {},
      moneyType: {},
      customsDeclaration: [],
      insuranceFile: [],
      ladingFile: [],
      freightFeeKeys: [0],
      insuranceFeeKeys: [0],
      dispatchSurchargeKeys: [0],
      tariffKeys: [0],
      clearanceChargeKeys: [0],
      portSurchargeKeys: [0],
      secondaryTransportationFeeKeys: [0],
      freightFeeIndex: 0,
      insuranceFeeIndex: 0,
      dispatchSurchargeIndex: 0,
      tariffIndex: 0,
      clearanceChargeIndex: 0,
      portSurchargeIndex: 0,
      secondaryTransportationFeeIndex: 0,
      freightFees: [],
      insuranceFees: [],
      dispatchSurcharges: [],
      tariffs: [],
      clearanceCharges: [],
      portSurcharges: [],
      secondaryTransportationFees: [],
      customsDeclarationName: [],
      insuranceFileName: [],
      ladingFileName: [],
      proformaInvoice: [],
      rateMap: {},
      proformaInvoiceName: []

    }
  },
  props: {},
  created () {
    // 下拉框map
    this.dispatchTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.DISPATCH_TYPE)
    this.countryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SYS_USER_COUNTRY)
    this.storePlaceMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_STORE_PLACE)
    const moneyTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.MONEY_TYPE)
    const newMap = {}
    const moneyTypes = this.$store.getters.userInfo.moneyTypes
    for (let i = 0; i < moneyTypes.length; i++) {
      const value = moneyTypes[i]
      newMap[value] = moneyTypeMap[value]
    }
    this.moneyType = newMap
    const rateMap = {}
    querySysConfig({}).then(res => {
      res.data.forEach((item) => {
        rateMap[item.code] = item.content
      })
      this.rateMap = rateMap
    })
  },
  methods: {
    base (record) {
      this.visible = true
      const modal = this.$refs.list
      const { form: { setFieldsValue } } = this
      this.modalTitle = '填报发运信息'
      modal.base(record.id)
      this.record = record
      this.generateFees(record)
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'billNo',
          'purchaseApplyId',
          'purchasePlanId',
          'demandPlanId',
          'purchaseOrderId',
          'companyId',
          'companyName',
          'projectId',
          'projectName',
          'type',
          'dispatchPort',
          'customsDeclarationNo',
          'povc',
          'billOfLading',
          'billOfLadingMailing',
          'expressCompany',
          'dispatchDate',
          'originCountryId',
          'originCountryName',
          'originCountryAddress',
          'destinationCountryId',
          'destinationCountryName',
          'destinationCountryAddress',
          'purchaserId',
          'purchaserName',
          'purchaserPhone',
          'shipperId',
          'shipperName',
          'shipperPhone',
          'receiverId',
          'receiverName',
          'receiverPhone',
          'inventoryLocation',
          'dispatchType',
          'quantity',
          'dispatchedQuantity',
          'notDispatchQuantity',
          'mailingNum',
          'freightFee',
          'insuranceFee',
          'dispatchSurcharge',
          'tariff',
          'clearanceCharge',
          'portSurcharge',
          'customsDeclaration',
          'proformaInvoice',
          'freightFeeType',
          'insuranceFeeType',
          'dispatchSurchargeType',
          'tariffType',
          'clearanceChargeType',
          'portSurchargeType',
          'secondaryTransportationFeeType',
          'secondaryTransportationFee',
          'differenceType',
          'warehouseId',
          'warehouseName',
          'enterReason',
          'status',
          'remark',
          'delFlag'
        ])))
        const fileList1 = []
        if (record.customsDeclaration) {
          this.customsDeclaration = record.customsDeclaration.split(',')
          this.customsDeclarationName = record.customsDeclarationName.split(',')
          for (let i = 0; i < this.customsDeclaration.length; i++) {
            fileList1.push({
              uid: i,
              name: this.customsDeclarationName[i],
              status: 'done',
              url: this.customsDeclaration[i],
              originUrl: this.customsDeclaration[i]
            })
          }
        }
        this.$refs.upload1.base(fileList1)
        const fileList2 = []
        if (record.proformaInvoice) {
          this.proformaInvoice = record.proformaInvoice.split(',')
          this.proformaInvoiceName = record.proformaInvoiceName.split(',')
          for (let i = 0; i < this.proformaInvoice.length; i++) {
            fileList2.push({
              uid: i,
              name: this.proformaInvoiceName[i],
              status: 'done',
              url: this.proformaInvoice[i],
              originUrl: this.proformaInvoice[i]
            })
          }
        }
        this.$refs.upload2.base(fileList2)
        const fileList3 = []
        if (record.insuranceFile) {
          this.insuranceFile = record.insuranceFile.split(',')
          this.insuranceFileName = record.insuranceFileName.split(',')
          for (let i = 0; i < this.insuranceFile.length; i++) {
            fileList3.push({
              uid: i,
              name: this.insuranceFileName[i],
              status: 'done',
              url: this.insuranceFile[i],
              originUrl: this.insuranceFile[i]
            })
          }
        }
        this.$refs.upload3.base(fileList3)
        const fileList4 = []
        if (record.ladingFile) {
          this.ladingFile = record.ladingFile.split(',')
          this.ladingFileName = record.ladingFileName.split(',')
          for (let i = 0; i < this.ladingFile.length; i++) {
            fileList4.push({
              uid: i,
              name: this.ladingFileName[i],
              status: 'done',
              url: this.ladingFile[i],
              originUrl: this.ladingFile[i]
            })
          }
        }
        this.$refs.upload4.base(fileList4)
        let map = {}
        map = this.generateMap(map, this.freightFees, 'freightFee')
        map = this.generateMap(map, this.insuranceFees, 'insuranceFee')
        map = this.generateMap(map, this.dispatchSurcharges, 'dispatchSurcharge')
        map = this.generateMap(map, this.tariffs, 'tariff')
        map = this.generateMap(map, this.clearanceCharges, 'clearanceCharge')
        map = this.generateMap(map, this.portSurcharges, 'portSurcharge')
        map = this.generateMap(map, this.secondaryTransportationFees, 'secondaryTransportationFee')
        setFieldsValue(map)
      })
    },
    generateMap (map, items, attr) {
      items.forEach((item) => {
        map[attr + 'Moneys[' + item.id + ']'] = item.money
        map[attr + 'MoneyTypes[' + item.id + ']'] = item.moneyType
        map[attr + 'ExchangeRates[' + item.id + ']'] = item.exchangeRate
        map[attr + 'MainItems[' + item.id + ']'] = item.mainItem
        map[attr + 'SubItems[' + item.id + ']'] = item.subItem
      })
      return map
    },
    generateFees (record) {
      const fees = record.fees
      this.freightFees = []
      this.insuranceFees = []
      this.dispatchSurcharges = []
      this.tariffs = []
      this.clearanceCharges = []
      this.portSurcharges = []
      this.secondaryTransportationFees = []
      fees.forEach((item) => {
        switch (item.feeType) {
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_YF:
            this.freightFees.push(item)
            break
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_BXF:
            this.insuranceFees.push(item)
            break
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_YZF:
            this.dispatchSurcharges.push(item)
            break
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_GS:
            this.tariffs.push(item)
            break
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_QGS:
            this.clearanceCharges.push(item)
            break
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_GZF:
            this.portSurcharges.push(item)
            break
          case this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_ECZYF:
            this.secondaryTransportationFees.push(item)
            break
        }
      })
      this.freightFeeKeys = this.freightFees.map((item) => { return item.id })
      if (this.freightFeeKeys.length === 0) {
        this.freightFeeKeys = [0]
      }
      this.insuranceFeeKeys = this.insuranceFees.map((item) => { return item.id })
      if (this.insuranceFeeKeys.length === 0) {
        this.insuranceFeeKeys = [0]
      }
      this.dispatchSurchargeKeys = this.dispatchSurcharges.map((item) => { return item.id })
      if (this.dispatchSurchargeKeys.length === 0) {
        this.dispatchSurchargeKeys = [0]
      }
      this.tariffKeys = this.tariffs.map((item) => { return item.id })
      if (this.tariffKeys.length === 0) {
        this.tariffKeys = [0]
      }
      this.clearanceChargeKeys = this.clearanceCharges.map((item) => { return item.id })
      if (this.clearanceChargeKeys.length === 0) {
        this.clearanceChargeKeys = [0]
      }
      this.portSurchargeKeys = this.portSurcharges.map((item) => { return item.id })
      if (this.portSurchargeKeys.length === 0) {
        this.portSurchargeKeys = [0]
      }
      this.secondaryTransportationFeeKeys = this.secondaryTransportationFees.map((item) => { return item.id })
      if (this.secondaryTransportationFeeKeys.length === 0) {
        this.secondaryTransportationFeeKeys = [0]
      }
    },
    catchFile1 (fileList) {
      const customsDeclaration = []
      const customsDeclarationName = []
      fileList.forEach((item) => {
        customsDeclaration.push(item.url)
        customsDeclarationName.push(item.name)
      })
      this.customsDeclaration = customsDeclaration
      this.customsDeclarationName = customsDeclarationName
    },
    catchFile2 (fileList) {
      const proformaInvoice = []
      const proformaInvoiceName = []
      fileList.forEach((item) => {
        proformaInvoice.push(item.url)
        proformaInvoiceName.push(item.name)
      })
      this.proformaInvoice = proformaInvoice
      this.proformaInvoiceName = proformaInvoiceName
    },
    catchFile3 (fileList) {
      const customsDeclaration = []
      const customsDeclarationName = []
      fileList.forEach((item) => {
        customsDeclaration.push(item.url)
        customsDeclarationName.push(item.name)
      })
      this.insuranceFile = customsDeclaration
      this.insuranceFileName = customsDeclarationName
    },
    catchFile4 (fileList) {
      const proformaInvoice = []
      const proformaInvoiceName = []
      fileList.forEach((item) => {
        proformaInvoice.push(item.url)
        proformaInvoiceName.push(item.name)
      })
      this.ladingFile = proformaInvoice
      this.ladingFileName = proformaInvoiceName
    },
    generateValues (values, attr, type) {
      const moneys = values[attr + 'Moneys']
      const moneyTypes = values[attr + 'MoneyTypes']
      const rates = values[attr + 'ExchangeRates']
      const mainItems = values[attr + 'MainItems']
      const subItems = values[attr + 'SubItems']
      let fees = values.fees
      if (!fees) {
        fees = []
      }
      if (Object.prototype.toString.call(moneys) === '[object Array]') {
        if (moneys.length > 0) {
          for (let i = 0; i < moneys.length; i++) {
            const money = moneys[i]
            const moneyType = moneyTypes[i]
            const rate = rates[i]
            const mainItem = mainItems[i]
            const subItem = subItems[i]
            if (money) {
              fees.push({
                money: money,
                moneyType: moneyType,
                exchangeRate: rate,
                mainItem: mainItem,
                subItem: subItem,
                feeType: type
              })
            }
          }
        }
      } else if (Object.prototype.toString.call(moneys) === '[object Object]') {
        if (moneys) {
          for (const i of Object.keys(moneys)) {
            fees.push({
              money: moneys[i],
              moneyType: moneyTypes[i],
              exchangeRate: rates[i],
              mainItem: mainItems[i],
              subItem: subItems[i],
              feeType: type
            })
          }
        }
      }

      values.fees = fees
      return values
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        values.customsDeclaration = this.customsDeclaration.join(',')
        values.customsDeclarationName = this.customsDeclarationName.join(',')
        values.proformaInvoice = this.proformaInvoice.join(',')
        values.proformaInvoiceName = this.proformaInvoiceName.join(',')
        values.insuranceFile = this.insuranceFile.join(',')
        values.insuranceFileName = this.insuranceFileName.join(',')
        values.ladingFile = this.ladingFile.join(',')
        values.ladingFileName = this.ladingFileName.join(',')
        values = this.generateValues(values, 'freightFee', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_YF)
        values = this.generateValues(values, 'insuranceFee', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_BXF)
        values = this.generateValues(values, 'dispatchSurcharge', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_YZF)
        values = this.generateValues(values, 'tariff', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_GS)
        values = this.generateValues(values, 'clearanceCharge', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_QGS)
        values = this.generateValues(values, 'portSurcharge', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_GZF)
        values = this.generateValues(values, 'secondaryTransportationFee', this.DictCache.VALUE.PURCHASE_DISPATCH_FEE_TYPE.PURCHASE_DISPATCH_FEE_TYPE_ECZYF)
        console.log(values)
        updatePurchaseDispatchOrderInfo(values)
          .then(() => {
            this.handleCancel(values)
          }).catch(() => {
            this.confirmLoading = false
          })
      })
    },
    removeFreightFee (k) {
      if (this.freightFeeKeys.length === 1) {
        return
      }
      this.freightFeeKeys = this.freightFeeKeys.filter(key => key !== k)
    },
    addFreightFee () {
      const keys = this.freightFeeKeys
      let freightFeeIndex = this.freightFeeIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.freightFeeKeys = nextKeys
      this.freightFeeIndex = freightFeeIndex
    },
    changeMoneyType (value, k, attr) {
      const { form: { setFieldsValue } } = this
      let rate = 1
      if (this.record.projectMoneyType !== value) {
        rate = this.rateMap[this.DictCache.TYPE.MONEY_TYPE + value + '_' + this.record.projectMoneyType] || this.rateMap[this.DictCache.TYPE.MONEY_TYPE + this.record.projectMoneyType + '_' + value]
      }
      const map = {}
      map[attr + '[' + k + ']'] = rate
      console.log(map)
      setFieldsValue(map)
    },
    removeInsuranceFee (k) {
      if (this.insuranceFeeKeys.length === 1) {
        return
      }
      this.insuranceFeeKeys = this.insuranceFeeKeys.filter(key => key !== k)
    },
    addInsuranceFee () {
      const keys = this.insuranceFeeKeys
      let freightFeeIndex = this.insuranceFeeIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.insuranceFeeKeys = nextKeys
      this.insuranceFeeIndex = freightFeeIndex
    },
    removeDispatchSurcharge (k) {
      if (this.dispatchSurchargeKeys.length === 1) {
        return
      }
      this.dispatchSurchargeKeys = this.dispatchSurchargeKeys.filter(key => key !== k)
    },
    addDispatchSurcharge () {
      const keys = this.dispatchSurchargeKeys
      let freightFeeIndex = this.dispatchSurchargeIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.dispatchSurchargeKeys = nextKeys
      this.dispatchSurchargeIndex = freightFeeIndex
    },
    removeTariff (k) {
      if (this.tariffKeys.length === 1) {
        return
      }
      this.tariffKeys = this.tariffKeys.filter(key => key !== k)
    },
    addTariff () {
      const keys = this.tariffKeys
      let freightFeeIndex = this.tariffIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.tariffKeys = nextKeys
      this.tariffIndex = freightFeeIndex
    },
    removeClearanceCharge (k) {
      if (this.clearanceChargeKeys.length === 1) {
        return
      }
      this.clearanceChargeKeys = this.clearanceChargeKeys.filter(key => key !== k)
    },
    addClearanceCharge () {
      const keys = this.clearanceChargeKeys
      let freightFeeIndex = this.clearanceChargeIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.clearanceChargeKeys = nextKeys
      this.clearanceChargeIndex = freightFeeIndex
    },
    removePortSurcharge (k) {
      if (this.portSurchargeKeys.length === 1) {
        return
      }
      this.portSurchargeKeys = this.portSurchargeKeys.filter(key => key !== k)
    },
    addPortSurcharge () {
      const keys = this.portSurchargeKeys
      let freightFeeIndex = this.portSurchargeIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.portSurchargeKeys = nextKeys
      this.portSurchargeIndex = freightFeeIndex
    },
    removeSecondaryTransportationFee (k) {
      if (this.secondaryTransportationFeeKeys.length === 1) {
        return
      }
      this.secondaryTransportationFeeKeys = this.secondaryTransportationFeeKeys.filter(key => key !== k)
    },
    addSecondaryTransportationFee () {
      const keys = this.secondaryTransportationFeeKeys
      let freightFeeIndex = this.secondaryTransportationFeeIndex
      freightFeeIndex += 1
      const nextKeys = keys.concat(freightFeeIndex)
      this.secondaryTransportationFeeKeys = nextKeys
      this.secondaryTransportationFeeIndex = freightFeeIndex
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      // this.form.resetFields()
      this.$emit('ok', values)
    }

  }
}
</script>
