<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" inline size="small" label-width="100px"
      label-position="left">
      <div>
        <el-form-item :label="$t('境内外类型')" prop="areaType">
          <el-radio v-model="formData.areaType" :label="0" :disabled="disabled">{{$t('国内')}}</el-radio>
          <el-radio v-model="formData.areaType" :label="1" :disabled="disabled">{{$t('国外')}}</el-radio>
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('公司全称')" prop="companyZh">
          <el-input v-model="formData.companyZh" :placeholder="$t('请输入公司全称')" show-word-limit clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('英文名称')" prop="companyEn">
          <el-input v-model="formData.companyEn" :placeholder="$t('请输入公司英文名')" show-word-limit clearable></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('合作开始时间')" prop="cooperationDateStart" label-width="120px">
          <el-date-picker v-model="formData.cooperationDateStart" value-format="timestamp" clearable></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('合作结束时间')" prop="cooperationDateEnd" label-width="120px">
          <el-date-picker v-model="formData.cooperationDateEnd" value-format="timestamp" clearable></el-date-picker>
        </el-form-item>
      </div>
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('公司电话')" prop="tell">
          <el-input v-model="formData.tell" :placeholder="$t('请输入公司电话')" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('邮件地址')" prop="email">
          <el-input v-model="formData.email" :placeholder="$t('请输入邮箱地址')" clearable></el-input>
        </el-form-item>
      </div>
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('公司地址')" prop="address">
          <area-selector
            :country="formData.country"
            :province="formData.province"
            :city="formData.city"
            @countryChange="onAreaChange('country', $event)"
            @provinceChange="onAreaChange('province', $event)"
            @cityChange="onAreaChange('city', $event)"
          />
          <el-input v-model="formData.address" :placeholder="$t('请输入详细地址')" class="mt-10"></el-input>
        </el-form-item>
      </div>
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('备注')" prop="remark">
          <el-input v-model="formData.remark" type="textarea" :placeholder="$t('请输入备注')"
            :autosize="{minRows: 4, maxRows: 4}" class="w-500"></el-input>
        </el-form-item>
      </div>
      
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('供应商类别')" prop="companyType">
          <dict-selector v-model="formData.companyTypeArr" type="company_type" multiple />
        </el-form-item>
      </div>

      <div>
        <el-form-item :label="$t('合作类型')" prop="cooperationType">
          <dict-selector v-model="formData.cooperationType" type="cooperation_type" />
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('目的港码头')" prop="dockIds">
          <el-select v-model="formData.dockIds" filterable multiple clearable>
              <el-option v-for="(item) in allDocks" :key="item.id" :label="$l(item, 'title')" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-if="formData.areaType==1">
        <el-form-item :label="$t('国家')" prop="country">
          <el-select v-model="formData.country" :placeholder="$t('请选择国家')">
            <el-option
              v-for="item in treeList"
              :key="item.id"
              :label="$l(item,'title')"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('营业执照')" prop="license">
          <upload v-model="formData.license" />
        </el-form-item>
        <el-form-item :label="$t('合同')" prop="contract">
            <upload v-model="formData.contract" />
        </el-form-item>
      </div>
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('统一信用代码')" prop="licenseNumber">
          <el-input v-model="formData.licenseNumber" :placeholder="$t('请输入统一社会信用代码')" clearable
            :style="{width: '100%'}"></el-input>
        </el-form-item>
      </div>
      <div v-if="formData.areaType==0">
        <el-form-item :label="$t('结算周期')" prop="settlementPeriod">
          <dict-selector v-model="formData.settlementPeriod" type="settlement_period" />
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('价格优势')" prop="priceAdvantage">
          <dict-selector v-model="formData.priceAdvantage" type="price_advantage" />
        </el-form-item>
      </div>
      <el-card class="mt-10" v-if="formData.areaType==0">
        <div class="card-header" slot="header">
          <div class="title">{{$t('优质条件')}}</div>
        </div>
        <div v-if="typeBool(formData.companyTypeArr,['1'])">
          <el-form-item :label="$t('船公司')" prop="shipCompany" label-width="250">
            <suppliers-selector v-model="formData.resourceVO.shipCompany" company-type="9" :disabled="false" />
          </el-form-item>
        </div>
        <div v-if="typeBool(formData.companyTypeArr,['1','2','4','5','7'])">
          <el-form-item :label="$t('港口')" prop="ports" label-width="250">
            <el-select v-model="formData.resourceVO.ports" filterable multiple clearable>
                <el-option v-for="(item) in seaPort" :key="item.id" :label="$l(item, 'title')" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('港口优势条件')" prop="portConditions" label-width="250">
            <dict-selector v-model="formData.resourceVO.portConditions" type="port_conditions" />
          </el-form-item>
          <el-button style="margin-left: 30px;" type="text" v-hasPermi="['ecw:dock:create']" @click="portVisible=true">{{$t('新增港口')}}</el-button>
        </div>
        <div v-if="typeBool(formData.companyTypeArr,['10'])">
          <el-form-item :label="$t('航空公司')" prop="airCompany" label-width="250">
            <suppliers-selector v-model="formData.resourceVO.airCompany" company-type="10" :disabled="false" />
          </el-form-item>
          <el-form-item :label="$t('航空公司优势条件')" prop="airConditions" label-width="250">
            <dict-selector v-model="formData.resourceVO.airConditions" type="port_conditions" />
          </el-form-item>
        </div>
        <div v-if="typeBool(formData.companyTypeArr,['3'])">
          <el-form-item :label="$t('出证速度')" prop="certificateSpeed" label-width="250">
            <el-radio v-model="formData.resourceVO.certificateSpeed" :label="0">{{$t('快')}}</el-radio>
            <el-radio v-model="formData.resourceVO.certificateSpeed" :label="1">{{$t('慢')}}</el-radio>
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('合作不良记录登记')" prop="badCooperationRecord" label-width="250">
            <el-input v-model="formData.resourceVO.badCooperationRecord" :placeholder="$t('请输入合作不良记录登记')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
      </el-card>
      <div v-if="formData.areaType==0">
       <el-card class="mt-10">
        <div class="card-header" slot="header">
          <div class="title">{{$t('联系人')}}</div>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="formData.contactList.push({})"></el-button>
        </div>
        <el-table :data="formData.contactList" border class="data-list">
          <el-table-column :label="$t('序号')" width="80px">
            <template slot-scope="scope">{{scope.$index + 1}}</template>
          </el-table-column>
          <el-table-column :label="$t('部门')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.department" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('职位')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.position" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('名称') + '*'">
            <template slot="header">
              {{$t('名称')}}<span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                class="mb-0 mr-0"
                :prop="`contactList.${scope.$index}.name`"
                :rules="{required: true, message: $t('联系人名称不能为空'), trigger: 'blur'}"
              >
                <el-input v-model="scope.row.name"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('电话') + '*'">
            <template slot="header">
              {{$t('电话')}}<span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                class="mb-0 mr-0"
                :prop="`contactList.${scope.$index}.phone`"
                :rules="{required: true, message: $t('联系人电话不能为空'), trigger: 'blur'}"
              >
                <el-input v-model="scope.row.phone"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" width="80px">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="delContact(scope.$index)" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="mt-10">
        <div class="card-header" slot="header">
          <div class="title">{{$t('银行信息')}}</div>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="formData.bankList.push({})"></el-button>
        </div>
        <el-table :data="formData.bankList" border class="data-list">
          <el-table-column :label="$t('序号')" width="80px">
            <template slot-scope="scope">{{scope.$index + 1}}</template>
          </el-table-column>
          <el-table-column :label="$t('账户名称') + '*'">
            <template slot="header">
              {{$t('账户名称')}}<span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                class="mb-0 mr-0"
                :prop="`bankList.${scope.$index}.accountName`"
                :rules="{required: true, message: $t('银行账户名称不能为空'), trigger: 'blur'}"
              >
                <el-input v-model="scope.row.accountName" placeholder=""></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('币别') + '*'">
            <template slot="header">
              {{$t('币别')}}<span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                class="mb-0 mr-0"
                :prop="`bankList.${scope.$index}.currency`"
                :rules="{required: true, message: $t('币别不能为空'), trigger: 'blur'}"
              >
                <selector :options="currencyList" v-model="scope.row.currency" value-field="id" :label-field="'title' + $l()"></selector>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('银行名称') + '*'">
            <template slot="header">
              {{$t('银行名称')}}<span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                class="mb-0 mr-0"
                :prop="`bankList.${scope.$index}.bankName`"
                :rules="{required: true, message: $t('银行名称不能为空'), trigger: 'blur'}"
              >
                <el-input v-model="scope.row.bankName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('银行账户') + '*'">
            <template slot="header">
              {{$t('银行账户')}}<span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                class="mb-0 mr-0"
                :prop="`bankList.${scope.$index}.bankAccount`"
                :rules="{required: true, message: $t('银行账户不能为空'), trigger: 'blur'}"
              >
                <el-input v-model="scope.row.bankAccount"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('银行代码')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.bankCode" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('账户类型')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.accountType" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('状态')">
            <template slot-scope="scope">
              <dict-selector :type="DICT_TYPE.COMMON_STATUS" v-model="scope.row.status" defaultable />
            </template>
          </el-table-column>
          <el-table-column :label="$t('银行地址')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.bankAddress" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" width="80px">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="delBank(scope.$index)" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      

      <el-card class="mt-10" v-if="false">
        <div class="card-header" slot="header">
          <div class="title">{{$t('空运优质资源条件')}}</div>
        </div>
        <div>
          <el-form-item :label="$t('空运优势机场')" prop="airdrome" label-width="250">
            <el-select v-model="formData.resourceVO.airdrome" filterable multiple clearable>
                <el-option v-for="(item) in airPort" :key="item.id" :label="$l(item, 'title')" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-button style="margin-left: 30px;" type="text" v-hasPermi="['ecw:dock:create']" @click="portVisible=true">{{$t('新增港口')}}</el-button>
        </div>
        <div>
          <el-form-item :label="$t('空运优势航空公司')" prop="airCompany" label-width="250">
            <suppliers-selector v-model="formData.resourceVO.airCompany" company-type="10" :disabled="false" />
          </el-form-item>
          <el-form-item :label="$t('航空公司优势条件')" prop="airConditions" label-width="250">
            <dict-selector v-model="formData.resourceVO.airConditions" type="port_conditions" />
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('订舱公司')" prop="bookCompanyAir" label-width="250">
            <suppliers-selector v-model="formData.resourceVO.bookCompanyAir" company-type="5" :disabled="false" />
          </el-form-item>
          <el-form-item :label="$t('订舱优势条件')" prop="bookConditionsAir" label-width="250">
            <dict-selector v-model="formData.resourceVO.bookConditionsAir" type="book_conditions" />
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('报关公司')" prop="customsCompanyAir" label-width="250">
            <suppliers-selector v-model="formData.resourceVO.customsCompanyAir" company-type="7" :disabled="false" />
          </el-form-item>
          <el-form-item :label="$t('报关优势条件')" prop="customsConditionsAir" label-width="250">
            <dict-selector v-model="formData.resourceVO.customsConditionsAir" type="customs_conditions" />
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('证书公司')" prop="certificateCompanyAir" label-width="250">
            <suppliers-selector v-model="formData.resourceVO.certificateCompanyAir" company-type="3" :disabled="false" />
          </el-form-item>
          <el-form-item :label="$t('证书优势条件')" prop="certificateConditionsAir" label-width="250">
            <dict-selector v-model="formData.resourceVO.certificateConditionsAir" type="certificate_conditions" />
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('合作不良记录登记')" prop="badCooperationRecordAir" label-width="250">
            <el-input v-model="formData.resourceVO.badCooperationRecordAir" :placeholder="$t('请输入合作不良记录登记')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
      </el-card>
      </div>

      <div v-if="formData.areaType==1">
        <h1>代理商</h1>
        <h2>收货人</h2>
        <div class="supplier-item">
          <el-form-item :label="$t('公司名称')" prop="receiveCompanyName">
            <el-input v-model="formData.externalVO.receiveCompanyName" :placeholder="$t('请输入公司名称')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('地址')" prop="receiveAddress">
            <el-input v-model="formData.externalVO.receiveAddress" :placeholder="$t('请输入地址')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <div class="supplier-item">
          <el-form-item :label="$t('电话')" prop="receiveTel">
            <el-input v-model="formData.externalVO.receiveTel" :placeholder="$t('请输入电话')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('邮箱')" prop="receiveEmail">
            <el-input v-model="formData.externalVO.receiveEmail" :placeholder="$t('请输入邮箱')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;align-items: flex-end;">
          <h2>通知方</h2>
          <el-button style="margin-left: 30px;" type="text" @click="sameReceive">{{$t('与收货人相同')}}</el-button>
        </div>
        <div class="supplier-item">
          <el-form-item :label="$t('公司名称')" prop="notifyCompanyName">
            <el-input v-model="formData.externalVO.notifyCompanyName" :placeholder="$t('请输入公司名称')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('地址')" prop="notifyAddress">
            <el-input v-model="formData.externalVO.notifyAddress" :placeholder="$t('请输入地址')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <div class="supplier-item">
          <el-form-item :label="$t('电话')" prop="notifyTel">
            <el-input v-model="formData.externalVO.notifyTel" :placeholder="$t('请输入电话')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('邮箱')" prop="notifyEmail">
            <el-input v-model="formData.externalVO.notifyEmail" :placeholder="$t('请输入邮箱')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <h2>货物描述</h2>
        <div class="supplier-item">
          <el-form-item :label="$t('品名')" prop="goodName">
            <el-input v-model="formData.externalVO.goodName" :placeholder="$t('请输入品名')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('CTN NO')" prop="ctnNo">
            <!-- <el-select v-model="formData.externalVO.clearanceFileId" @change="changeFile">
              <el-option v-for="(item) in fileList" :value="item.id" :label="getCountry(item.country,item.district)" :key="item.id" />
            </el-select> -->
            <el-input v-model="formData.externalVO.ctnNo" :placeholder="$t('请输入CTN NO')" show-word-limit clearable></el-input>
          </el-form-item>
          <!-- <el-button type="text" @click="addFileNo" v-hasPermi="['ecw:supplier:addno']">{{$t('新增清关文件号码')}}</el-button> -->
        </div>
        <div class="supplier-item">
          <el-form-item :label="$t('From M No')" prop="fromNo">
            <el-input v-model="formData.externalVO.fromNo" :placeholder="$t('请输入From M No')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('BA NO')" prop="baNo">
            <el-input v-model="formData.externalVO.baNo" :placeholder="$t('请输入BA NO')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <div class="supplier-item">
          <el-form-item :label="$t('包装数量')" prop="packNum">
            <el-input v-model="formData.externalVO.packNum" :placeholder="$t('请输入包装数量')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('包装单位')" prop="packUnit">
            <!-- <el-input v-model="formData.externalVO.packUnit" :placeholder="$t('请输入包装单位')" show-word-limit clearable></el-input> -->
            <dict-selector v-model="formData.externalVO.packUnit" type="goods_package_type" />
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('清关要求')" prop="clearanceRequireData">
            <el-select v-model="formData.externalVO.clearanceRequireData" @change="changeRequire">
              <el-option v-for="(item) in requireData" :value="item" :label="item" :key="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.externalVO.clearanceRequireData==$t('自定义')" :label="$t('自定义要求')" prop="clearanceRequire">
            <el-input v-model="formData.externalVO.clearanceRequire" :placeholder="$t('请输入自定义要求')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('是否提供')" prop="provide">
            <el-radio v-model="formData.externalVO.provide" :label="1">{{$t('提供')}}</el-radio>
            <el-radio v-model="formData.externalVO.provide" :label="2">{{$t('不提供')}}</el-radio>
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('合作不良记录登记')" prop="badCooperationRecord" label-width="250">
            <el-input v-model="formData.externalVO.badCooperationRecord" :placeholder="$t('请输入合作不良记录登记')" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item :label="$t('TIN NO./RC NO.')" prop="tinNoRcNo" label-width="250">
            <el-input v-model="formData.externalVO.tinNoRcNo" :placeholder="$t('请输入TIN NO./RC NO.')" type="textarea" style="width: 300px;" show-word-limit clearable></el-input>
          </el-form-item>
        </div>
      </div>
      
      
      <el-form-item size="large" class="mt-20">
        <el-button type="primary" @click="submitForm">{{$t('提交')}}</el-button>
        <el-button @click="resetForm">{{$t('重置')}}</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :title="$t('新增清关号码')" :visible.sync="showFileNoDialog" width="50%" append-to-body :close-on-click-modal="false">
      <el-table v-if="!addFileNoShow" ref="consigneeTable" :data="fileList" highlight-current-row style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="country" :label="$t('国家地区')" align="center" header-align="center">
          <template slot-scope="scope">
            {{getCountry(scope.row.country,scope.row.district)}}
          </template>
        </el-table-column>
        <el-table-column prop="fromNo" :label="$t('From M No')" align="center" header-align="center" />
        <el-table-column prop="baNo" :label="$t('BA NO')" align="center" header-align="center" />
        <el-table-column
          :label="$t('操作')"
          align="center"
          header-align="center"
          width="250"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="selectFile(scope.row)"
            >{{ $t('选择') }}</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="updateFileNo(scope.row)"
            >{{ $t('编辑') }}</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteFileNo(scope.row)"
            >{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form v-else ref="fileNoForm" :model="fileNoForm" :rules="fileNoRules">
        <el-form-item :label="$t('国家')" prop="country">
          <el-select v-model="fileNoForm.country">
            <el-option v-for="(item) in treeList" :value="item.id" :label="$l(item, 'title')" :key="item.id" />
        </el-select>
        </el-form-item>
        <el-form-item :label="$t('地区')" prop="district">
          <el-select v-model="fileNoForm.district">
            <el-option v-for="dict in districtList" :key="dict.id" :label="$l(dict, 'title')" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('From M No')" prop="fromNo">
            <el-input v-model="fileNoForm.fromNo" :placeholder="$t('请输入From M No')" show-word-limit clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('BA NO')" prop="baNo">
            <el-input v-model="fileNoForm.baNo" :placeholder="$t('请输入BA NO')" show-word-limit clearable></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="!addFileNoShow"
          type="primary"
          @click="addFileNoShow = true"
        >{{ $t('新增') }}</el-button>
        <el-button v-if="!addFileNoShow" @click="showFileNoDialog = false">{{
          $t('取消')
        }}</el-button>
        <el-button v-if="addFileNoShow" type="primary" @click="addfile">{{
          $t('提交')
        }}</el-button>
        <el-button
          v-if="addFileNoShow"
          @click="
            addFileNoShow = false
            getFile()
            fileNoForm = {}
          "
        >{{ $t('返回') }}</el-button>
      </div>
    </el-dialog>
    <!-- 对话框(添加港口) -->
    <el-dialog :title="$t('新增港口')" :visible.sync="portVisible" width="500px" append-to-body>
      <el-form ref="portForm" :model="portForm" :rules="portRules" label-width="80px">
        <el-form-item :label="$t('中文名称')" prop="titleZh">
          <el-input v-model="portForm.titleZh" :placeholder="$t('请输入中文名称')" />
        </el-form-item>
        <el-form-item :label="$t('英文名称')" prop="titleEn">
          <el-input v-model="portForm.titleEn" :placeholder="$t('请输入英文名称')" />
        </el-form-item>
        <el-form-item :label="$t('排序')" prop="sort">
          <el-input v-model="portForm.sort" :placeholder="$t('请输入排序')" />
        </el-form-item>

      
        <el-form-item :label="$t('国家')" prop="countryId">
          <el-select v-model="portForm.countryId" :placeholder="$t('请选择国家')" @change="changeCountry">
            <el-option
              v-for="item in treeList"
              :key="item.id"
              :label="$l(item,'title')"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        
        <el-form-item :label="$t('省')" prop="provinceId">
          <el-select v-model="portForm.provinceId" :placeholder="$t('请选择省')" @change="changeProvince">
            <el-option
              v-for="item in portProvinceList"
              :key="item.id"
              :label="$l(item,'title')"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item :label="$t('城市')" prop="cityId">
          <el-select v-model="portForm.cityId" :placeholder="$t('请选择城市')" @change="changeCity">
            <el-option
              v-for="item in portCityList"
              :key="item.id"
              :label="$l(item,'title')"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('港口类型')" prop="portType">
          <el-select v-model="portForm.portType" :placeholder="$t('请选择')">
            <el-option v-for="dict in portTypeDatas" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
      
        <el-form-item :label="$t('码头编号')" prop="number">
          <el-input v-model="portForm.number" :placeholder="$t('请输入码头编号')" />
        </el-form-item>
        <el-form-item :label="$t('码头类型')" prop="type">
          <el-input v-model="portForm.type" :placeholder="$t('请输入码头类型')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addPort">{{$t('确 定')}}</el-button>
        <el-button @click="portVisible=false">{{$t('取 消')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { createSupplier, updateSupplier, getSupplier, createFileNo, updateFileNo, getFileNoPage} from "@/api/ecw/supplier";
import { createDock } from "@/api/ecw/dock";
import upload from '@/components/ImageUpload'
import { getListTree } from "@/api/ecw/region";
import AreaSelector from '@/components/AreaSelector'
import {getCurrencyList} from '@/api/ecw/currency'
import Selector from '@/components/Selector'
import {validatePwd} from '@/api/ecw/busiPwd'
import SuppliersSelector from '@/components/SuppliersSelector'
import { getDockPage } from "@/api/ecw/dock";
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
export default {
  components: {upload,  AreaSelector, Selector, SuppliersSelector},
  props: [],
  data() {
    return {
      disabled: false,
      formData: {
        areaType: 0,
        companyZh: undefined,
        agentName: undefined,
        tell: "",
        address: "",
        remark: undefined,
        field110: undefined,
        companyTypeArr: [],
        cooperationType: undefined,
        settlementPeriod: undefined,
        priceAdvantage: undefined,
        license: null,
        contract: null,
        licenseNumber: undefined,
        contactList:[],
        bankList: [],
        resourceVO: {},
        externalVO: {}
      },
      rules: {
        companyZh: [{
          required: true,
          message: this.$t('请输入公司全称'),
          trigger: 'blur'
        }],
        agentName: [],
        tell: [],
        address: [],
        remark: [],
        companyType: [{
          required: true,
          type: 'string',
          message: this.$t('请至少选择一个供应商类别'),
          trigger: 'change'
        }],
        cooperationType: [{
          required: true,
          message: this.$t('请选择合作类型'),
          trigger: 'change'
        }],
        licenseNumber: [],
      },
      treeList:[],
      provinceList:[],
      cityList:[],
      // 码头
      allDocks: [],
      currencyList:[],
      requireData: [
        this.$t('CTN证书'),this.$t('COC证书'),this.$t('SONCAP证书'),this.$t('自定义')
      ],
      fileList: [],
      fileNoForm: {},
      fileNoRules: {
        country: [{required: true,message: this.$t('请输入国家'),trigger: 'blur'}],
        district: [{required: true,message: this.$t('请输入地区'),trigger: 'blur'}],
        fromNo: [{required: true,message: this.$t('请输入From M No'),trigger: 'blur'}],
        baNo: [{required: true,message: this.$t('请输入BA NO'),trigger: 'blur'}],
      },
      showFileNoDialog: false,
      addFileNoShow: false,
      portForm: {},
      portVisible: false,
      // 表单校验
      portRules: {
        titleZh: [{ required: true, message: this.$t("中文名称不能为空"), trigger: "blur" }],
        titleEn: [{ required: true, message: this.$t("英文名称不能为空"), trigger: "blur" }],
        sort: [{ required: true, message: this.$t("排序不能为空"), trigger: "blur" }]
      },
      portTypeDatas: getDictDatas(DICT_TYPE.ECW_PORT_TYPE)
    }
  },
  computed: {
    airPort(){
        return this.allDocks.filter(item => item.portType == 1)
    },
    seaPort(){
      if(this.typeBool(this.formData.companyTypeArr,['1','2','4']) && this.typeBool(this.formData.companyTypeArr,['5','7'])) return this.allDocks
      if(this.typeBool(this.formData.companyTypeArr,['5','7'])) return this.allDocks.filter(item => item.portType == 1)
      if(this.typeBool(this.formData.companyTypeArr,['1','2','4'])) return this.allDocks.filter(item => item.portType == 2)
    },
    districtList(){
        if(!this.fileNoForm.country) return []
        let country = this.treeList.find(item => item.id == this.fileNoForm.country)
        return country && country.children || []
    },
    portProvinceList(){
        if(!this.portForm.countryId) return []
        let country = this.treeList.find(item => item.id == this.portForm.countryId)
        return country && country.children || []
    },
    portCityList(){
        if(!this.portProvinceList.length) return []
        let province = this.portProvinceList.find(item => item.id == this.portForm.provinceId)
        return province && province.children || []
    },
    portTypeName() {
      return portType => {
        for(let index in this.portTypeDatas) {
          let portTypeItem = this.portTypeDatas[index];
          if(portTypeItem.value == portType) {
            return this.$l(portTypeItem,'label');
          }
        }
      }
    },
  },
  watch: {
      'formData.country'(country){
          this.treeList.forEach(item => {
              if(item.id == country){
                  this.provinceList = item.children || []
              }
          })
      },
      'formData.province'(province){
          this.provinceList.forEach(item => {
              if(item.id == province){
                  this.cityList = item.children || []
              }
          })
      },
      'formData.companyTypeArr'(val){
        this.$set(this.formData, 'companyType', val.join(","))
      },
      'formData.areaType'(){
        this.$refs["elForm"].clearValidate()
      }
  },
  created() {
      getCurrencyList().then(res => {
        this.currencyList = res.data
      })
      this.getDock()
      this.getFile()

      // 回显数据需要在加载了地区数据之后，否则无法正常回显
      getListTree({treeType: 1}).then(response => {
        this.treeList = response.data

        if(this.$route.query.id){
            this.disabled = true
            getSupplier(this.$route.query.id).then(response => {
                /* response.data.companyType = response.data.companyType.split(",") || [] */
                this.formData = response.data
                
                this.$set(this.formData, 'companyTypeArr', this.strToArray(response.data.companyType))
                this.$set(this.formData, 'dockIds', this.strToArray(response.data.dockIds))
                this.$set(this.formData, 'settlementPeriod', response.data.settlementPeriod==0?null:response.data.settlementPeriod)
                this.$set(this.formData, 'priceAdvantage', response.data.priceAdvantage==0?null:response.data.priceAdvantage)
                this.formData.bankList.forEach(item => {
                  item.currency = +item.currency
                })
                if(response.data.resourceBackVO){
                  this.formData.resourceVO = response.data.resourceBackVO
                  this.formData.externalVO = response.data.externalBackVO??{}
                  this.$set(this.formData.resourceVO,'shipCompany',this.strToArray(response.data.resourceBackVO.shipCompany))
                  this.$set(this.formData.resourceVO,'ports',this.strToArray(response.data.resourceBackVO.ports))
                  this.$set(this.formData.resourceVO,'bookCompany',this.strToArray(response.data.resourceBackVO.bookCompany))
                  this.$set(this.formData.resourceVO,'trailerCompany',this.strToArray(response.data.resourceBackVO.trailerCompany))
                  this.$set(this.formData.resourceVO,'customsCompany',this.strToArray(response.data.resourceBackVO.customsCompany))
                  this.$set(this.formData.resourceVO,'certificateCompany',this.strToArray(response.data.resourceBackVO.certificateCompany))
                  this.$set(this.formData.resourceVO,'airdrome',this.strToArray(response.data.resourceBackVO.airdrome))
                  this.$set(this.formData.resourceVO,'airCompany',this.strToArray(response.data.resourceBackVO.airCompany))
                  this.$set(this.formData.resourceVO,'bookCompanyAir',this.strToArray(response.data.resourceBackVO.bookCompanyAir))
                  this.$set(this.formData.resourceVO,'customsCompanyAir',this.strToArray(response.data.resourceBackVO.customsCompanyAir))
                  this.$set(this.formData.resourceVO,'certificateCompanyAir',this.strToArray(response.data.resourceBackVO.certificateCompanyAir))
                }
                if(response.data.externalBackVO){
                  this.formData.externalVO = response.data.externalBackVO
                  this.formData.resourceVO = response.data.resourceBackVO??{}
                  this.$set(this.formData.externalVO,'receiveCompanyName',response.data.externalBackVO.receiveCompanyName)
                  this.$set(this.formData.externalVO,'receiveAddress',response.data.externalBackVO.receiveAddress)
                  this.$set(this.formData.externalVO,'receiveTel',response.data.externalBackVO.receiveTel)
                  this.$set(this.formData.externalVO,'receiveEmail',response.data.externalBackVO.receiveEmail)
                  this.$set(this.formData.externalVO,'notifyCompanyName',response.data.externalBackVO.notifyCompanyName)
                  this.$set(this.formData.externalVO,'notifyAddress',response.data.externalBackVO.notifyAddress)
                  this.$set(this.formData.externalVO,'notifyTel',response.data.externalBackVO.notifyTel)
                  this.$set(this.formData.externalVO,'notifyEmail',response.data.externalBackVO.notifyEmail)
                  this.$set(this.formData.externalVO,'goodName',response.data.externalBackVO.goodName)
                  this.$set(this.formData.externalVO,'clearanceFileId',response.data.externalBackVO.clearanceFileId)
                  this.$set(this.formData.externalVO,'fromNo',response.data.externalBackVO.fromNo)
                  this.$set(this.formData.externalVO,'baNo',response.data.externalBackVO.baNo)
                  this.$set(this.formData.externalVO,'packNum',response.data.externalBackVO.packNum)
                  this.$set(this.formData.externalVO,'packUnit',response.data.externalBackVO.packUnit)
                  this.$set(this.formData.externalVO,'clearanceRequireData',['COO证书','CXX证书','ABC证书','QWE证书'].includes(response.data.externalBackVO.clearanceRequire)?response.data.externalBackVO.clearanceRequire:'自定义')
                  this.$set(this.formData.externalVO,'clearanceRequire',response.data.externalBackVO.clearanceRequire)
                  this.$set(this.formData.externalVO,'provide',response.data.externalBackVO.provide)
                  this.$set(this.formData.externalVO,'badCooperationRecord',response.data.externalBackVO.badCooperationRecord)
                  this.$set(this.formData.externalVO,'tinNoRcNo',response.data.externalBackVO.tinNoRcNo)
                }
            });
        }
      })
      
  },
  mounted() {},
  methods: {
    getDock() {
      // 码头
      getDockPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
        this.allDocks = res.data.list;
      });
    },
    strToArray(val) {
      if(!val || val == '') {
        return []
      }else{
        let data = val.split(",")
        return data.map(item=>Number(item))
      }
    },
    typeBool(type,arr) {
      let flag = false
      type.forEach(item=>{
        if(arr.includes(item)){
          flag = true
        }
      })
      return flag
    },
    sameReceive() {
      this.$set(this.formData.externalVO,'notifyCompanyName',this.formData.externalVO.receiveCompanyName)
      this.$set(this.formData.externalVO,'notifyAddress',this.formData.externalVO.receiveAddress)
      this.$set(this.formData.externalVO,'notifyTel',this.formData.externalVO.receiveTel)
      this.$set(this.formData.externalVO,'notifyEmail',this.formData.externalVO.receiveEmail)
    },
    addFileNo() {
      this.showFileNoDialog = true
      this.fileNoForm = {}
    },
    getFile() {
      getFileNoPage().then(res => {
        this.fileList = res.data.list
      })
    },
    addfile() {
      this.$refs.fileNoForm.validate(vaild=>{
        if(vaild){
          if(this.fileNoForm.id != null){
            updateFileNo(this.fileNoForm).then(()=>{
              this.getFile()
              this.addFileNoShow = false
            })
          }else{
            createFileNo(this.fileNoForm).then(()=>{
              this.getFile()
              this.addFileNoShow = false
            })
          }
        }else{
          this.$message.error(this.$t('请完整填写表单'))
        }
      })
    },
    changeFile(val) {
      let file = this.fileList.find(item=>item.id == val)
      this.$set(this.formData.externalVO,'fromNo',file.fromNo)
      this.$set(this.formData.externalVO,'baNo',file.baNo)
    },
    selectFile(row) {
      this.$set(this.formData.externalVO,'clearanceFileId',row.id)
      this.$set(this.formData.externalVO,'baNo',row.baNo)
      this.$set(this.formData.externalVO,'fromNo',row.fromNo)
      this.showFileNoDialog = false
    },
    updateFileNo(row) {
      this.addFileNoShow = true
      this.fileNoForm = row
    },
    changeRequire(val) {
      if(val != '自定义'){
        this.$set(this.formData.externalVO,'clearanceRequire',val)
      }else{
        this.$set(this.formData.externalVO,'clearanceRequire','')
      }
    },
    getCountry(countryId, districtId) {
      let country = this.treeList.find(item=>item.id == countryId)
      let district = country.children.find(item=>item.id == districtId)
      return this.$l(country, 'title')+' '+this.$l(district, 'title')
    },
    delContact(index){
      this.$confirm(this.$t('确定删除此联系人么？')).then(() => {
        this.formData.contactList.splice(index, 1)
      })
    },
    delBank(index){
      if(this.formData.bankList[index].id){
        this.$prompt(this.$t("请输入密码"), {
          inputType: 'password'
        })
        .then(({value}) => {
          if(value && value != ''){
            return validatePwd({
              busiType: 5,
              pwd: value
            })
          }
          this.$message.error(this.$t('密码不能为空'))
        })
        .then(res => {
          if(!res.data){
            return this.$message.error(this.$t('密码错误'))
          }
          this.formData.bankList.splice(index, 1)
        })
        return
      }

      this.$confirm(this.$t('确定删除此银行信息么？')).then(() => {
        this.formData.bankList.splice(index, 1)
      })
    },
    onAreaChange(type, val){
      this.$set(this.formData, type, val)
    },
    submitForm() {
      this.$refs["elForm"].validate((valid, errors) => {
        if (!valid) {
          return this.$showFormValidateErrors(errors) 
        }
        if(this.formData.areaType == 0){
          if(!this.formData.bankList.length){
            return this.$message.error(this.$t('请添加银行信息'))
          }
          if(!this.formData.contactList.length){
            return this.$message.error(this.$t('请添加联系人信息'))
          }
        }
        
        let data = JSON.parse(JSON.stringify(this.formData))
        data.dockIds = data.dockIds?.toString()
        if(this.formData.areaType == 0) {
          data.resourceVO.shipCompany = data.resourceVO.shipCompany?.toString()
          data.resourceVO.ports = data.resourceVO.ports?.toString()
          data.resourceVO.bookCompany = data.resourceVO.bookCompany?.toString()
          data.resourceVO.trailerCompany = data.resourceVO.trailerCompany?.toString()
          data.resourceVO.customsCompany = data.resourceVO.customsCompany?.toString()
          data.resourceVO.certificateCompany = data.resourceVO.certificateCompany?.toString()
          data.resourceVO.airdrome = data.resourceVO.airdrome?.toString()
          data.resourceVO.airCompany = data.resourceVO.airCompany?.toString()
          data.resourceVO.bookCompanyAir = data.resourceVO.bookCompanyAir?.toString()
          data.resourceVO.customsCompanyAir = data.resourceVO.customsCompanyAir?.toString()
          data.resourceVO.certificateCompanyAir = data.resourceVO.certificateCompanyAir?.toString()
        }else{
          delete data.resourceVO
        }
        
        
        // 修改的提交
        if (data.id != null) {
          updateSupplier(data).then(response => {
            this.$modal.msgSuccess(this.$t("修改成功"));
            this.open = false;
            this.$router.back()
          });
          return;
        }
        // 添加的提交
        createSupplier(data).then(response => {
          this.$modal.msgSuccess(this.$t(this.$t("新增成功")));
          this.$redirect('supplier')
        });
      });
    },
    resetForm() {
      this.formData = {
        areaType: this.formData.areaType,
        companyZh: undefined,
        agentName: undefined,
        tell: "",
        address: "",
        remark: undefined,
        field110: undefined,
        companyTypeArr: [],
        cooperationType: undefined,
        settlementPeriod: undefined,
        priceAdvantage: undefined,
        license: null,
        contract: null,
        licenseNumber: undefined,
        contactList:[],
        bankList: [],
        resourceVO: {},
        externalVO: {}
      }
    },
    changeCountry(countryId) {
      for(let index in this.treeList) {
        let country = this.treeList[index];
        if(country.id == countryId) {
          this.portForm.countryZh = country.titleZh;
          this.portForm.countryEn = country.titleEn;
          return;
        }
      }
    },

    changeProvince(provinceId) {
      for(let index in this.portProvinceList) {
        let province = this.portProvinceList[index];
        if(province.id == provinceId) {
          this.portForm.provinceZh = province.titleZh;
          this.portForm.provinceEn = province.titleEn;
          return;
        }
      }
    },

    changeCity(cityId) {
      for(let index in this.portCityList) {
        let city = this.portCityList[index];
        if(city.id == cityId) {
          this.portForm.cityZh = city.titleZh;
          this.portForm.cityEn = city.titleEn;
          return;
        }
      }
    },
    addPort() {
      this.$refs["portForm"].validate(valid => {
        if (!valid) {
          return;
        }
        // 添加的提交
        createDock(this.portForm).then(response => {
          this.$modal.msgSuccess(this.$t("新增成功"));
          this.portVisible = false;
          this.getDock()
        });
      });
    },
  }
}

</script>
<style lang="scss" scoped>
.el-upload__tip {
  line-height: 1.2;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title{
    font-size: 18px;
  }
}
::v-deep .data-list .el-form-item__error{
    position: static;
}
.red{
  color: red;
}
.supplier-item{
  margin-left: 30px;
  
}
</style>
