<template>
  <div class="relation-company">
    <div class="multiple-form" v-for="(item, index) in companyList" :key="index">
      <div>
        <div class="required">输入关键字：</div>
        <div>
          <el-input placeholder="请输入关键字" v-model="item.name">
            <el-button slot="append" icon="el-icon-search" @click="searchCompany(index)" :loading="searchLoading[index]" ></el-button>
          </el-input>
        </div>
      </div>
      <div>
        <div class="required">企业名称：</div>
        <div>
          <el-select v-model="item.company" style="width: 100%" placeholder="请选择企业" :ref="'company'+index">
            <el-option
              v-for="item in companyNameList[index]"
              :key="item.enterpriseName"
              :label="item.enterpriseName"
              :value="item.enterpriseName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="assets-btn">
        <el-button type="text" @click="companyOptions('delete', index)">删除</el-button>
      </div>
    </div>
    <div>
      <el-button type="text" @click="companyOptions('add')">添加</el-button>
    </div>
    <div class="submit-btn">
      <el-button type="primary" @click="onSubmit" style="width: 150px;">确定</el-button>
      <el-button @click="cancel('close')" style="width: 150px;">取消</el-button>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      companyList: [
        {
          name: '',
          company: '',
        }
      ],
      companyNameList: [[]],
      searchLoading: [false]
    }
  },
  methods: {
    resetData() {
      this.companyNameList = [[]]
      this.searchLoading = [false]
      this.companyList = [{ name: '', company: '' }]
    },
    cancel(type) {
      this.$emit('modify-click', type )
    },
    searchCompany(index) {
      this.$set(this.searchLoading, index, true)
      const condition = this.companyList[index].name
      this.$api.capitalManage.getCompanyNameFormKey({ condition }).then(({ data }) => {
        this.companyNameList[index] = data
        this.$set(this.searchLoading, index, false)
        this.$refs['company'+index][0].toggleMenu()
      })
    },
    companyOptions(type, index) {
      if(type === 'add') {
        this.companyList.push({ name: '', company: ''})
        this.companyNameList.push([])
      }
      if(type === 'delete') {
        this.companyList.splice(index, 1)
        this.companyNameList.splice(index, 1)
      }
    },
    onSubmit() {
      for (let i = 0; i < this.companyList.length; i++) {
        const { company } = this.companyList[i];
        if(!company) {
          this.$message.warning('企业名称不能为空')
          return
        }
      }
      const oldCompanyList = Array.from(new Set(this.companyList.map(item => item.company)))
      if(oldCompanyList.length !== this.companyList.length) {
        this.$message.warning('企业名称不能重复')
        return
      }
      const params = {
        Loading: true,
        financialInstitutionInfoId: this.rowInfo.id,
        enterpriseName:  this.companyList.map(item => item.company)
      }
      this.$api.capitalManage.relationDisbursAddEnterprise(params).then(() => {
        this.$message.success('关联企业成功')
        this.cancel('comfirm')
      })
    },
  },
}
</script>

<style scoped>

</style>
