<template>
  <div class="defendCompany">
    <dialog-edit :title="$t('cyjg.financialRegionInfo.defendCompanyDialogtitle')" :autoSave="false" :appendToBody="true" :width="width" :editModel="editModel"
                 :form="detailForm" :visible.sync="dialogVisible" :api="api" @onSaved="submitForm">
      <el-form-item v-for="(item, index) in detailForm.companyList" :label="$t('cyjg.financialRegionInfo.CompanyName')"
                    :key="item.key" :prop="'companyList.' + index + '.companyId'"
                    :rules="{ required: true, message: messageInfo, trigger: 'change' }">
        <el-col :span="22">
          <select-project-company-name :reload="companyLoad" :queryParas="queryParas" :rowIndex="index" v-model="item.companyId" @selectChanged="selectCompanyChanged" class="dymForm"></select-project-company-name>
<!--          <select-finance-company :reload="companyLoad" :queryParas="queryParas" :rowIndex="index" v-model="item.companyId" @selectChanged="selectCompanyChanged" class="dymForm"></select-finance-company>-->
        </el-col>
        <el-col :span="2">
          <div class="proj-font">
            <i class="iconfont iconzengjia" v-if="index === 0" @click="additem"></i>
            <i class="iconfont iconjian" v-if="index > 0" @click.prevent="removeitem(item)"></i>
          </div>
        </el-col>
      </el-form-item>
    </dialog-edit>
  </div>
</template>

<script>
import { searchForm, DataTable, authButton, DialogEdit, SelectProjectCompanyName } from 'newepoch-components'
import financialRegionInfoApi from '@/api/cyjg/financialRegionInfoApi.js'
import BaseEdit from '@/pages/baseEditPage'
import SelectFinanceCompany from '@/components/element/cyjg/SelectFinanceCompany.vue'
export default {
  extends: new BaseEdit(),
  name: 'financialRegionInfoList',
  props: {
    editModel: {
      type: String,
      default: function () {
        return ''
      }
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    DialogEdit,
    searchForm,
    authButton,
    DataTable,
    SelectFinanceCompany,
    SelectProjectCompanyName
  },
  data () {
    return {
      width: '580px',
      detectVisible: true,
      companyLoad: false,
      formtList: {},
      queryParas: {
        coreCompanyId: '',
        companyId: '',
        tag: '150',
        type: '1'
      },
      messageInfo: this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.projectCompanyMessage,
      detailForm: {
        areaId: '',
        companyList: [
          {
            companyId: '',
            companyName: ''
          },
          {
            companyId: '',
            companyName: ''
          }
        ]
      }
    }
  },
  methods: {
    // 提交
    submitForm () {
      let $this = this
      $this.api.create($this.detailForm).then(res => {
        if (res && res.success && res.data) {
          $this.success(this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.addSuccessMessage)
        } else {
          $this.error(this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.addFailMessage)
        }
        $this.$emit('saveSuccess')
        $this.dialogVisible = false
      })
    },
    // 删除添加的表单
    removeitem (item) {
      var index = this.detailForm.companyList.indexOf(item)
      if (index !== -1) {
        this.detailForm.companyList.splice(index, 1)
      }
    },
    // 添加动态表单
    additem () {
      this.detailForm.companyList.push({
        companyId: '',
        companyName: ''
      })
    },
    // 下拉框change事件
    selectCompanyChanged (val, name, data, index) {
      let $this = this
      if (!this.UtilJs.isEmpty(data) && !$this.UtilJs.isNull(index)) {
        $this.detailForm.companyList[index].companyName = data.enterpriseName
        console.log($this.detailForm)
      }
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
    api () {
      return financialRegionInfoApi.companyView
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.detailForm.areaId = this.form.keyId
        this.queryParas.coreCompanyId = this.form.coreCompanyId
        this.companyLoad = !this.companyLoad
      } else {
        this.detailForm = {
          areaId: '',
          companyList: [
            {
              companyId: '',
              companyName: ''
            },
            {
              companyId: '',
              companyName: ''
            }
          ]
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
