<!--
  Description: 指令下发-新建/编辑/详情
  Author: 李亚光
  Date: 2025-03-13
 -->
<script name="InstructionConfig" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import { setInstruction } from '@/api/basic/instruction'
import type { FormRules } from 'element-plus'
import { getDeviceListPage } from '@/api/basic/device'
const emit = defineEmits(['refresh'])

const dialogFormVisible = ref(false) // 对话框是否显示
const dialogStatus = ref('') // 对话框类型：create,update
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
} // 表头显示标题
const dataFormRef = ref()
const dataForm = ref({
  id: '', //
  deviceId: '', // 设备id
  collectTime: '', // 采集时间
  collectInterval: '', // 采集间隔(分)
  collectCount: '', // 采集次数
  retryTimes: '', // 重传次数
  attemptsMax: '', // 最大尝试次数
  ip: '', // IP
  port: '', // 端口
}) // 表单
const rules: FormRules = {
  deviceId: [{ required: true, message: '设备编号不能为空', trigger: ['blur', 'change'] }],
  collectTime: [{ required: true, message: '采集时间不能为空', trigger: ['blur', 'change'] }],
  collectInterval: [{ required: true, message: '采集间隔不能为空', trigger: ['blur', 'change'] }],
  collectCount: [{ required: true, message: ' 采集次数不能为空', trigger: ['blur', 'change'] }],
  retryTimes: [{ required: true, message: '重传次数不能为空', trigger: ['blur', 'change'] }],
  attemptsMax: [{ required: true, message: '最大尝试次数不能为空', trigger: ['blur', 'change'] }],
} // 前端校验规则

const initDialog = (dialogStatusValue: string, row: any) => {
  dialogFormVisible.value = true
  dialogStatus.value = dialogStatusValue
  if(dialogStatusValue === 'create') {
    resetForm()
  }
  else {
    dataForm.value.id = row.id
    dataForm.value.deviceId = row.deviceId
    dataForm.value.collectTime = row.collectTime
    dataForm.value.collectInterval = row.collectInterval
    dataForm.value.collectCount = row.collectCount
    dataForm.value.retryTimes = row.retryTimes
    dataForm.value.attemptsMax = row.attemptsMax
    dataForm.value.ip = row.ip
    dataForm.value.port = row.port
  }
}

defineExpose({
  initDialog,
})
const resetForm = () => {
  dataForm.value.id = ''
  dataForm.value.deviceId = ''
  dataForm.value.collectTime = ''
  dataForm.value.collectInterval = ''
  dataForm.value.collectCount = ''
  dataForm.value.retryTimes = ''
  dataForm.value.attemptsMax = ''
  dataForm.value.ip = ''
  dataForm.value.port = ''
  nextTick(() => {
    dataFormRef.value.clearValidate()
  })
}
const loadingPage = ref(false)
// 保存
const saveData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loadingPage.value = true
      setInstruction(dataForm.value).then(res => {
        // console.log(res.data, '111')
        loadingPage.value = false
        ElMessage.success('操作成功')
        cancel()
        emit('refresh')
      }).catch(() => {
        loadingPage.value = false
      })
    }
  })
}

// 取消
const cancel = () => {
  dialogFormVisible.value = false
  resetForm()
}

const deviceList = ref<any[]>([])
const loading = ref(false)
const fetchDict = () => {
  loading.value = true
  getDeviceListPage({
    offset: 1,
    limit: 9999,
  }).then(res => {
    deviceList.value = res.data.rows
    loading.value = false
  })

}
fetchDict()
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body>

    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="140px" :disabled="dialogStatus === 'detail'">
      <el-row :gutter="21">
        <el-col :span="10">
          <el-form-item label="设备编号" prop="deviceId">
            <el-select v-loaidng="loading" v-model="dataForm.deviceId" style="width: 100%;" clearable filterable>
              <el-option v-for="item in deviceList" :key="item.id" :label="item.devcode" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1" />
        <el-col :span="10">
          <el-form-item label="采集时间" prop="collectTime">
            <el-time-picker v-model="dataForm.collectTime" placeholder="采集时间" style="width: 100%;"
            value-format="HH:mm" format="HH:mm"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="21">
        <el-col :span="10">
          <el-form-item label="采集间隔(分)" prop="collectInterval">
            <el-input-number v-model="dataForm.collectInterval" :min="1" :max="99" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="1" />
        <el-col :span="10">
          <el-form-item label="采集次数" prop="collectCount">
            <el-input-number v-model="dataForm.collectCount" :min="1" :max="99" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="21">
        <el-col :span="10">
          <el-form-item label="重传次数" prop="retryTimes">
            <el-input-number v-model="dataForm.retryTimes" :min="1" :max="99" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="1" />
        <el-col :span="10">
          <el-form-item label="最大尝试次数" prop="attemptsMax">
            <el-input-number v-model="dataForm.attemptsMax" :min="1" :max="99" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="21">
        <el-col :span="10">
          <el-form-item label="IP" prop="ip">
            <el-input v-model="dataForm.ip" :placeholder="dialogStatus === 'detail' ? '' : '非必填'" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="1" />
        <el-col :span="10">
          <el-form-item label="端口" prop="port">
            <el-input v-model="dataForm.port" :placeholder="dialogStatus === 'detail' ? '' : '非必填'" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="loadingPage" :disabled="loadingPage" type="primary" @click="saveData">
          保存
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>