<!--
  Description: 产品管理-新建或编辑指令
  Author: 李亚光
  Date: 2024-07-15
 -->
<script lang="ts" setup name="EditInstruction">
import dayjs from 'dayjs'
import type { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
import { addInstruction, addInstructionOther, removeInstruction } from '@/api/home/device/instruction'
import { getDeviceTypeListPage } from '@/api/home/device/type'
import { getProductListPage } from '@/api/home/device/product'
import { getDeviceListPage } from '@/api/home/device/device'
import useUserStore from '@/store/modules/user'
import indexDB from '@/utils/indexDB'
import { indexDBHandler } from '@/utils/sessionData'
import { instructionProductList } from './instruction'
const emits = defineEmits(['refresh'])
const $route = useRoute()
const $router = useRouter()
const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
const deviceList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
const deviceAllList = ref<{ id: string; name: string; value: string }[]>([]) // 设备
const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
const user = useUserStore()
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const dialogStatus = ref('') // 对话框类型：create,update
const dataForm = ref({
  id: '',
  productId: '', // 产品
  // devcode: '', // 设备编号
  collectInterval: '', // 采集间隔
  uploadPeriod: '', // 上传周期
  reloadInterval: '', // 重传次数
  operator: '', // 操作员id
  operatorName: '', // 操作员名称
  maker: '', // 备注
  deviceType: '',
  deviceTypeName: '',
  framecontent: '',
  framecontentDesc: '',
  writetime: '',
  devCodeList: [],


  // 北分麦哈克-管网哨兵
  'mhk01': '', // 浓度低报值
  'mhk02': 50, // 浓度高报值 不可修改 50（国标要求）
  'mhk03': '', // 设备采样周期 1- 30 分钟
  'mhk04': '', // 上传采样周期 1- 1440 分钟
  'mhk05': '', // GPS告警距离 1 - 65535 米
  'mhk06': '1', // 确定设备安装位置 value = 1 生效
  'mhk07': '1', // 清除安装位置 value = 1 生效
  'mhk08': '1', // 重启设备 value = 1 生效

  // 诺成新-燃气智能警示桩
  'ncx01': '', // 第一次上报时间 值，时分（整数）
  'ncx02': '', // 第二次上报时间 值，时分（整数）
  'ncx03': '', // 左侧线长度 值，单位米
  'ncx04': '', // 右侧线长度 值，单位米
  'ncx05': '1', // 倾斜报警
  'ncx06': '1', // 破坏报警
  'ncx07': '1', // 甲烷泄漏报警
  'ncx08': '1', // 左侧断线报警
  'ncx09': '1', // 右侧断线报警
  'ncx10': '1', // 左侧振动报警
  'ncx11': '1', // 右侧振动报警
  'ncx12': '1', // 语音报警
  // 'ncx13': '1', // 备用

  // 百瑞生-管网哨兵
  'brs4': '', // 浓度报警低阈值 值，%LEL
  'brs5': '', // 浓度报警高阈值 值，%LEL
  'brs7': '', // 低温阈值
  'brs8': '', // 高温阈值
  'brs11': '', // 传感器采集间隔 值，单位秒
  'brs12': '', // 采样深度
  'brs15': '', // 预热时间 值，单位秒
  'brs19': '1', // 防盗使能  1开启，0禁用
  'brs20': '1', // 振动监测 1开启，0禁用
  'brs28': '1', // 振动采样使能 1开启，0禁用
  'brs29': '', // 振动阈值1
  'brs30': '', // 振动阈值2
}) // 表单
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新增',
  addOther: '新增',
  detail: '详情',
} // 表头显示标题

const validatemhk01 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('浓度低报值不能为空'))
  }
  else {
    if (Number(value) >= 5 && Number(value) <= 25) {
      callback()
    }
    else {
      callback(new Error('浓度低报值需在5-25之间'))
    }
  }
}
const validatemhk03 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('设备采样周期不能为空'))
  }
  else {
    if (Number(value) >= 1 && Number(value) <= 30) {
      callback()
    }
    else {
      callback(new Error('设备采样周期需在1-30之间'))
    }
  }
}
const validatemhk04 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('上传采样周期不能为空'))
  }
  else {
    if (Number(value) >= 1 && Number(value) <= 1440) {
      callback()
    }
    else {
      callback(new Error('上传采样周期需在1-1440之间'))
    }
  }
}
const validatemhk05 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback()
  }
  else {
    if (Number(value) >= 1 && Number(value) <= 65535) {
      callback()
    }
    else {
      callback(new Error('GPS告警距离需在1-1440之间'))
    }
  }
}
const rules: FormRules = {
  productId: [{ required: true, message: '产品必选', trigger: ['blur', 'change'] }],
  devCodeList: [{ required: true, message: '设备编号必选', trigger: ['blur', 'change'] }],
  collectInterval: [{ required: true, message: '采集间隔不能为空', trigger: ['blur', 'change'] }],
  reloadInterval: [{ required: true, message: '重传次数不能为空', trigger: ['blur', 'change'] }],
  uploadPeriod: [{ required: true, message: '上传周期不能为空', trigger: ['blur', 'change'] }],

  // 北分麦哈克-管网哨兵
  mhk01: [{ required: true, validator: validatemhk01, trigger: ['blur', 'change'] }], // 浓度低报值
  mhk03: [{ required: true, validator: validatemhk03, trigger: ['blur', 'change'] }], // 设备采样周期
  mhk04: [{ required: true, validator: validatemhk04, trigger: ['blur', 'change'] }], // 上传采样周期
  mhk05: [{ required: false, validator: validatemhk05, trigger: ['blur', 'change'] }], // GPS告警距离

  // 诺成新-燃气智能警示桩
  ncx01: [{ required: true, message: '第一次上报时间不能为空', trigger: ['blur', 'change'] }],
  ncx02: [{ required: true, message: '第二次上报时间不能为空', trigger: ['blur', 'change'] }],
  ncx03: [{ required: true, message: '左侧线长度不能为空', trigger: ['blur', 'change'] }],
  ncx04: [{ required: true, message: '右侧线长度不能为空', trigger: ['blur', 'change'] }],

  // 百瑞生-管网哨兵
  // brs4: [{ required: true, message: '报警低阈值不能为空', trigger: ['blur', 'change'] }],
  // brs5: [{ required: true, message: '报警高阈值不能为空', trigger: ['blur', 'change'] }],
} // 前端校验规则
// 当前指令类型
const instruction = ref<{ [key: string]: boolean }>({
  bjwxd: false,  // 北京无线电
  brsGwsb: false, // 百瑞生-管网哨兵
  bfmhkGwsb: false, // 北分麦哈克-管网哨兵
  ncxRqznjsz: false // 诺成新-燃气智能警示桩
})
// 当前支持下发配置的产品
const productConfig = ref(instructionProductList)
// 重置表单
const resetForm = () => {
  dataForm.value = {
    id: '',
    productId: '', // 产品
    // devcode: '', // 设备编号
    collectInterval: '', // 采集间隔
    uploadPeriod: '', // 上传周期
    reloadInterval: '', // 重传次数
    operator: '', // 操作员id
    operatorName: '', // 操作员名称
    maker: '', // 备注
    deviceType: '',
    deviceTypeName: '',
    framecontent: '',
    framecontentDesc: '',
    writetime: '',
    devCodeList: [],

    // 北分麦哈克-管网哨兵
    'mhk01': '', // 浓度低报值
    'mhk02': 50, // 浓度高报值 不可修改 50（国标要求）
    'mhk03': '', // 设备采样周期 1- 30 分钟
    'mhk04': '', // 上传采样周期 1- 1440 分钟
    'mhk05': '', // GPS告警距离 1 - 65535 米
    'mhk06': '1', // 确定设备安装位置 value = 1 生效
    'mhk07': '1', // 清除安装位置 value = 1 生效
    'mhk08': '1', // 重启设备 value = 1 生效

    // 诺成新-燃气智能警示桩
    'ncx01': '', // 第一次上报时间 值，时分（整数）
    'ncx02': '', // 第二次上报时间 值，时分（整数）
    'ncx03': '', // 左侧线长度 值，单位米
    'ncx04': '', // 右侧线长度 值，单位米
    'ncx05': '1', // 倾斜报警
    'ncx06': '1', // 破坏报警
    'ncx07': '1', // 甲烷泄漏报警
    'ncx08': '1', // 左侧断线报警
    'ncx09': '1', // 右侧断线报警
    'ncx10': '1', // 左侧振动报警
    'ncx11': '1', // 右侧振动报警
    'ncx12': '1', // 语音报警

    // 百瑞生-管网哨兵
    'brs4': '', // 浓度报警低阈值 值，%LEL
    'brs5': '', // 浓度报警高阈值 值，%LEL
    'brs7': '', // 低温阈值
    'brs8': '', // 高温阈值
    'brs11': '', // 传感器采集间隔 值，单位秒
    'brs12': '', // 采样深度
    'brs15': '', // 预热时间 值，单位秒
    'brs19': '1', // 防盗使能  1开启，0禁用
    'brs20': '1', // 振动监测 1开启，0禁用
    'brs28': '1', // 振动采样使能 1开启，0禁用
    'brs29': '', // 振动阈值1
    'brs30': '', // 振动阈值2
  }
}
const disabledBtn = ref(false)
// 初始化对话框
const isFirst = ref(true)
const initDialog = (dialogStatusValue: string, row: any) => {
  disabledInstruction.value = false
  dialogStatus.value = dialogStatusValue
  dialogFormVisible.value = true
  disabledBtn.value = false
  for (const i in instruction.value) {
    instruction.value[i] = false
  }
  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
    resetForm()
    dataFormRef.value?.resetFields()
    dataForm.value.operator = user.id
    dataForm.value.operatorName = user.name
    setTimeout(() => {
      isFirst.value = false
    })
  }
  else if (dialogStatus.value === 'addOther') {
    isFirst.value = true
    resetForm()
    dataFormRef.value?.resetFields()
    const data = JSON.parse($route.query.row as string)
    dataForm.value = data
    // 查询设备
    if (!dataForm.value.productId) {
      getDeviceListPage({ offset: 1, limit: 1, devCode: dataForm.value.devcode }).then(res => {
        if (res.data.rows.length) {
          setTimeout(() => {
            isFirst.value = true
            dataForm.value.productId = res.data.rows[0].productId
            dataForm.value.devCodeList = [dataForm.value.devcode]
            setTimeout(() => {
              isFirst.value = false
              handlerProduct(dataForm.value.productId, false)
            });
          }, 10)
        }
        else {
          setTimeout(() => {
            isFirst.value = false
          })
        }
      }).catch(() => {
        setTimeout(() => {
          isFirst.value = false
        })
      })
    }
    else {
      setTimeout(() => {
        isFirst.value = false
      })
    }
    setTimeout(() => {
      dataForm.value.devCodeList = [dataForm.value.devcode]
    }, 100)
    // dataForm.value.devcode = data.devcode
    // dataForm.value.deviceType = data.deviceType
    dataForm.value.operator = user.id
    dataForm.value.operatorName = user.name
  }
  else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
    dataForm.value = {
      ...JSON.parse(JSON.stringify(row)),
    }
    dataForm.value.devCodeList = [dataForm.value.devcode]
    deviceList.value = deviceAllList.value.filter((item: any) => item.productId === dataForm.value.productId)
    // 北京无线电
    if (dataForm.value.instructionTypeCustrom === 'bjwxd') {
      instruction.value.bjwxd = true
      // 解析指令回显
      if (dataForm.value.framecontent) {
        const framecontent = dataForm.value.framecontent.split(';').map((item: string) => ({ name: item.split(':')[0], value: item.split(':')[1] }))
        framecontent.forEach((item: { name: string, value: string }) => {
          dataForm.value[item.name] = item.value
        })
      }
    }

    // 北分麦哈克-管网哨兵
    else if (dataForm.value.instructionTypeCustrom === 'bfmhkGwsb') {
      instruction.value.bfmhkGwsb = true
      if (dataForm.value.framecontent) {
        const framecontent = JSON.parse(dataForm.value.framecontent)
        framecontent.forEach((item: { command: string, value: string }) => {
          dataForm.value[`mhk${item.command}`] = item.value
        })
      }
    }
    // 百瑞生-管网哨兵
    else if (dataForm.value.instructionTypeCustrom === 'brsGwsb') {
      instruction.value.brsGwsb = true
      if (dataForm.value.framecontent) {
        const framecontent = JSON.parse(dataForm.value.framecontent)
        dataForm.value.brs19 = '1'
        dataForm.value.brs20 = '1'
        dataForm.value.brs28 = '1'
        framecontent.forEach((item: { command: string, value: string }) => {
          dataForm.value[`brs${item.command}`] = item.value
        })
      }
    }
    // 诺成新-燃气智能警示桩
    else if (dataForm.value.instructionTypeCustrom === 'ncxRqznjsz') {
      instruction.value.ncxRqznjsz = true
      if (dataForm.value.framecontent) {
        const framecontent = JSON.parse(dataForm.value.framecontent)
        framecontent.forEach((item: { command: string, value: string }) => {
          if (item.command === 'time') {
            const value = item.value.split(',')
            value.forEach((item: string, index: number) => {
              dataForm.value[`ncx0${index + 1}`] = `${item.substring(0, 2)}:00`
            })
          }
          else if (item.command === 'length') {
            const value = item.value.split(',')
            value.forEach((item: string, index: number) => {
              dataForm.value[`ncx0${index + 3}`] = item
            })
          }
          else if (item.command === 'switch') {
            let result = []
            for (let i = 0; i < item.value.length; i++) {
              result.push(item.value[i])
            }
            result.forEach((item: string, index: number) => {
              dataForm.value[`ncx${index + 5 >= 10 ? '' : '0'}${index + 5}`] = item
            })
          }
        })
      }
    }
    setTimeout(() => {
      isFirst.value = false
    })
  }

}
defineExpose({
  initDialog,
})

// 新增数据
const createData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      let otherData = {} as { [key: string]: any }
      //  北京无线电-燃气终端
      if (instruction.value.bjwxd) {
        dataForm.value.framecontent = `reloadInterval:${dataForm.value.reloadInterval};collectInterval:${dataForm.value.collectInterval};uploadPeriod:${dataForm.value.uploadPeriod}`
        dataForm.value.framecontentDesc = `重传次数:${dataForm.value.reloadInterval}次;采集间隔:${dataForm.value.collectInterval}分;上传周期:${dataForm.value.uploadPeriod}分`
        otherData = JSON.parse(JSON.stringify(dataForm.value))
        for (const i in otherData) {
          // 清除其余字段
          if (i.includes('mhk') || i.includes('ncx') || i.includes('brs')) {
            otherData[i] = undefined
          }
        }
      }
      else {
        otherData.typeId = dataForm.value.deviceType
        otherData.productId = dataForm.value.productId
        otherData.devCodeList = dataForm.value.devCodeList
        otherData.productName = productList.value.filter(item => item.id === dataForm.value.productId)[0]?.name || ''
        // 整理不同产品的指令
        // 北分麦哈克-管网哨兵
        if (instruction.value.bfmhkGwsb) {
          const instructionMHK = []
          for (const i in dataForm.value) {
            if (i.includes('mhk') && String(dataForm.value[i])) {
              instructionMHK.push({
                command: i.replace('mhk', ''),
                value: dataForm.value[i]
              })
            }
          }
          otherData.commandConfigList = instructionMHK
        }
        // .诺成新-燃气智能警示桩
        else if (instruction.value.ncxRqznjsz) {
          const instructionNCX = []
          for (const i in dataForm.value) {
            if (i.includes('ncx')) {
              instructionNCX.push({
                command: i.replace('ncx', ''),
                value: dataForm.value[i]
              })
            }
          }
          const instructionNCXresult = []
          // 上报时间指令
          const instructionTime = ['01', '02']
          const time = instructionNCX.filter(item => instructionTime.includes(item.command)).map(item => item.value)
          instructionNCXresult.push({ command: 'time', value: time.map((item: string) => item.replace(':', '')).join() })
          // 侧线长度
          const instructionLength = ['03', '04']
          const length = instructionNCX.filter(item => instructionLength.includes(item.command)).map(item => item.value)
          instructionNCXresult.push({ command: 'length', value: length.join() })
          // 报警等
          const instructionSwitch = ['05', '06', '07', '08', '09', '10', '11', '12']
          const alarm = instructionNCX.filter(item => instructionSwitch.includes(item.command)).map(item => item.value)
          alarm.push('1')
          instructionNCXresult.push({ command: 'switch', value: alarm.join(',').replaceAll(',', '') })
          otherData.commandConfigList = instructionNCXresult
        }
        // 百瑞生-管网哨兵
        else if (instruction.value.brsGwsb) {
          const instructionBRS = []
          for (const i in dataForm.value) {
            if (i.includes('brs') && String(dataForm.value[i])) {
              instructionBRS.push({
                command: i.replace('brs', ''),
                value: dataForm.value[i]
              })
            }
          }
          otherData.commandConfigList = instructionBRS
          const ignore = ['19', '20', '28']
          if (otherData.commandConfigList.some((item) => ignore.includes(item.command) && String(item.value) === '1')) {
            otherData.commandConfigList = otherData.commandConfigList.filter((item) => {
              if (ignore.includes(item.command)) {
                if (String(item.value) === '1') {
                  return false
                }
                else {
                  return true
                }
              }
              else {
                return true
              }
            })
          }
        }
      }
      // console.log(otherData, 'otherData')
      disabledBtn.value = true;
      (instruction.value.bjwxd ? addInstruction(otherData) : addInstructionOther(otherData)).then((response) => {
        if (response.code === 200) {
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
          // 通知父组件刷新状态
          dialogFormVisible.value = false
          disabledBtn.value = false
          setTimeout(() => {
            emits('refresh')
          })
          if (dialogStatus.value === 'addOther') {
            $router.back()
          }
        }
      }).catch((_) => { // 异常情况，loading置为false
        disabledBtn.value = false
      })
    }
  })
}

// 修改数据
const updateData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      removeInstruction([dataForm.value.id]).then((res) => {
        dataForm.value.id = ''
        createData()
      })
    }
  })
}

// 保存数据
const saveData = () => {
  // dataForm.value.deviceTypeName = deviceTypeList.value[deviceTypeList.value.findIndex(citem => dataForm.value.deviceType === citem.value)]?.name
  // dataForm.value.deviceTypeName =
  dataForm.value.writetime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  if (dialogStatus.value === 'edit') {
    updateData()
  }
  else if (dialogStatus.value === 'add' || dialogStatus.value === 'addOther') {
    createData()
  }
}
const cancel = () => {
  dialogFormVisible.value = false
  if (dialogStatus.value === 'addOther') {
    $router.back()
  }
}

// 获取字典
const fetchDict = async () => {
  // 设备类型
  const res = await getDeviceTypeListPage({ offset: 1, limit: 99999 })
  deviceTypeList.value = res.data.rows.map((item: any) => ({
    name: item.typeName || '',
    id: item.id,
    value: item.id,
  }))
  // 产品
  getProductListPage({ offset: 1, limit: 99999 }).then((res) => {
    productList.value = res.data.rows.filter((item: any) => productConfig.value.some((citem: any) => item.manufacturerName.includes(citem.manufacturerName) && item.deviceTypeName.includes(citem.deviceName))).map((item: any) => ({
      ...item,
      name: `${item.productName}-${item.deviceModel}/${item.manufacturerName}`,
      id: item.id,
      value: item.id,
    }))
  })
  // 设备
  // 先从缓存中获取设备列表
  indexDB.getAll().then(allData => {
    if (allData.filter((item: any) => item.name === 'all-device-list').length) {
      deviceList.value = JSON.parse(allData.filter((item: any) => item.name === 'all-device-list')[0].data)
      deviceAllList.value = JSON.parse(JSON.stringify(deviceList.value))
    }
    else {
      getDeviceListPage({ offset: 1, limit: 99999 }).then((res) => {
        deviceList.value = res.data.rows.filter((item: any) => item.productId).map((item: any) => ({
          name: item.deviceName,
          id: item.devcode,
          value: item.devcode,
          deviceType: item.deviceType,
          productId: item.productId,
          position: item.position,
          tagNumber: item.tagNumber,
        })).filter((item: any) => item.productId && item.value)
        deviceAllList.value = JSON.parse(JSON.stringify(deviceList.value))
        indexDBHandler('all-device-list', JSON.stringify(deviceList.value))
      })
    }
  })
}
fetchDict()
// 禁用指令
const disabledInstruction = ref(false)
// 当前选中的产品
const currentProduct = ref<any>({})
const handlerProduct = (newVal: string, clear: boolean) => {
  dataForm.value.deviceType = productList.value.filter((item: any) => item.id === newVal)[0]?.deviceType || ''
  if (!dataForm.value.deviceType) {
    disabledInstruction.value = true
    ElMessage.warning('该设备不支持指令下发')
    return
  }
  disabledInstruction.value = false
  dataForm.value.deviceTypeName = productList.value.filter((item: any) => item.id === newVal)[0].deviceTypeName
  deviceList.value = deviceAllList.value.filter((item: any) => item.productId === newVal)
  if(clear) {
    console.log(123)
    dataForm.value.devCodeList = []
  }
  currentProduct.value = productList.value.filter((item: any) => item.id === newVal)[0]
  for (const i in instruction.value) {
    instruction.value[i] = false
  }
  const currentProductConfig = productConfig.value.filter((item: any) => currentProduct.value.deviceTypeName.includes(item.deviceName) && currentProduct.value.manufacturerName.includes(item.manufacturerName))
  if (currentProductConfig.length) {
    instruction.value[currentProductConfig[0].value] = true
  }
}
watch(() => dataForm.value.productId, (newVal) => {
  if (dialogStatus.value === 'detail' || isFirst.value) { return }
  if (newVal) {
    handlerProduct(newVal, true)
  }
  else {
    for (const i in instruction.value) {
      instruction.value[i] = false
    }
  }
}, {
  deep: true,
})
// watch(() => dataForm.value.devcode, (newVal) => {
//   if (dialogStatus.value === 'detail' || isFirst.value) { return }
//   if (newVal) {
//     dataForm.value.deviceType = deviceList.value.filter((item: any) => item.value === newVal)[0].deviceType
//     dataForm.value.deviceTypeName = deviceTypeList.value[deviceTypeList.value.findIndex(citem => dataForm.value.deviceType === citem.value)].name
//   }
// }, {
//   deep: true,
// })
const computeOptions = (val: any[]) => {
  return val.map((item: any) => ({ label: `${item.name}-${item.value}`, value: item.value }))
}


</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="160px"
      :disabled="dialogStatus === 'detail'">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="产品名称" prop="productId">
            <el-select v-model="dataForm.productId" :disabled="disabledInstruction || dialogStatus === 'addOther'"
              placeholder="产品名称" style="width: 100%;" clearable filterable>
              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="设备编号" prop="devCodeList">
            <!-- multiple -->
            <!-- <el-select v-model="dataForm.devCodeList" placeholder="设备编号" style="width: 100%;" clearable filterable
              multiple>
              <el-option v-for="item in deviceList" :key="item.id" :label="`${item.name}-${item.value}`"
                :value="item.value" />
            </el-select> -->
            <el-select-v2 v-model="dataForm.devCodeList" multiple :options="computeOptions(deviceList)"
              style="width: 100%;" clearable filterable :disabled="disabledInstruction || dialogStatus === 'addOther'">
            </el-select-v2>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <!-- 北京无线电-燃气终端 -->
        <template v-if="instruction.bjwxd">
          <el-col :span="12">
            <el-form-item label="采集间隔(min)" prop="collectInterval">
              <el-input v-model.trim="dataForm.collectInterval" type="number" placeholder="采集间隔" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传周期(min)" prop="uploadPeriod">
              <el-input v-model.trim="dataForm.uploadPeriod" type="number" placeholder="上传周期" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重传次数(次)" prop="reloadInterval">
              <el-input v-model.trim="dataForm.reloadInterval" type="number" placeholder="重传次数" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
        </template>
        <!-- 百瑞生-管网哨兵 -->
        <template v-if="instruction.brsGwsb">
          <el-col :span="12">
            <el-form-item label="报警低阈值(%LEL)" prop="brs4">
              <el-input v-model.trim="dataForm.brs4" type="number" placeholder="报警低阈值(%LEL)" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报警高阈值(%LEL)" prop="brs5">
              <el-input v-model.trim="dataForm.brs5" type="number" placeholder="报警高阈值(%LEL)" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="低温阈值" prop="brs7">
              <el-input v-model.trim="dataForm.brs7" type="number" placeholder="低温阈值" style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高温阈值" prop="brs8">
              <el-input v-model.trim="dataForm.brs8" type="number" placeholder="高温阈值" style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器采集间隔(s)" prop="brs11">
              <el-input v-model.trim="dataForm.brs11" type="number" placeholder="传感器采集间隔" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样深度" prop="brs12">
              <el-input v-model.trim="dataForm.brs12" type="number" placeholder="采样深度" style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预热时间(s)" prop="brs15">
              <el-input v-model.trim="dataForm.brs15" type="number" placeholder="预热时间" style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="防盗使能" prop="brs19">
              <el-switch v-model="dataForm.brs19" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="振动监测" prop="brs20">
              <el-switch v-model="dataForm.brs20" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="振动采样使能" prop="brs28">
              <el-switch v-model="dataForm.brs28" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="振动阈值1" prop="brs29">
              <el-input v-model.trim="dataForm.brs29" type="number" placeholder="振动阈值1" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="振动阈值2" prop="brs30">
              <el-input v-model.trim="dataForm.brs30" type="number" placeholder="振动阈值1" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
        </template>
        <!-- 北分麦哈克-管网哨兵 -->
        <template v-if="instruction.bfmhkGwsb">
          <el-col :span="12">
            <el-form-item label="浓度低报值" prop="mhk01">
              <el-input v-model.trim="dataForm.mhk01" type="number" placeholder="浓度低报值%LEL(5-25)" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="浓度高报值" prop="mhk02">
              <el-input v-model.trim="dataForm.mhk02" disabled type="number" placeholder="不可修改(国标要求)"
                style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备采样周期(min)" prop="mhk03">
              <el-input v-model.trim="dataForm.mhk03" type="number" placeholder="设备采样周期(分钟)(1-30)" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传采样周期(min)" prop="mhk04">
              <el-input v-model.trim="dataForm.mhk04" type="number" placeholder="上传采样周期(分钟)(1-1440)"
                style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="GPS告警距离(m)" prop="mhk05">
              <el-input v-model.trim="dataForm.mhk05" type="number" placeholder="GPS告警距离(m)(1-65535)"
                style="width: 100%;" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确定位置" prop="mhk06">
              <el-switch v-model="dataForm.mhk06" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="清除位置" prop="mhk07">
              <el-switch v-model="dataForm.mhk07" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重启设备" prop="mhk08">
              <el-switch v-model="dataForm.mhk08" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
        </template>
        <!-- 诺成新-燃气智能警示桩 -->
        <template v-if="instruction.ncxRqznjsz">
          <el-col :span="12">
            <el-form-item label="第一次上报时间" prop="ncx01">
              <el-time-select v-model="dataForm.ncx01" style="width: 100%;" start="01:00" step="01:00" end="23:00"
                placeholder="第一次上报时间" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="第二次上报时间" prop="ncx02">
              <el-time-select v-model="dataForm.ncx02" style="width: 100%;" start="01:00" step="01:00" end="23:00"
                placeholder="第二次上报时间" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="左侧线长度(m)" prop="ncx03">
              <el-input v-model.trim="dataForm.ncx03" type="number" placeholder="左侧线长度(m)" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="右侧线长度(m)" prop="ncx04">
              <el-input v-model.trim="dataForm.ncx04" type="number" placeholder="右侧线长度(m)" style="width: 100%;"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="倾斜报警" prop="ncx05">
              <el-switch v-model="dataForm.ncx05" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="破坏报警" prop="ncx06">
              <el-switch v-model="dataForm.ncx06" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲烷泄漏报警" prop="ncx07">
              <el-switch v-model="dataForm.ncx07" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="语音报警" prop="ncx12">
              <el-switch v-model="dataForm.ncx12" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="左侧断线报警" prop="ncx08">
              <el-switch v-model="dataForm.ncx08" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="右侧断线报警" prop="ncx09">
              <el-switch v-model="dataForm.ncx09" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="左侧振动报警" prop="ncx10">
              <el-switch v-model="dataForm.ncx10" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="右侧振动报警" prop="ncx11">
              <el-switch v-model="dataForm.ncx11" active-text="是" inactive-text="否" active-value="1"
                inactive-value="0" />
            </el-form-item>
          </el-col>
        </template>
        <el-col v-if="instruction.bjwxd" :span="12">
          <el-form-item label="操作人" prop="operatorName">
            <el-input v-model.trim="dataForm.operatorName" type="text" style="width: 100%;" disabled clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="instruction.bjwxd" :gutter="24">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model.trim="dataForm.maker" type="textarea" :rows="2" paceholder="备注" style="width: 100%;"
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div v-if="dialogStatus !== 'detail'" class="dialog-footer">
        <el-button v-if="!disabledInstruction" v-loading="disabledBtn" :disabled="disabledBtn" type="primary"
          @click="saveData">
          确认
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
      <div v-else class="dialog-footer">
        <el-button :loading="disabledBtn" :disabled="disabledBtn" type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>