<template>
  <div class="relation-company">
    <div v-for="(item, index) in companyList" :key="index" class="company-form">
      <div>
        <div class="required title">输入关键字</div>
        <div>
          <el-input v-model="item.name" placeholder="请输入关键字">
            <el-button slot="append" icon="el-icon-search" :loading="searchLoading[index]" @click="searchCompany(index)"></el-button>
          </el-input>
        </div>
      </div>
      <div>
        <div class="required title">企业名称</div>
        <div>
          <el-select :ref="'company'+index" v-model="item.company" style="width: 100%" placeholder="请选择企业">
            <el-option
              v-for="pItem in companyNameList[index]"
              :key="pItem.enterpriseName"
              :label="pItem.enterpriseName"
              :value="pItem.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 style="width: 150px;" @click="cancel('close')">取消</el-button>
      <el-button type="primary" style="width: 150px;" @click="onSubmit">确定</el-button>

    </div>
  </div>
</template>

<script>
import { getCompanyNameFormKey, relationDisbursAddEnterprise } from '@/api/capitalManage/relationDisburse'
export default {
  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
      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)
      }
      relationDisbursAddEnterprise(params).then(() => {
        this.$message.success('关联企业成功')
        this.cancel('comfirm')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.relation-company {
  .title {
    color: #222931;
    font-weight: 600;
    background-color: #fff;
    font-size: 14px;
  }
  .company-form {
    & > div {
      & > div:first-child {
        line-height: 46px;
        &.required:before {
          content: '*';
          color: #F56C6C;
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
    .assets-btn {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}
</style>
