<template>
  <div class="enterprise-inspection">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      :style="formStyle"
    >
      <el-form-item label="企业类型" prop="enterpriseType">
        <el-select
          v-model="ruleForm.enterpriseType"
          placeholder="请选择企业类型"
          :disabled="disabled"
        >
          <el-option
            v-for="item in constant.enterprise_type"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="formlabel.company" prop="name">
        <custom-select
          :value.sync="ruleForm.name"
          :disabled="disabled"
          :placeholder="placeholder"
          @search-click="searchClick"
          @search-change="searchChange"
        >
          <el-option
            v-for="item in listData"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </custom-select>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="certNo">
        <el-input
          v-model="ruleForm.certNo"
          placeholder="请输入统一社会信用代码"
          disabled
        />
      </el-form-item>
      <el-form-item label="成立日期" prop="establishDate">
        <el-input
          v-model="ruleForm.establishDate"
          placeholder="请输入成立日期"
          disabled
        />
      </el-form-item>
      <el-form-item label="注册资本" prop="registerCapital">
        <el-input
          v-model="ruleForm.registerCapital"
          placeholder="请输入注册资本"
          disabled
        />
      </el-form-item>
      <el-form-item label="注册地址" prop="registerAddress">
        <el-input
          v-model="ruleForm.registerAddress"
          placeholder="请输入注册地址"
          disabled
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { qccEnterprise, qccEnterpriseDetail } from '@/api/businessManage/index'
export default {
  components: {
    CustomSelect: () => import('@/components/CustomSelect/index.vue')
  },
  props: {
    // 表单样式
    'formStyle': {
      type: Object,
      default: () => {}
    },
    // 字段映射配置
    inspectionData: {
      type: [Object],
      default: () => {}
    },
    // 来源
    source: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 详情信息
    detailsInfo: {
      type: Object,
      default: () => {}
    },
    placeholder: {
      type: String,
      default: '请选择企业名称'
    }
  },
  data() {
    return {
      formlabel: {
        company: '企业名称',
        key: 'name'
      },
      listData: [],
      ruleForm: {
        enterpriseType: '',
        name: '',
        certNo: '',
        establishDate: '',
        registerCapital: '',
        registerAddress: ''
      },
      rules: {
        enterpriseType: [
          { required: true, message: `请选择企业类型`, trigger: 'change' }
        ],
        name: [
          { required: true, message: `请输入${this.inspectionData?.company?.name || '企业名称'}`, trigger: 'blur' }
        ],
        certNo: [
          { required: true, message: `请输入统一社会信用代码`, trigger: 'blur' }
        ],
        establishDate: [
          { required: true, message: `请选择成立日期`, trigger: 'change' }
        ],
        registerCapital: [
          { required: true, message: `请输入注册资本`, trigger: 'blur' }
        ],
        registerAddress: [
          { required: true, message: `请输入注册地址`, trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ])
  },
  watch: {
    inspectionData: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const { company } = newV
          if (company) {
            this.formlabel.company = company.name
            this.formlabel.key = company.key
          }
        }
      },
      immediate: true,
      deep: true
    },
    detailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const { enterpriseType, name, certNo, establishDate, registerCapital, registerAddress } = newV
          this.ruleForm = {
            ...this.ruleForm,
            enterpriseType,
            name,
            certNo,
            establishDate,
            registerCapital,
            registerAddress
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['enterprise_type'])
  },
  methods: {
    searchClick(val) {
      qccEnterprise({ keyword: val }).then(({ data }) => {
        this.listData = data
      })
    },
    searchChange(val) {
      const obj = this.listData.find(item => item.name === val)
      if (!obj) return

      qccEnterpriseDetail(val).then(({ data }) => {
        const { No, StartDate, RegistCapi, Address } = obj
        this.ruleForm = {
          ...this.ruleForm,
          certNo: No,
          establishDate: StartDate,
          registerCapital: RegistCapi,
          registerAddress: Address

        }
      })
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            return resolve(this.ruleForm)
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.enterprise-inspection {
}
</style>
