<template>
  <div class="business">
    <el-form
      ref="formRef"
      :model="state.form"
      :rules="state.rules"
      hide-required-asterisk
      label-position="top"
      :disabled="disabled"
    >
      <el-row :gutter="8">
        <el-col v-for="(item, index) in state.list" :key="index" :span="item.span">
          <el-form-item v-if="item.label !== '经营范围'" :label="item.label" :prop="item.prop">
            <el-input v-model="state.form[item.prop]" :placeholder="item.placeholder" />
          </el-form-item>
          <el-form-item v-else :label="item.label" :prop="item.prop">
            <el-input
              v-model="state.form[item.prop]"
              type="textarea"
              :rows="4"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})

const formRef = ref()
const state = reactive({
  form: {
    FCompanyName: '', //公司名称
    FLegalRepresentative: '', //法定代表人
    FRegisteredAddress: '', //注册地址
    FOperatingState: '', //经营状态
    FRegisteredCapital: '', //注册资本
    FTypeEnterprise: '', //企业类型
    FOperatingTerm: '', //营业期限
    FAffiliatingArea: '', //所属地区
    FCreditCode: '', //统一社会信用代码
    FDateApproval: '', //核准日期
    FRegistrationAuthority: '', //登记机关
    FDateEstablishment: '', //成立日期
    FPreviouslyName: '', //曾用名
    FFIndustryGS: '', //所属行业
    FBusinessScope: '' //经营范围
  } as any,
  list: [
    { placeholder: '请输入公司名称', prop: 'FCompanyName', label: '公司名称', span: 12 },
    { placeholder: '请输入法定代表人', prop: 'FLegalRepresentative', label: '法定代表人', span: 6 },
    { placeholder: '请输入成立日期', prop: 'FDateEstablishment', label: '成立日期', span: 6 },
    { placeholder: '请输入注册地址', prop: 'FRegisteredAddress', label: '注册地址', span: 12 },
    { placeholder: '请输入经营状态', prop: 'FOperatingState', label: '经营状态', span: 6 },
    { placeholder: '请输入注册资本', prop: 'FRegisteredCapital', label: '注册资本', span: 6 },
    { placeholder: '请输入企业类型', prop: 'FTypeEnterprise', label: '企业类型', span: 12 },
    { placeholder: '请输入营业期限', prop: 'FOperatingTerm', label: '营业期限', span: 6 },
    { placeholder: '请输入所属地区', prop: 'FAffiliatingArea', label: '所属地区', span: 6 },
    {
      placeholder: '请输入统一社会信用代码',
      prop: 'FCreditCode',
      label: '统一社会信用代码',
      span: 12
    },
    { placeholder: '请输入核准日期', prop: 'FDateApproval', label: '核准日期', span: 6 },
    { placeholder: '请输入登记机关', prop: 'FRegistrationAuthority', label: '登记机关', span: 6 },
    { placeholder: '请输入曾用名', prop: 'FPreviouslyName', label: '曾用名', span: 12 },
    { placeholder: '请输入所属行业', prop: 'FFIndustryGS', label: '所属行业', span: 6 },
    { placeholder: '请输入经营范围', prop: 'FBusinessScope', label: '经营范围', span: 24 }
  ],
  rules: {
    FCompanyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
    FLegalRepresentative: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
    FDateEstablishment: [{ required: true, message: '请输入成立日期', trigger: 'blur' }],
    FRegisteredAddress: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
    FOperatingState: [{ required: true, message: '请输入经营状态', trigger: 'blur' }],
    FRegisteredCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
    FTypeEnterprise: [{ required: true, message: '请输入企业类型', trigger: 'blur' }],
    FOperatingTerm: [{ required: true, message: '请输入营业期限', trigger: 'blur' }],
    FAffiliatingArea: [{ required: true, message: '请输入所属地区', trigger: 'blur' }],
    FCreditCode: [
      { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          return /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/.test(value)
        },
        message: '请输入正确的统一社会信用代码',
        trigger: 'blur'
      }
    ],
    FDateApproval: [{ required: true, message: '请输入核准日期', trigger: 'blur' }],
    FRegistrationAuthority: [{ required: true, message: '请输入登记机关', trigger: 'blur' }],
    // FPreviouslyName: [{ required: true, message: '请输入曾用名', trigger: 'blur' }],
    FFIndustryGS: [{ required: true, message: '请输入所属行业', trigger: 'blur' }],
    FBusinessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }]
  }
})

const formCheck = async () => {
  let flag = true
  await formRef.value.validate((valid: boolean) => {
    if (!valid) flag = false
  })
  return flag
}

defineExpose({
  ...toRefs(state),
  formCheck
})
</script>

<style lang="scss" scoped>
.business {
  flex: 1;
  background: #f8f8f8;
  border-radius: 12px;
  padding: 18px 8px;

  :deep(.el-form-item__label) {
    font-size: 16px;
    font-weight: 400;
    color: #999999;
  }

  :deep(.el-textarea__inner),
  :deep(.el-input__wrapper) {
    background: #ffffff !important;
  }

  .el-col {
    margin-bottom: 16px;
  }
}
</style>
