<template>
  <!-- 告警服务 实时告警 -->
  <div class="publicContainer realAlarmSS">
    <el-form :model="pagParms" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="告警站点" prop="dataType">
        <el-select clearable filterable v-model="pagParms.stCode" placeholder="请选择">
          <el-option v-for="dict in rtuSiteInfo" :key="dict.stCode" :label="dict.stName" :value="dict.stCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警级别" prop="warnLevel">
        <el-select clearable v-model="pagParms.warnLevel" placeholder="请选择">
          <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange" max-height="620">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column label="告警站点" prop="stName" show-overflow-tooltip />
      <el-table-column label="告警类型" prop="warnType">
        <template #default="scope">
          <span>{{ getChangeType(scope.row.warnType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="告警级别" prop="warnLevel">
        <template #default="{ row }">
          <span>{{ row.warnLevel == 'warn' ? '告警 ' : '预警 ' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="告警因子" prop="warnFactorName" show-overflow-tooltip />
      <el-table-column label="监测值" prop="warnFactorValueName" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ row.warnFactorValueName }}</span>
          <!-- <span>{{ row.warnFactorValueName.substring(1, row.warnFactorValueName.length - 1) }}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="告警公式" prop="warnFormulaName"> </el-table-column>
      <el-table-column label="时间阈值（分钟)" prop="timeThreshold"> </el-table-column>
      <el-table-column label="告警时间" prop="warnDatetime" width="180">
        <template #default="scope">
          <span>{{ scope.row.warnDatetime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="" width="150">
        <template #default="scope">
          <el-button link icon="View" type="primary" @click="handleWarn(scope.row)">发送报警通知</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pagParms.pageNum"
      v-model:limit="pagParms.pageSize"
      @pagination="searchData"
    />

    <!-- 通知提醒弹窗 -->
    <el-dialog title="通知提醒" v-model="dialogShowTZ" width="600px" append-to-body>
      <el-form ref="formRefTZ" :model="formDataTZ" :rules="rulesFormTZ" label-width="120px" class="publicForm">
        <el-form-item label="被通知人" prop="userIdArray">
          <el-select v-model="formDataTZ.userIdArray" multiple clearable placeholder="请选择被通知人">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>

        <el-form-item label="通知人电话:" prop="phone">
          <el-input type="text" v-model="formDataTZ.phone" placeholder="请输入通知人电话" clearable maxlength="11" />
        </el-form-item>
        <!-- <el-form-item label="通知状态" prop="msgState">
          <el-select v-model="formDataTZ.msgState" placeholder="请选择通知状态">
            <el-option v-for="item in infoStaticList" :key="item.id" :label="item.staticLabel" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="通知消息" prop="noticeMsg">
          <el-input type="textarea" v-model="formDataTZ.noticeMsg" placeholder="请输入通知消息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="dialogShowTZ = false">取 消</el-button>
          <el-button type="primary" @click="submitFormTZ">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="realAlarm">
import { rtuWarnConfigPage } from '@/api/dataAnalysis/realAlarm';
import { rtuSiteInfoList } from '@/api/dataAnalysis/AlertService';
import { reactive } from 'vue';
import { projectNoticeAdd } from '@/api/publicService/index';
import { pageUser } from '@/api/system/user';
import bus from '@/utils/mitt';

const props = defineProps({
  checkedKey: String,
});
const userList = ref([]);
const dialogShowTZ = ref(false);
const formDataTZ = ref({
  fileList: [],
  msgState: '1',
});
const rulesFormTZ = ref({
  userIdArray: [{ required: true, message: '请选择被通知人', trigger: 'blur' }],
  msgState: [{ required: true, message: '请选择通知状态', trigger: 'blur' }],
  noticeMsg: [{ required: true, message: '请输入通知消息', trigger: 'blur' }],
  phone: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
      required: true,
    },
  ],
});
const { proxy } = getCurrentInstance();
const showSearch = ref(true);
const tableData = ref([]);
const tableLoading = ref(false);
const total = ref(0);
const dataTypes = reactive([
  { label: '告警 ', value: 'warn ' },
  { label: '预警  ', value: 'early_warn' },
]);
const rtuSiteInfo = ref([]);
const pagParms = ref({ warnType: '', stCode: '', warnLevel: '', pageSize: 10, pageNum: 1 });
// 获取站点
async function getSiteSelectListM() {
  let { data } = await rtuSiteInfoList();
  rtuSiteInfo.value = data;
}
//分页搜索
async function searchData() {
  tableLoading.value = true;
  let params = { ...pagParms.value };
  let { data, total: totals } = await rtuWarnConfigPage(params);
  tableLoading.value = false;
  tableData.value = data;
  total.value = totals;
}

const typeList = [
  { dictValue: 'water_level', dictLabel: '水位' },
  { dictValue: 'flow', dictLabel: '流量' },
  { dictValue: 'rain', dictLabel: '降雨 ' },
  { dictValue: 'quality', dictLabel: '水质 ' },
  { dictValue: 'other', dictLabel: '其它 ' },
];
function getChangeType(e) {
  for (var i = 0; i < typeList.length; i++) {
    if (typeList[i].dictValue == e) {
      //dictValue，dictLabel保持和上面定义一致
      return typeList[i].dictLabel;
    }
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  pagParms.value.pageNum = 1;
  searchData();
}

/** 重置按钮操作 */
function resetQuery() {
  pagParms.value.stCode = '';
  pagParms.value.warnLevel = '';
  searchData();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 发送报警(应标)
function handleWarn(row) {
  dialogShowTZ.value = true;
}
function submitFormTZ() {
  proxy.$refs['formRefTZ'].validate(valid => {
    if (valid) {
      projectNoticeAdd(formDataTZ.value).then(response => {
        proxy.$modal.msgSuccess('通知成功');
        dialogShowTZ.value = false;
        bus.emit('Refresh');
      });
    }
  });
}

/** 搜索用户列表 */
function getList() {
  pageUser().then(res => {
    userList.value = res.data || [];
    userList.value.map(item => {
      item.userId = String(item.userId);
    });
  });
}

// 初始化
onMounted(() => {
  getList();
  getSiteSelectListM();
  searchData();
});
</script>
<style lang="scss" scoped></style>