<script setup name="enterpriseDialog">
import { ref, watch, getCurrentInstance } from 'vue'
// import { add, edit, detail } from '@/http/apis/systemManage/enterpriseManage'
// import { list as regionList } from '@/http/apis/systemManage/regionManage'
const { proxy } = getCurrentInstance(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  })
const emits = defineEmits(['close']),
  formRef = ref(),
  operatorOptions = ref([]), // 运营商下拉
  regionOptions = ref([]),
  form = ref({
    name: undefined,
    fax: undefined,
    email: undefined,
    address: undefined,
    region: undefined,
    contactPerson: undefined,
    contactPhone: undefined,
    legalPerson: undefined,
    legalPersonPhone: undefined,
    enterpriseType: undefined,
    operatorId: undefined,
    remark: undefined
  }),
  rules = {
    name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    fax: [
      {
        pattern: /^(\d{3,4}-)?\d{7,8}$/,
        message: '传真格式不正确',
        trigger: 'blur'
      }
    ],
    email: [
      {
        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        message: '邮箱格式不正确',
        trigger: 'blur'
      }
    ],
    legalPerson: [{ required: true, message: '请输入法人', trigger: 'blur' }],
    contactPhone: [
      {
        pattern: /^1[3456789]\d{9}$/,
        message: '联系电话格式不正确',
        trigger: 'blur'
      }
    ],
    legalPersonPhone: [
      {
        required: true,
        pattern: /^1[3456789]\d{9}$/,
        message: '联系电话格式不正确',
        trigger: 'blur'
      }
    ],
    region: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
    operatorId: [{ required: true, message: '请选择运营商', trigger: 'change' }]
  },
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        // const postData = {
        //   ...form.value,
        //   regionCode: form.value.region.split('##').shift(),
        //   regionLevel: form.value.region.split('##').pop()
        // }
        if (props.data && props.data.id) {
          // await edit(postData)
          proxy.$message.success('编辑成功！')
        } else {
          // await add(postData)
          proxy.$message.success('新增成功！')
        }
        emits('close', true)
      }
    })
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      // operatorOptions.value = (
      //   await operatorList({ pageNumber: 1, pageSize: 1000 })
      // ).data.records
      // regionOptions.value = (await regionList()).data
      // if (props.data && props.data.id) {
      //   const res = await detail({ id: props.data.id })
      //   form.value = {
      //     ...res.data,
      //     region: `${res.data.regionCode}##${res.data.regionName}##${res.data.regionLevel}`
      //   }
      // }
    } else {
      formRef.value.resetFields()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    :title="`${data && data.id ? '编辑' : '新增'}企业`"
    width="840px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="115px"
      label-suffix=":"
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="传真" prop="fax">
            <el-input v-model="form.fax" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区域" prop="region">
            <el-tree-select
              v-model="form.region"
              :data="regionOptions"
              filterable
              :props="{ label: 'name', value: 'unionCode' }"
              check-strictly
              :render-after-expand="false"
              class="w-full"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              v-model="form.contactPhone"
              maxlength="11"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人" prop="legalPerson">
            <el-input v-model="form.legalPerson" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人联系电话" prop="legalPersonPhone">
            <el-input
              v-model="form.legalPersonPhone"
              maxlength="11"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业类型" prop="enterpriseType">
            <el-select
              v-model="form.enterpriseType"
              placeholder="请选择"
              clearable
              class="w-full"
            >
              <el-option label="管理单位" :value="1" />
              <el-option label="企业单位" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运营商" prop="operatorId">
            <el-select
              v-model="form.operatorId"
              placeholder="请选择"
              class="w-full"
            >
              <el-option
                v-for="item in operatorOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              maxlength="200"
              show-word-limit
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
