<script lang="ts" setup name="EditTenant">
import { defineExpose, nextTick, onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IdeviceForm } from './tenant_interface'
import DeptSelect from '@/components/DeptSelect/index.vue'
import { addTenant, updateTenant } from '@/api/system/tenant'

const emits = defineEmits(['watchChild'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框显示隐藏
const dialogStatus = ref('') // 对话框类型：create,update,detail
const deptShowTop = ref(false)
// 对话框标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
  makeDep: '绑定组织',
}
// 表单内容
const deviceForm: Ref<IdeviceForm> = ref({
  id: '', // 主键
  tenantCode: '', // 项目编码
  tenantName: '', // 项目名称
  linkPerson: '', // 联系人
  tel: '', // 联系电话
  clearday: '', // 清除时间
})
// 表单校验规则
const rules = {
  tenantCode: [{ required: true, message: '项目编码不能为空', trigger: ['blur', 'change'] }],
  tenantName: [{ required: true, message: '项目名称不能为空', trigger: ['blur', 'change'] }],
}

// 重置表单
const resetForm = () => {
  deviceForm.value = {
    tenantCode: '',
    tenantName: '',
    linkPerson: '',
    tel: '',
    clearday: '',
    deptName: '',
  }
}
// 父子组件通信
const initDialog = (dialogStatusValue: string, row: IdeviceForm) => {
  dialogFormVisible.value = true
  dialogStatus.value = dialogStatusValue
  if (dialogStatus.value === 'create') {
    resetForm()
    nextTick(() => {
      dataFormRef.value.clearValidate()
    })
  }
  else if (dialogStatus.value === 'update' || dialogStatus.value === 'detail' || dialogStatus.value === 'makeDep') {
    deviceForm.value = {
      id: row.id,
      tenantCode: row.tenantCode,
      tenantName: row.tenantName,
      linkPerson: row.linkPerson,
      tel: row.tel,
      clearday: row.clearday,
    }
  }
}
defineExpose({
  initDialog,
})
// 修改数据
const updateData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      updateTenant(deviceForm.value).then((response) => {
        if (response.code === 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          emits('watchChild')
          dialogFormVisible.value = false
        }
      })
    }
  })
}
// 新增数据
const createData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      addTenant(deviceForm.value).then((response) => {
        if (response.code === 200) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          emits('watchChild')
          dialogFormVisible.value = false
        }
      })
    }
  })
}
// 保存数据
const saveData = () => {
  if (dialogStatus.value === 'update') {
    updateData()
  }
  else if (dialogStatus.value === 'create') {
    createData()
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible"
    append-to-body
    :title="textMap[dialogStatus]"
  >
    <el-form
      ref="dataFormRef"
      :rules="rules"
      :model="deviceForm"
      label-width="100px"
      label-well-code="right"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目编码" prop="tenantCode">
            <el-input
              v-model="deviceForm.tenantCode"
              clearable
              placeholder="请输入与项目编码"
              :disabled="dialogStatus === 'create' ? false : true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="tenantName">
            <el-input
              v-model="deviceForm.tenantName"
              placeholder="请输入项目名称"
              clearable
              :disabled="dialogStatus === 'create' ? false : true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目联系人" prop="linkPerson">
            <el-input
              v-model="deviceForm.linkPerson"
              placeholder="请输入项目联系人"
              clearable
              :disabled="dialogStatus === 'detail' || dialogStatus === 'makeDep' ? true : false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="tel">
            <el-input
              v-model="deviceForm.tel"
              placeholder="请输入联系电话"
              clearable
              :disabled="dialogStatus === 'detail' || dialogStatus === 'makeDep' ? true : false"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="历史保存天数" prop="clearday">
            <el-input
              v-model="deviceForm.clearday"
              placeholder="请输入历史数据保存天数"
              clearable
              :disabled="dialogStatus === 'detail' || dialogStatus === 'makeDep' ? true : false"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="dialogStatus === 'makeDep' ? true : false" :span="12">
          <el-form-item label="组织名称" prop="deptName">
            <DeptSelect
              v-model="deviceForm.deptName"
              :need-top="deptShowTop"
              dept-type="03"
              placeholder="选择权属单位"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div
        v-show="dialogStatus === 'detail' ? false : true"
        class="dialog-footer"
      >
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>