<!--
  Description: 批量下发配置
  Author: 李亚光
  Date: 2025-06-12
 -->
<script name="BatchConfigDialog" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
const emit = defineEmits(['refresh'])
const $props = defineProps({
  deviceType: {
    type: String,
    default: ''
  },
})
const formRef = ref()
const showDialog = ref(false)
const configInfo = ref({
  deviceId: '',
  deviceCode: '',
  percent: '', // 报警阈值
  installHeight: '', // 安装高度
  attemptsMax: '3', // 做大尝试次数
  retryTimes: '3', // 重传次数
  ip: '',
  port: '',
  deviceType: '',
  collectInterval: '', // 采集间隔
  uploadPeriod: '', // 上传周期
})
const validateCollectInterval = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('采集间隔不能为空'))
  }
  else {
    if (Number(value) >= 5 && Number(value) <= 1440) {
      callback()
    }
    else {
      callback(new Error('采集间隔需在5-1440之间'))
    }
  }
}
const configInfoRules = ref({
  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
  installHeight: [{ required: true, message: '安装高度不能为空', trigger: ['blur', 'change'] }],
  percent: [{ required: true, message: '报警阈值不能为空', trigger: ['blur', 'change'] }],
  deviceType: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],
  collectInterval: [{ required: true, validator: validateCollectInterval, trigger: ['blur', 'change'] }],
}) // 表单验证规则
const initDialog = () => {
  showDialog.value = true

}
const close = () => {
  showDialog.value = false
}
defineExpose({
  initDialog,
})

const loadingBtn = ref(false)
// 保存
const saveForm = async () => {
  if (!formRef.value) { return }
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      // btnLoading.value = true;
      // (dialogStatus.value === 'create' ? addpackage : editpackage)({...packageInfo.value,groupId: $route.query.id}).then(res => {
      //   ElMessage.success(`${dialogStatus.value === 'create' ? '添加' : '修改'}成功`)
      //   dialogVisible.value = false
      //   $emits('closeRefresh')
      //   btnLoading.value = false
      // }).catch(() => {
      //   btnLoading.value = false
      // })
    }
  })

}


const deviceList = ref([])
const deviceTypeList = ref([])
const fetchDict = () => {
  getDictByCode('deviceType').then((res: any) => {
    if (res.code === 200) {
      deviceTypeList.value = res.data
      console.log(deviceTypeList.value, 'deviceTypeList.value')
    }
  })
}
fetchDict()
const computeOptions = (val: any[]) => {
  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
}
</script>

<template>

  <el-dialog v-model="showDialog" title="批量下发配置" :append-to-body="true" :close-on-click-modal="false" :modal="true">
    <el-form ref="dataFormRef" :rules="configInfoRules" :model="configInfo" label-width="110px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="设备类型" prop="deviceType">
            <el-select v-model="configInfo.deviceType" placeholder="选择设备类型" style="width: 100%;" clearable filterable>
              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-select-v2 v-model="configInfo.deviceCode" multiple :options="computeOptions(deviceList)"
              style="width: 100%;" clearable filterable>
            </el-select-v2>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重传次数" prop="retryTimes">
            <el-input v-model="configInfo.retryTimes" type="number" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大尝试次数" prop="attemptsMax">
            <el-input v-model="configInfo.attemptsMax" type="number" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col v-if="configInfo.deviceType !== '液位'" :span="12">
          <el-form-item label="采集间隔(分)" prop="collectInterval">
            <el-input v-model="configInfo.collectInterval" type="number" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col v-if="configInfo.deviceType !== '液位'"  :span="12">
          <el-form-item label="上传周期(分)" prop="uploadPeriod">
            <el-input v-model="configInfo.uploadPeriod" type="number" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
          <el-form-item label="报警阈值(%)" prop="percent">
            <el-input v-model="configInfo.percent" type="number" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col v-if="configInfo.deviceType === '液位'" :span="12">
          <el-form-item label="安装高度(m)" prop="installHeight">
            <el-input v-model="configInfo.installHeight" type="number" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IP" prop="ip">
            <el-input v-model="configInfo.ip" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口" prop="port">
            <el-input v-model="configInfo.port" clearable style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveForm" :disabled="loadingBtn" :loading="loadingBtn">
          保存
        </el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>