<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="companyZh">
          <el-input v-model="formData.companyZh" :placeholder="$t('请输入公司全称')" show-word-limit clearable readonly></el-input>
        </el-form-item>
        <el-form-item :label="$t('英文名称')" prop="companyEn">
          <el-input v-model="formData.companyEn" :placeholder="$t('请输入公司英文名')" show-word-limit clearable readonly></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('合作开始时间')" prop="cooperationDateStart">
          <el-date-picker v-model="formData.cooperationDateStart" value-format="timestamp" clearable disabled></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('合作结束时间')" prop="cooperationDateEnd">
          <el-date-picker v-model="formData.cooperationDateEnd" value-format="timestamp" clearable disabled></el-date-picker>
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('公司电话')" prop="tell">
          <el-input v-model="formData.tell" :placeholder="$t('请输入公司电话')" clearable readonly></el-input>
        </el-form-item>
        <el-form-item :label="$t('邮件地址')" prop="email">
          <el-input v-model="formData.email" :placeholder="$t('请输入邮箱地址')" clearable readonly></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('公司地址')" prop="address">
          {{region}} {{formData.address}}
        </el-form-item>
      </div>
      <div>
        <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" readonly></el-input>
        </el-form-item>
      </div>
      
      <div>
        <el-form-item :label="$t('营业执照')" prop="license">
          <el-image v-show="formData.license" :src="formData.license" style="width: 146px;height: 146px"></el-image>
        </el-form-item>
        <el-form-item :label="$t('合同')" prop="contract">
          <el-image v-show="formData.contract" :src="formData.contract" style="width: 146px;height: 146px"></el-image>
        </el-form-item>
      </div>
      <div>
        <el-form-item :label="$t('统一信用代码')" prop="licenseNumber">
          <el-input v-model="formData.licenseNumber" :placeholder="$t('请输入统一社会信用代码')" clearable readonly
            :style="{width: '100%'}"></el-input>
        </el-form-item>
      </div>
      <el-form-item size="large" class="mt-20">
        <el-button @click="$router.back()">{{$t('返回')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getLadingShipper } from "@/api/ecw/ladingShipper";
import upload from '@/components/ImageUpload'
import { listByIds } 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 { getDockPage } from "@/api/ecw/dock";
export default {
  components: {upload,  AreaSelector, Selector },
  props: [],
  data() {
    return {
      disabled: true,
      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:[],
      region: '',
      // 码头
      allDocks: [],
      currencyList:[],
      requireData: [
        'COO证书','CXX证书','ABC证书','QWE证书','自定义'
      ],
      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
    }
  },
  computed: {
  },
  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 || []
              }
          })
      }
  },
  created() {
      getCurrencyList().then(res => {
        this.currencyList = res.data
      })

      if(this.$route.query.id){
            getLadingShipper(this.$route.query.id).then(response => {
                this.formData = response.data
                
                listByIds({ids: [this.formData.country, this.formData.province, this.formData.city].join(',')}).then(res => {
                    console.log('listById', res)
                    let region = ''
                    res.data.forEach(item => {
                      region += " " + item.titleZh
                    })
                    this.region = region
                  })
            });
        }
      
  },
  mounted() {},
  methods: {
    strToArray(val) {
      if(!val || val == '') {
        return []
      }else{
        let data = val.split(",")
        return data.map(item=>Number(item))
      }
    },
    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.$refs.fileNoForm.resetFields()
    },
    getFile() {
      getFileNoPage().then(res => {
        this.fileList = res.data.list
      })
    },
    addfile() {
      this.$refs.fileNoForm.validate(vaild=>{
        if(vaild){
          createFileNo(this.fileNoForm).then(()=>{
            this.showFileNoDialog = false
            this.getFile()
          })
        }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)
    },
    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)
    },
  }
}

</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>