<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    destroy-on-close
    width="fit-content"
    @close="dialogCloseHandler">
    <ElForm :model="formData"
      :rules="rules"
      ref="orgForm"
      class="form-panel"
      label-width="auto">
       <ElFormItem label="Id" prop="id">
        <ElInput
          v-model="formData.id"
          :disabled="status === 'view'"
          placeholder="Id"/>
      </ElFormItem>
       <ElFormItem label="主体类型，GeTiHu-->个体户、QiYe-->企业" prop="orgCategory">
        <ElInput
          v-model="formData.orgCategory"
          :disabled="status === 'view'"
          placeholder="主体类型，GeTiHu-->个体户、QiYe-->企业"/>
      </ElFormItem>
       <ElFormItem label="统一社会信用代码" prop="uscc">
        <ElInput
          v-model="formData.uscc"
          :disabled="status === 'view'"
          placeholder="统一社会信用代码"/>
      </ElFormItem>
       <ElFormItem label="组织名称" prop="orgName">
        <ElInput
          v-model="formData.orgName"
          :disabled="status === 'view'"
          placeholder="组织名称"/>
      </ElFormItem>
       <ElFormItem label="营业执照" prop="businessLicense">
        <ElInput
          v-model="formData.businessLicense"
          :disabled="status === 'view'"
          placeholder="营业执照"/>
      </ElFormItem>
       <ElFormItem label="营业执照有效期" prop="licenseStartTime">
        <ElInput
          v-model="formData.licenseStartTime"
          :disabled="status === 'view'"
          placeholder="营业执照有效期"/>
      </ElFormItem>
       <ElFormItem label="营业执照有效期" prop="licenseEndTime">
        <ElInput
          v-model="formData.licenseEndTime"
          :disabled="status === 'view'"
          placeholder="营业执照有效期"/>
      </ElFormItem>
       <ElFormItem label="法人名称" prop="legalRepresentative">
        <ElInput
          v-model="formData.legalRepresentative"
          :disabled="status === 'view'"
          placeholder="法人名称"/>
      </ElFormItem>
       <ElFormItem label="法人身份证号" prop="idcard">
        <ElInput
          v-model="formData.idcard"
          :disabled="status === 'view'"
          placeholder="法人身份证号"/>
      </ElFormItem>
       <ElFormItem label="法人身份证有效期" prop="idcardStartTime">
        <ElInput
          v-model="formData.idcardStartTime"
          :disabled="status === 'view'"
          placeholder="法人身份证有效期"/>
      </ElFormItem>
       <ElFormItem label="法人身份证有效期" prop="idcardEndTime">
        <ElInput
          v-model="formData.idcardEndTime"
          :disabled="status === 'view'"
          placeholder="法人身份证有效期"/>
      </ElFormItem>
       <ElFormItem label="法人身份证正面" prop="idcardFront">
        <ElInput
          v-model="formData.idcardFront"
          :disabled="status === 'view'"
          placeholder="法人身份证正面"/>
      </ElFormItem>
       <ElFormItem label="法人身份证反面" prop="idcardBack">
        <ElInput
          v-model="formData.idcardBack"
          :disabled="status === 'view'"
          placeholder="法人身份证反面"/>
      </ElFormItem>
       <ElFormItem label="省；代码" prop="province">
        <ElInput
          v-model="formData.province"
          :disabled="status === 'view'"
          placeholder="省；代码"/>
      </ElFormItem>
       <ElFormItem label="市；代码" prop="city">
        <ElInput
          v-model="formData.city"
          :disabled="status === 'view'"
          placeholder="市；代码"/>
      </ElFormItem>
       <ElFormItem label="区县；代码" prop="area">
        <ElInput
          v-model="formData.area"
          :disabled="status === 'view'"
          placeholder="区县；代码"/>
      </ElFormItem>
       <ElFormItem label="乡镇街道；代码" prop="town">
        <ElInput
          v-model="formData.town"
          :disabled="status === 'view'"
          placeholder="乡镇街道；代码"/>
      </ElFormItem>
       <ElFormItem label="省；名称" prop="provinceName">
        <ElInput
          v-model="formData.provinceName"
          :disabled="status === 'view'"
          placeholder="省；名称"/>
      </ElFormItem>
       <ElFormItem label="市；名称" prop="cityName">
        <ElInput
          v-model="formData.cityName"
          :disabled="status === 'view'"
          placeholder="市；名称"/>
      </ElFormItem>
       <ElFormItem label="区县；名称" prop="areaName">
        <ElInput
          v-model="formData.areaName"
          :disabled="status === 'view'"
          placeholder="区县；名称"/>
      </ElFormItem>
       <ElFormItem label="乡镇街道；名称" prop="townName">
        <ElInput
          v-model="formData.townName"
          :disabled="status === 'view'"
          placeholder="乡镇街道；名称"/>
      </ElFormItem>
       <ElFormItem label="详细地址" prop="address">
        <ElInput
          v-model="formData.address"
          :disabled="status === 'view'"
          placeholder="详细地址"/>
      </ElFormItem>
       <ElFormItem label="经度" prop="lng">
        <ElInput
          v-model="formData.lng"
          :disabled="status === 'view'"
          placeholder="经度"/>
      </ElFormItem>
       <ElFormItem label="纬度" prop="lat">
        <ElInput
          v-model="formData.lat"
          :disabled="status === 'view'"
          placeholder="纬度"/>
      </ElFormItem>
       <ElFormItem label="创建人 Id； sys_user.id" prop="creatorId">
        <ElInput
          v-model="formData.creatorId"
          :disabled="status === 'view'"
          placeholder="创建人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
        <ElInput
          v-model="formData.modifierId"
          :disabled="status === 'view'"
          placeholder="修改人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label="创建时间" prop="createTime">
        <ElInput
          v-model="formData.createTime"
          :disabled="status === 'view'"
          placeholder="创建时间"/>
      </ElFormItem>
       <ElFormItem label="修改时间" prop="modifyTime">
        <ElInput
          v-model="formData.modifyTime"
          :disabled="status === 'view'"
          placeholder="修改时间"/>
      </ElFormItem>
       <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
        <ElInput
          v-model="formData.deleted"
          :disabled="status === 'view'"
          placeholder="是否删除； 0-->未删除、1-->已删除"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import OrgApi from '@/pages/cst/org/org-api.ts'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import Utils from '@/common/utils'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
} from 'element-plus'

const emits = defineEmits(['editSucc'])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')

const orgFormIns = useTemplateRef<FormInstance>('orgForm')

const formData = Utils.resetAble(reactive<OrgTypes.SearchOrgResult>({}))
const rules = reactive<FormRules<OrgTypes.SearchOrgResult>>({
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
orgCategory: [{ required: true, message: '请填写主体类型，GeTiHu-->个体户、QiYe-->企业', trigger: 'blur' }],
uscc: [{ required: true, message: '请填写统一社会信用代码', trigger: 'blur' }],
orgName: [{ required: true, message: '请填写组织名称', trigger: 'blur' }],
businessLicense: [{ required: true, message: '请填写营业执照', trigger: 'blur' }],
licenseStartTime: [{ required: true, message: '请填写营业执照有效期', trigger: 'blur' }],
licenseEndTime: [{ required: true, message: '请填写营业执照有效期', trigger: 'blur' }],
legalRepresentative: [{ required: true, message: '请填写法人名称', trigger: 'blur' }],
idcard: [{ required: true, message: '请填写法人身份证号', trigger: 'blur' }],
idcardStartTime: [{ required: true, message: '请填写法人身份证有效期', trigger: 'blur' }],
idcardEndTime: [{ required: true, message: '请填写法人身份证有效期', trigger: 'blur' }],
idcardFront: [{ required: true, message: '请填写法人身份证正面', trigger: 'blur' }],
idcardBack: [{ required: true, message: '请填写法人身份证反面', trigger: 'blur' }],
province: [{ required: true, message: '请填写省；代码', trigger: 'blur' }],
city: [{ required: true, message: '请填写市；代码', trigger: 'blur' }],
area: [{ required: true, message: '请填写区县；代码', trigger: 'blur' }],
town: [{ required: true, message: '请填写乡镇街道；代码', trigger: 'blur' }],
provinceName: [{ required: true, message: '请填写省；名称', trigger: 'blur' }],
cityName: [{ required: true, message: '请填写市；名称', trigger: 'blur' }],
areaName: [{ required: true, message: '请填写区县；名称', trigger: 'blur' }],
townName: [{ required: true, message: '请填写乡镇街道；名称', trigger: 'blur' }],
address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
lng: [{ required: true, message: '请填写经度', trigger: 'blur' }],
lat: [{ required: true, message: '请填写纬度', trigger: 'blur' }],
creatorId: [{ required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur' }],
modifierId: [{ required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur' }],
createTime: [{ required: true, message: '请填写创建时间', trigger: 'blur' }],
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
})

function dialogCloseHandler() {
  formData.$reset()
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (formData.id != null) {
  FormUtil.submit(orgFormIns, () => OrgApi.modify(formData))
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
  FormUtil.submit(orgFormIns, () => OrgApi.add(formData))
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: OrgTypes.SearchOrgResult = {}) {
    showDialog.value = true
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      OrgApi.detail(data.id!)
        .then(res => {
          formData.$reset(res.data)
        })
    } else {
      status.value = 'add'
      formData.$reset(data)
    }
  }
})
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
