<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="$t('公司全称')" prop="companyZh">
        <el-input v-model="formData.companyZh" :placeholder="$t('请输入公司全称')" show-word-limit clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item :label="$t('代理名称')" prop="agentName">
        <el-input v-model="formData.agentName" :placeholder="$t('请输入代理名称')" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('公司电话')" prop="tell">
        <el-input v-model="formData.tell" :placeholder="$t('请输入公司电话')" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item :label="$t('公司地址')" 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> -->
        <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-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="$t('备注')" prop="remark">
        <el-input v-model="formData.remark" type="textarea" :placeholder="$t('请输入备注')"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label-width="0" prop="field110">
          <table-form :title="$t('联系人')" :fields="[
            { label: this.$t('部门'), field: 'department'},
            { label: this.$t('职位'), field: 'position'},
            { label: this.$t('名称') + '*', field: 'name', required: true},
            { label: this.$t('电话') + '*', field: 'phone', required: true},
          ]" v-model="formData.contactList">
          </table-form>
      </el-form-item>
      <el-form-item :label="$t('供应商类别')" 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="$t('合作类型')" prop="cooperationType">
        <dict-selector v-model="formData.cooperationType" type="cooperation_type" />
      </el-form-item>
      <el-form-item :label="$t('营业执照')" 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="$t('合同')" 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="$t('统一信用代码')" prop="licenseNumber">
        <el-input v-model="formData.licenseNumber" :placeholder="$t('请输入统一社会信用代码')" clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label-width="0" prop="field110">
          <table-form :title="$t('银行信息')" :fields="[
            { label: this.$t('账户名称') + '*', field: 'accountName', required: true},
            { label: this.$t('币别') + '*', field: 'currency', required: true},
            { label: this.$t('银行名称*'), field: 'bankName', required: true},
            { label: this.$t('银行账户') + '*', field: 'bankAccount', required: true},
            { label: this.$t('银行代码'), field: 'bankCode'},
            { label: this.$t('账户类型'), field: 'accountType'},
            { label: this.$t('银行地址'), field: 'bankAddress'},
          ]" v-model="formData.bankList">
          </table-form>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">{{$t('提交')}}</el-button>
        <el-button @click="resetForm">{{$t('重置')}}</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";
import TableForm from '@/components/TableForm'
import AreaSelector from '@/components/AreaSelector'
export default {
  components: {upload, TableForm, AreaSelector},
  props: [],
  data() {
    return {
      formData: {
        companyZh: undefined,
        agentName: undefined,
        tell: "",
        address: "",
        remark: undefined,
        field110: undefined,
        companyType: [],
        cooperationType: undefined,
        license: null,
        contract: null,
        licenseNumber: undefined,
      },
      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:[]
    }
  },
  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() {
      
      // 回显数据需要在加载了地区数据之后，否则无法正常回显
      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: {
    onAreaChange(type, val){
      this.$set(this.formData, type, val)
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) {
          return;
        }
        let data = Object.assign({}, this.formData)
        
        // 修改的提交
        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.$router.back()
        });
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}

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

</style>
