<!-- 添加 / 编辑 -->
<script name="AddAlarmRuleDialog" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IAlarmRule } from './alarm-interface'
import type { IDeviceInfo } from '@/views/basic/device/device-info'
import type { ILocateSelect } from '@/views/basic/locate/locate-info'
import { getLocateListSelect } from '@/api/basic/locate'
import { getDeviceListPage } from '@/api/basic/device'
import { addAlarmRule, updateAlarmRule } from '@/api/data/alarm'

const emit = defineEmits(['recordSaved'])

// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

const title = ref('')

const infoFormRef = ref()

const alarmRule = ref<IAlarmRule>({
  id: '',
  devCode: '',
  highValue: '',
  lowValue: '',
  overTime: '',
})

const alarmRuleRules = ref({
  devCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
  highValue: [{ required: true, message: '上限阈值不能为空', trigger: 'blur' }],
}) // 表单验证规则

const locateList = ref<Array<ILocateSelect>>([])
const deviceList = ref<Array<IDeviceInfo>>([])

const showDialog = ref<boolean>(false)

// 逻辑
const resetForm = () => {
  sessionStorage.removeItem('alarmRule') // 返回列表时 将缓存中的数据删除

  alarmRule.value = {
    id: '',
    devCode: '',
    highValue: '',
    lowValue: '',
    overTime: '',
  }

  infoFormRef.value.clearValidate()
  showDialog.value = false
}

// 添加
const saveInfo = () => {
  // 将创建时间改为提交的时间
  addAlarmRule(alarmRule.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')

      emit('recordSaved')
      resetForm()
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}
// 编辑
const updateInfoById = () => {
  updateAlarmRule(alarmRule.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')

      emit('recordSaved')
      resetForm()
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}

// 保存
const saveForm = async () => {
  if (!infoFormRef) { return }

  await infoFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        if (type.value === 'create') {
          saveInfo()
        }
        else if (type.value === 'update') {
          updateInfoById()
        }
      })
    }
  })
}

const initLocateSelect = () => {
  getLocateListSelect({}).then((res) => {
    if (res.code === 200) {
      locateList.value = res.data
    }
  })
}

const locateChangeHandler = () => {
  if (alarmRule.value.wellCode === '') {
    deviceList.value = []
    alarmRule.value.position = ''
  }
  else {
    const targetLocate = locateList.value.filter(locate => locate.name === alarmRule.value.wellCode)
    if (targetLocate.length > 0) {
      alarmRule.value.position = targetLocate[0].position
    }
    else {
      alarmRule.value.position = ''
    }

    // 查询点位关联的设备列表
    getDeviceListPage({ keywords: alarmRule.value.wellCode, limit: 1000, offset: 1 }).then((res) => {
      if (res.code === 200) {
        deviceList.value = res.data.rows
      }
      else {
        deviceList.value = []
      }
    })
  }
}

const deviceChangeHandler = () => {
  if (alarmRule.value.devCode === '') {
    alarmRule.value.deviceTypeName = ''
  }
  else {
    const targetDev = deviceList.value.filter(dev => dev.devcode === alarmRule.value.devCode)
    if (targetDev.length > 0) {
      alarmRule.value.deviceTypeName = targetDev[0].deviceTypeName
    }
    else {
      alarmRule.value.deviceTypeName = ''
    }
  }
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  switch (params.type) {
    case 'create' :
      title.value = '新增报警规则'

      initLocateSelect()

      break
    case 'update':
      title.value = '编辑报警规则'

      alarmRule.value = JSON.parse(sessionStorage.getItem('alarmRule')!)

      break
    default:
      title.value = ''
      break
  }

  nextTick(() => {
    infoFormRef.value.clearValidate()
  })

  showDialog.value = true
}

const highValueNum = computed({
  // 获取器，将字符串转换为数字
  get() {
    return Number(alarmRule.value.highValue)
  },
  // 设置器，将数字转换为字符串
  set(value) {
    alarmRule.value.highValue = value.toString()
  },
})
const lowValueNum = computed({
  // 获取器，将字符串转换为数字
  get() {
    return Number(alarmRule.value.lowValue)
  },
  // 设置器，将数字转换为字符串
  set(value) {
    alarmRule.value.lowValue = value.toString()
  },
})
const overTimeNum = computed({
  // 获取器，将字符串转换为数字
  get() {
    return Number(alarmRule.value.overTime)
  },
  // 设置器，将数字转换为字符串
  set(value) {
    alarmRule.value.overTime = value.toString()
  },
})

defineExpose({
  initDialog,
})
</script>

<template>
  <el-dialog v-model="showDialog" :title="title" :append-to-body="true" :close-on-click-modal="false" @closed="resetForm">
    <detail-block title="">
      <el-form ref="infoFormRef" :model="alarmRule" :rules="alarmRuleRules" label-position="right" label-width="110px" stripe>
        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="点位编号">
              <el-select v-model="alarmRule.wellCode" placeholder="请输入点位编号" :disabled="type === 'update'" clearable @change="locateChangeHandler">
                <el-option v-for="dict in locateList" :key="dict.value" :value="dict.name" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="点位位置">
              <el-input v-model="alarmRule.position" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="设备编号" prop="devCode">
              <el-select v-model="alarmRule.devCode" placeholder="请选择设备" :disabled="type === 'update'" clearable @change="deviceChangeHandler">
                <el-option v-for="dict in deviceList" :key="dict.id" :value="dict.devcode" :label="dict.devcode" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="设备类型">
              <el-input v-model="alarmRule.deviceTypeName" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="上限阈值" prop="highValue">
              <el-input-number v-model="highValueNum" placeholder="请输入上限阈值" :precision="2" :step="0.01" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="下限阈值">
              <el-input-number v-model="lowValueNum" placeholder="" :precision="2" :step="0.01" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="超时时间">
              <el-input-number v-model="overTimeNum" placeholder="请输入超时时间" :precision="2" :step="0.01" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="saveForm">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>