<template>
  <div class="related-enterprises">
    <cy-info-title type="center">关联企业相关情况</cy-info-title>
    <div class="table-box">
      <el-table
        :data="associatedEnterpriseInfos"
        style="width: 100%"
      >
        <el-table-column prop="date" label="关联企业名称" width="300">
          <template slot-scope="scope">
            <cy-custom-select
              :key="key"
              :value.sync="scope.row.name"
              :disabled="disabled"
              @search-click="searchClick"
            >
              <el-option
                v-for="item in listData"
                :key="item.corporateName"
                :label="item.corporateName"
                :value="item.corporateName"
              />
            </cy-custom-select>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-select v-model="scope.row.status" :disabled="disabled" placeholder="请选择状态">
              <el-option label="在营" value="在营" />
              <el-option label="开业" value="开业" />
              <el-option label="在册" value="在册" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="legalRepresentative" label="法定代表人">
          <template slot-scope="scope">
            <el-input v-model="scope.row.legalRepresentative" :disabled="disabled" placeholder="请输入法定代表人" />
          </template>
        </el-table-column>
        <el-table-column prop="stockPercent" label="持股比例">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stockPercent" :disabled="disabled" placeholder="请输入持股比例">
              <template slot="append">%</template>
            </el-input>
          </template>

        </el-table-column>
        <el-table-column prop="mainBusiness" label="主营业务">
          <template slot-scope="scope">
            <el-input v-model="scope.row.mainBusiness" :disabled="disabled" placeholder="请输入主营业务" />
          </template>
        </el-table-column>
        <el-table-column v-if="!disabled" prop="address" label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="添加" placement="top">
              <span style="margin-right: 20px;">
                <i class="iconfont icon-orange icon-a-Group812" @click="handlerOperate('add', scope)" />
              </span>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top">
              <span v-if="associatedEnterpriseInfos.length > 1">
                <i class="iconfont icon-orange icon-a-Group991" @click="handlerOperate('delete', scope)" />
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getEnterpriseInspectionInfo } from '@/api/myBusiness/supplierEnterprise'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    relatedInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {},
      listData: [],
      key: 0,
      associatedEnterpriseInfos: [{
        name: '',
        status: '',
        legalRepresentative: '',
        stockPercent: '',
        mainBusiness: ''
      }]
    }
  },
  watch: {
    relatedInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const { associatedEnterpriseInfos } = JSON.parse(JSON.stringify(newV))
          this.associatedEnterpriseInfos = associatedEnterpriseInfos.length ? associatedEnterpriseInfos : this.associatedEnterpriseInfos
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    searchClick(val) {
      getEnterpriseInspectionInfo({ keyword: val }).then(({ data }) => {
        this.listData = data
      })
    },
    handlerOperate(optionType, { $index }) {
      if (optionType === 'add') {
        this.associatedEnterpriseInfos.push({
          name: '',
          fileStorages: []
        })
      } else {
        this.associatedEnterpriseInfos.splice($index, 1)
        this.key += 1
      }
    },
    getParams() {
      return new Promise((resolve, reject) => {
        const list =  this.associatedEnterpriseInfos.filter(item => item.name)
        resolve({ associatedEnterpriseInfos: list })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.related-enterprises {
  margin-right: 20px;
}
</style>
