<!-- 新增、编辑设备 -->
<script lang="ts" setup name="DeviceManageEdit">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { addDevice, editDevice } from '@/api/device/deviceManage'
import { isIp, isPort } from '@/utils/validate'
const emits = defineEmits(['closeRefresh'])
const dialogStatus = ref('add')
const dialogVisible = ref(false) // 弹窗显示隐藏
// 显示标题
const textMap: { [key: string]: string } = {
  detail: '详情',
  edit: '编辑',
  add: '新增',
}

// 表单数据对象
const formData = ref({
  id: '', //	主键
  robotCode: '', //	设备编号
  robotIp: '', //	设备ip
  robotName: '', //	设备名称
  robotPort: '', //	设备端口
  // robotCell: '', //	电量
  // robotStatus: '', //	设备状态(1,在线，离线)
  // routeId: '', // 正在执行路线id
  // valid: '', //	删除状态(1,有效，0无效)
})
const btnLoading = ref(false) // 保存按钮加载状态
const formDataRef = ref<FormInstance>() // 表单对象

const validateIp = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('ip必填'))
  }
  else if (!isIp(value)) {
    callback(new Error('请输入正确的ip'))
  }
  else {
    callback()
  }
}

const validatePort = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('端口必填'))
  }
  else if (!isPort(value)) {
    callback(new Error('请输入正确的端口'))
  }
  else {
    callback()
  }
}
// 校验规则
const rules = reactive<FormRules>({
  robotCode: [{ required: true, message: '设备编号必填', trigger: ['blur', 'change'] }],
  robotName: [{ required: true, message: '设备名称必填', trigger: ['blur', 'change'] }],
  robotIp: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
  robotPort: [{ required: true, validator: validatePort, trigger: ['blur', 'change'] }],
})

// -------------------------------------------------------------------------------------------
// 表单提交
function submitForm() {
  // return ElMessage.info('敬请期待')
  if (formDataRef.value) {
    formDataRef.value?.validate((valid: boolean) => {
      if (valid) {
        const params = {
          ...formData.value,
        }
        if (dialogStatus.value === 'add') { // 新建
          addDevice(params).then((res) => {
            ElMessage.success('新增成功')
            closeRefresh()
          })
        }
        else if (dialogStatus.value === 'edit') { // 编辑
          editDevice(params).then((res) => {
            ElMessage.success('编辑成功')
            closeRefresh()
          })
        }
      }
    })
  }
}

// 重置表单
function resetForm() {
  formData.value = {
    id: '', //	主键
    robotCode: '', //	设备编号
    robotIp: '', //	设备ip
    robotName: '', //	设备名称
    robotPort: '', //	设备端口
    // robotCell: '', //	电量
    // robotStatus: '', //	设备状态(1,在线，离线)
    // routeId: '', // 正在执行路线id
    // valid: '', //	删除状态(1,有效，0无效)
  }
}
// -----------------------------------初始化、关闭对话框相关-----------------------------------------
function initDialog(dialogstatus: string, row: any) {
  dialogVisible.value = true
  if (dialogstatus === 'edit' || dialogstatus === 'detail') {
    formData.value.id = row.id
    formData.value.robotCode = row.robotCode //	设备编号
    formData.value.robotIp = row.robotIp //	设备ip
    formData.value.robotName = row.robotName //	设备名称
    formData.value.robotPort = row.robotPort //	设备端口
    // formData.value.robotCell = '' //	电量
    // formData.value.robotStatus = '' //	设备状态(1在线，离线)
    // formData.value.routeId = '' // 正在执行路线id
    // formData.value.valid = '' //	删除状态(1,有效，0无效)
  }

  // 详情隐藏表单校验
  if (dialogstatus === 'detail') {
    formDataRef.value?.clearValidate()
  }
  dialogStatus.value = dialogstatus // 类型 新建add 编辑edit 详情detail
  btnLoading.value = false
}

// 关闭并刷新
function closeRefresh() {
  dialogVisible.value = false
  resetForm()
  if (formDataRef.value) {
    formDataRef.value?.clearValidate()
  }
  emits('closeRefresh')
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible" :title="textMap[dialogStatus]" width="600" :before-close="closeRefresh" append-to-body
    :open-delay="0" :close-on-click-modal="false"
  >
    <el-form
      ref="formDataRef" :model="formData" :rules="rules" label-position="right" label-width="130px"
      class="form-container" size="default" :disabled="dialogStatus === 'detail'" @submit.prevent
    >
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="设备编号" prop="robotCode">
            <el-input v-model="formData.robotCode" :disabled="dialogStatus === 'detail'" :maxlength="100" show-word-limit autosize type="textarea" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="设备名称" prop="robotName">
            <el-input v-model="formData.robotName" :disabled="dialogStatus === 'detail'" :maxlength="100" show-word-limit autosize type="textarea" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="ip" prop="robotIp">
            <el-input v-model="formData.robotIp" :disabled="dialogStatus === 'detail'" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="端口" prop="robotPort">
            <el-input v-model="formData.robotPort" :disabled="dialogStatus === 'detail'" placeholder="必填" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="dialogStatus !== 'detail'" :loading="btnLoading" type="primary" @click="submitForm">
          保存
        </el-button>
        <el-button @click="closeRefresh">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

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