<template>
    <div>
      <el-dialog
        v-model="state.showDialog"
        destroy-on-close
        :title="title"
        draggable
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="600px"
      >
        <el-form :model="form" ref="formRef" size="default" label-width="80px">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="部门名称" prop="roomName" :rules="[{ required: true, message: '请输入部门名称', trigger: ['blur', 'change'] }]">
                <el-input v-model="form.roomName" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="部门编码" prop="roomNo">
                <el-input v-model="form.roomNo" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="排序">
                <el-input-number v-model="form.sort" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="启用">
                <el-switch v-model="form.enabled" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="onCancel" size="default">取 消</el-button>
            <el-button type="primary" @click="onSure" size="default" :loading="state.sureLoading">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup name="admin/Room/form">
  import { reactive, toRefs, ref, getCurrentInstance } from 'vue'
  import { RoomUpdateInput } from '/@/api/admin/data-contracts'
  import { RoomApi } from '/@/api/admin/Room'
  import eventBus from '/@/utils/mitt'
  
  const { proxy } = getCurrentInstance() as any
  
  defineProps({
    title: {
      type: String,
      default: '',
    },
  })
  
  const formRef = ref()
  const state = reactive({
    showDialog: false,
    sureLoading: false,
    form: {
      enabled: true,
    } as RoomUpdateInput,
    data: [],
  })
  
  const { form } = toRefs(state)
  
  // 打开对话框
  const open = async (row: any = {}) => {
    proxy.$modal.loading()

    if (row.id > 0) {
      const res = await new RoomApi().get({ id: row.id }, { loading: true })
      if (res?.success) {
        let formData = res.data as RoomUpdateInput
         state.form = formData
      }
    } else {
      state.form = {
        enabled: true,
      } as RoomUpdateInput
    }

    proxy.$modal.closeLoading()
    state.showDialog = true
  }
  // 取消
  const onCancel = () => {
    state.showDialog = false
  }
  
  // 确定
  const onSure = () => {
    formRef.value.validate(async (valid: boolean) => {
      if (!valid) return
  
      state.sureLoading = true
      let res = {} as any
       if (state.form.id != undefined && state.form.id > 0) {
        res = await new RoomApi().update(state.form, { showSuccessMessage: true }).catch(() => {
          state.sureLoading = false
        })
      } else {
        res = await new RoomApi().add(state.form, { showSuccessMessage: true }).catch(() => {
          state.sureLoading = false
        })
      }
  
      state.sureLoading = false
  
      if (res?.success) {
        eventBus.emit('refreshRoom')
        state.showDialog = false
      }
    })
  }

  defineExpose({
    open,
  })
  </script>

<style lang="scss" scoped></style>
  