<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px"
      label-position="left">
      <el-form-item label="公司全称" prop="companyZh">
        <el-input v-model="formData.companyZh" placeholder="请输入公司全称" show-word-limit clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="代理名称" prop="agentName">
        <el-input v-model="formData.agentName" placeholder="请输入代理名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="公司电话" prop="tell">
        <el-input v-model="formData.tell" placeholder="请输入公司电话" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <el-select v-model="formData.country">
            <el-option v-for="(item, index) in treeList" :value="item.id" :label="item.titleZh" :key="item.id" />
        </el-select>
        <el-select v-model="formData.province">
            <el-option v-for="(item, index) in provinceList" :value="item.id" :label="item.titleZh" :key="item.id" />
        </el-select>
        <el-select v-model="formData.city">
            <el-option v-for="(item, index) in cityList" :value="item.id" :label="item.titleZh" :key="item.id" />
        </el-select>
        <el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
        <!-- <el-select v-model="selectedRegionIndex">
            <el-option v-for="(item, index) in regionList" :value="index" :label="item.titleZh" :key="item.id" />
        </el-select> -->
        <!-- <el-select v-model="formData.address" placeholder="请选择下拉选择公司地址" clearable :style="{width: '100%'}">
        </el-select> -->
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label-width="0" prop="field110">
          <table-form title="联系人" :fields="[
            { label: '部门', field: 'department'},
            { label: '职位', field: 'position'},
            { label: '名称*', field: 'name', required: true},
            { label: '电话*', field: 'phone', required: true},
          ]" v-model="formData.contactList">
          </table-form>
      </el-form-item>
      <el-form-item label="供应商类别" prop="companyType">
        <!-- <el-checkbox-group v-model="formData.companyType" size="medium">
          <el-checkbox v-for="(item, index) in companyTypeOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-checkbox>
        </el-checkbox-group> -->
        <dict-selector v-model="formData.companyType" type="company_type" multiple />
      </el-form-item>
      <el-form-item label="合作类型" prop="cooperationType">
        <dict-selector v-model="formData.cooperationType" type="cooperation_type" />
      </el-form-item>
      <el-form-item label="营业执照" prop="license">
        <upload v-model="formData.license" />
        <!-- <el-upload ref="license" :file-list="licensefileList" :action="licenseAction"
          :before-upload="licenseBeforeUpload">
          <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
        </el-upload> -->
      </el-form-item>
      <el-form-item label="合同" prop="contract">
          <upload v-model="formData.contract" />
        <!-- <el-upload ref="contract" :file-list="contractfileList" :action="contractAction"
          :before-upload="contractBeforeUpload">
          <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
        </el-upload> -->
      </el-form-item>
      <el-form-item label="统一信用代码" prop="licenseNumber">
        <el-input v-model="formData.licenseNumber" placeholder="请输入统一社会信用代码" clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label-width="0" prop="field110">
          <table-form title="银行信息" :fields="[
            { label: '账户名称*', field: 'accountName', required: true},
            { label: '币别*', field: 'currency', required: true},
            { label: '银行名称*', field: 'bankName', required: true},
            { label: '银行账户*', field: 'bankAccount', required: true},
            { label: '银行代码', field: 'bankCode'},
            { label: '账户类型', field: 'accountType'},
            { label: '银行地址', field: 'bankAddress'},
          ]" v-model="formData.bankList">
          </table-form>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { createSupplier, updateSupplier, getSupplier} from "@/api/ecw/supplier";
import upload from '@/components/ImageUpload'
import { getListTree } from "@/api/ecw/region";
export default {
  components: {upload},
  props: [],
  data() {
    return {
      formData: {
        companyZh: undefined,
        agentName: undefined,
        tell: "",
        address: "Abc123456",
        remark: undefined,
        field110: undefined,
        companyType: [],
        cooperationType: undefined,
        license: null,
        contract: null,
        licenseNumber: undefined,
      },
      rules: {
        companyZh: [{
          required: true,
          message: '请输入公司全称',
          trigger: 'blur'
        }],
        agentName: [],
        tell: [],
        address: [],
        remark: [],
        companyType: [{
          required: true,
          type: 'string',
          message: '请至少选择一个供应商类别',
          trigger: 'change'
        }],
        cooperationType: [{
          required: true,
          message: '请选择合作类型',
          trigger: 'change'
        }],
        licenseNumber: [],
      },
      treeList:[],
      provinceList:[],
      cityList:[]/* 
      selectedCountryIndex: null,
      selectedProvinceIndex: null,
      selectedCityIndex: null, */
      // selectedRegionIndex: null
    }
  },
  computed: {
      /* provinceList(){
          return this.treeList[this.selectedCountryIndex] ?. children || []
      },
      cityList(){
          return this.provinceList[this.selectedProvinceIndex] ?. children || []
      },
      regionList(){
          return this.cityList[this.selectedCityIndex] ?. children || []
      } */
  },
  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() {
      
      // 回显数据需要在加载了地区数据之后，否则无法正常回显
      getListTree({treeType: 1}).then(response => {
        this.treeList = response.data

        if(this.$route.query.id){
            getSupplier(this.$route.query.id).then(response => {
                /* response.data.companyType = response.data.companyType.split(",") || [] */
                this.formData = response.data;
            });
        }
      })
      
  },
  mounted() {},
  methods: {
      onProvinceSelected(e){
          console.log(e, e)
      },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) {
          return;
        }
        let data = Object.assign({}, this.formData)
        /* if(data.companyType && data.companyType.length){
            data.companyType = data.companyType.join(',')
        } */
        /* let regionArr = []
        if(this.selectedCountryIndex !== null){
            //regionArr.push(this.treeList[this.selectedCountryIndex].id)
            data.country = this.treeList[this.selectedCountryIndex].id
        }
        if(this.selectedProvinceIndex !== null){
             data.province = this.treeList[this.selectedCountryIndex].id
        }
        if(this.selectedCityIndex !== null){
            data.city = this.cityList[this.selectedCityIndex].id
        } */
        // 修改的提交
        if (data.id != null) {
          updateSupplier(data).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.$router.back()
          });
          return;
        }
        // 添加的提交
        createSupplier(data).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$router.back()
        });
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    /* licenseBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    contractBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    }, */
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
