<template>
  <el-dialog v-model="dialogVisible" title="报警设置" width="1200px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close draggable class="alarm-dialog-high">
    <div style="margin-bottom: 16px; display: flex; justify-content: flex-end; gap: 8px;">
      <el-button type="primary" @click="setAllAlarmStatus(true)">一键开启</el-button>
      <el-button type="warning" @click="setAllAlarmStatus(false)">一键关闭</el-button>
    </div>
    <div class="alarm-table-wrapper">
      <el-table :data="state.alarmSettingList" border style="width: 100%;" max-height="550px" :header-cell-style="{background:'#fafafa'}">
        <el-table-column label="序号" width="60" align="center">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="epDefName" label="在线数据" min-width="120" align="center" />
        <el-table-column prop="epDefAlias" label="OPC名称" min-width="120" align="center">
          <template #default="{ row }">
            <template v-if="row.needConfig">
              <el-select v-model="row.epDefAlias" placeholder="-" style="width: 100%" filterable>
                <el-option v-for="item in opcNameOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="warningLowerLimit" label="报警下限值" min-width="100" align="center">
          <template #default="{ row }">
            <el-input v-model="row.warningLowerLimit" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="warningLowerBuffer" label="下限延时/s" min-width="100" align="center">
          <template #default="{ row }">
            <el-input v-model="row.warningLowerBuffer" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="warningUpperLimit" label="报警上限值" min-width="100" align="center">
          <template #default="{ row }">
            <el-input v-model="row.warningUpperLimit" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="warningUpperBuffer" label="上限延时/s" min-width="100" align="center">
          <template #default="{ row }">
            <el-input v-model="row.warningUpperBuffer" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="计量单位" min-width="80" align="center">
          <template #default="{ row }">
            {{ row.epDefName === 'Pressure' ? state.pressureUnit : row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="isEnable" label="报警状态" min-width="100" align="center">
          <template #default="{ row }">
            <el-switch v-model="row.isEnable" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="alarm-dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveAlarmConfig">保存</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { ReactorEPSettingApi } from '/@/api/admin/ReactorEPSettingApi'
import { ReactorEPSetting } from '/@/api/types/reactorEPSetting'
import { ReactorDto } from '/@/api/types/reactorType'


defineOptions({ name: 'AlarmSettingForm' })

const dialogVisible = ref(false)
const state = reactive({
  alarmSettingList: [] as ReactorEPSetting[],
  pressureUnit: ''
})

const opcNameOptions = ['MFC1', 'MFC2', 'MFC3', 'MFC4', 'MFC5', 'MFC6']

function setAllAlarmStatus(status: boolean) {
  state.alarmSettingList.forEach(item => item.isEnable = status)
}

async function saveAlarmConfig() {
  const res = await new ReactorEPSettingApi().batchUpdate(state.alarmSettingList)
  if (res.success) {
    ElMessage.success('报警配置已保存')
    dialogVisible.value = false
  }
}

async function open(reactor: ReactorDto) {

  console.log("Reactor", reactor.pressureUnit)
  await getAlarmSettingList(reactor.id!)
  state.pressureUnit = reactor.pressureUnit!
  dialogVisible.value = true
}

const getAlarmSettingList = async (id: number) => {
  const res = await new ReactorEPSettingApi().getListByEquReactor({ equReactorId: id })
  state.alarmSettingList = res.data
}

defineExpose({ open })
</script>

<style scoped>
.alarm-table-wrapper {
  max-height: 600px;
  overflow: auto;
}
.alarm-dialog-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 16px 0 0 0;
  text-align: right;
  z-index: 10;
}
</style> 