<template>
  <!-- 添加或修改项目信息对话框 -->
  <div class="el-drawer__wrapper">
    <el-drawer title="项目信息" v-model="visible" direction="rtl" size="100%">
      <div class="page-container form-container">
        <div class="form-btns-container">
          <el-button-group>
            <el-button type="primary" icon="Finished" @click="submitForm">保存</el-button>
            <el-button v-if="form.id" type="success" @click="getForm"> <i class="fa fa-refresh" aria-hidden="true" /> 刷新 </el-button>
          </el-button-group>
          <div class="screen-btn" @click="handleScreen">
            <template v-if="!isFullscreen">
              <i class="fa fa-window-maximize" aria-hidden="true" />
              <!-- <span>全屏</span> -->
            </template>
            <template v-else>
              <i class="fa fa-window-restore" aria-hidden="true" />
              <!-- <span>还原</span> -->
            </template>
          </div>
          <div class="close-btn" @click="cancel">
            <i class="fa fa-times" aria-hidden="true" />
            <!-- <span>关闭</span> -->
          </div>
        </div>
        <div class="Y-scrollbar" style="position: absolute; top: 32px; bottom: 0; width: 100%; overflow: auto"></div>
        <el-form ref="equipmentMaintenanceRef" class="master-container" :model="form" :rules="rules" label-width="120px">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="设备类别编号" prop="code">
                <el-input v-model.trim="form.code" placeholder="请输入设备类别编号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备类别名称" prop="name">
                <el-input v-model.trim="form.name" placeholder="请输入设备类别名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备类别描述" prop="remark">
                <el-input v-model.trim="form.remark" placeholder="请输入设备类别描述" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备类别排序" prop="sort">
                <el-input v-model.trim="form.sort" placeholder="请输入设备类别排序" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { getEquipmentMaintenance, addEquipmentMaintenance, updateEquipmentMaintenance } from '@/api/business/equipmentMaintenance'
const { proxy } = getCurrentInstance()

const loading = ref(false)
const visible = ref(false)
const isFullscreen = ref(false)
const data = reactive({
  form: {},
  rules: {
    code: [{ required: true, message: '设备类别编号不能为空', trigger: 'blur' }],
    name: [{ required: true, message: '设备类别名称不能为空', trigger: 'blur' }],
    sort: [{ required: true, message: '设备类别排序不能为空', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(data)
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset()
  visible.value = true
  loading.value = true
  getEquipmentMaintenance(id || 0).then((response) => {
    if (response.data) {
      form.value = response.data
    }
    loading.value = false
  })
}

/** 取消按钮 */
function cancel() {
  visible.value = false
  reset()
}

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    deptId: null,
    companyId: null,
    parentId: null,
    code: null,
    name: null,
    remark: null,
    sort: null,
    createTime: null,
    creatorId: null,
    updateTime: null,
    updaterId: null,
    deleted: null,
    version: null
  }
  proxy.resetForm('equipmentMaintenanceRef')
}

/** 全屏缩放 */
function handleScreen() {
  const dom = document.querySelector('.column-container > .el-drawer__wrapper > .el-overlay')
  isFullscreen.value = !isFullscreen.value
  dom.style.position = isFullscreen.value ? 'fixed' : 'absolute'
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['equipmentMaintenanceRef'].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateEquipmentMaintenance(form.value).then((response) => {
          proxy.$modal.msgSuccess('修改成功')
          visible.value = false
        })
      } else {
        addEquipmentMaintenance(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          visible.value = false
        })
      }
    }
  })
}

/** 查询表单信息  */
function getForm() {
  loading.value = true
  getEquipmentMaintenance(form.value.id).then((response) => {
    loading.value = false
    form.value = response.data
  })
}

/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>
