<template>
  <div>
    <!-- 一般告警 -->
    <div class="scroll-box">
      <div class="scroll-content" ref="animatedRef"></div>
    </div>
    <!-- 紧急告警 -->
    <!-- <el-drawer
      class="urgent"
      modal-class="drawer"
      v-model="drawer"
      :draggable="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="紧急告警"
      :before-close="handleClose"
    > -->
    <el-dialog v-model="drawer" draggable :modal="false" :modal-penetrable="true" :close-on-click-modal="false"
      :close-on-press-escape="false" title="紧急告警" :before-close="handleClose">

      <template #header>
        <div style="display: flex; ">
          <span>紧急告警</span>
          <Promotion style="width: 15px; margin-left: 10px;  " />
        </div>
      </template>


      <div :class="urgentList.length > 0 ? 'bg-red' : ''">
        <div class="drawer-but">
          <el-button size="small" type="primary" @click="totalProcessing(1)" :icon="Check">确认</el-button>
          <el-button size="small" type="primary" @click="totalProcessing(2)" :icon="Check">一键确认</el-button>
        </div>
        <div class="messageBox">
          <div class="mesModule" v-for="(item, index) in urgentList" :key="index">
            <el-checkbox v-model="item.checked" value="" size="large" />
            <span class="iconfont icon-gaojing" :class="item.checked ? 'blue' : 'animate-flash-red'"></span>
            <div :style="{ color: item.checked ? '#0a73ff' : '#ff0000' }" style="font-weight: 650"
              @click="handleCurrentChange(item)">
              <div>{{ item.timeid }}.{{ item.ms }}</div>
              <p class="mt5">
                {{ item.bdname }} {{ item.pointname }}发生{{
                  filteWavetype(item.wavetype)
                }}事件,事件残余电压{{
                  Math.floor(item.eventvalue * 10000) / 100
                }}%,持续时间：{{ item.persisttime }}s;
              </p>
              <p class="mt5" style="display: flex; font-size: 14px">
                <span style="width: 75px" :style="{ color: item.checked ? '#0a73ff' : '#ffc107' }">
                  影响范围： </span><span style="flex: 1" :style="{ color: item.checked ? '#0a73ff' : '#ffc107' }">{{
                    item.objName
                  }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- </el-drawer> -->

    <audio ref="audioRef" id="audioId" :src="mp3Src" loop controls hidden="true"></audio>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted, nextTick } from "vue";
import { Check } from "@element-plus/icons-vue";
import { speak } from "@/utils/index";
import { noDealEventList, lookEvent } from "@/api/statistics/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { Promotion } from "@element-plus/icons-vue";

const store = useStore();
const emit = defineEmits(["close", "handleCurrentChange"]);
const drawer = ref(false);
const broadcast: any = ref([]);
const multipleSelection: any = ref();
const urgentList: any = ref([]);
const multipleTableRef = ref();
const key: any = ref(0);
const gradeValue: any = ref(0);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
const mp3Src: any = new URL(`@/assets/mp3/9578.mp3`, import.meta.url);
const audioRef: any = ref(null);
const updateData = (row: any) => {


  if (!row.dept.split(",").includes(store.state.deptId)) return;
  broadcast.value.push(row);
  // // 语音播报数据
  // console.log(
  //   "🚀 ~ updateData ~ store.state.seriousNotice == 1 || store.state.normalNotic == 1:",
  //   store.state.seriousNotice == 1,
  //   store.state.normalNotic == 1,
  //   key.value,
  //   row
  // );

  // // 语音播报
  // if (store.state.normalNotic == 1) {
  //   if (
  //     broadcast.value[key.value].eventvalue >= 0.5 &&
  //     broadcast.value[key.value].eventvalue < 0.9
  //   ) {
  //     speakBrowser(broadcast.value[key.value]);
  //   }
  // }
  if (store.state.seriousNotice == 1) {
    speakBrowser(broadcast.value[key.value]);
  }
  key.value += 1;

  urgentList.value.unshift({ ...row, checked: false });
  drawer.value = true;
  // }
};
const openDrawer = () => {
  drawer.value = true;
};
const openSignificant = () => { };
const animatedRef = ref();

// 语音播报
const speakBrowser = (item: any) => {
  if (store.state.voiceType == 2) {
    // setTimeout(() => {
    //   audioRef.value && audioRef.value.play(); //播放
    // }, 500);

    audioRef.value.play(); //没有就播放
    // audioRef.value.pause()	//暂停
  } else if (store.state.voiceType == 1) {
    speak(
      `　　　　　　${item.timeid}${item.bdname}${item.pointname
      }发生${filteWavetype(item.wavetype)}事件,事件特征幅值${Math.floor(
        item.eventvalue * 100
      )}%,持续时间：${item.persisttime}秒`,
      () => {
        // key.value += 1;
      }
    );
  }
};
// 确认总数据
const totalProcessing = (number: number, id?: string) => {
  let list: any = [];
  if (number == 0) {
    //总数据确认
    if (multipleSelection.value == undefined) {
      return ElMessage.warning(`请选择需要确认的事件`);
    }
    list = multipleSelection.value.map((item: any) => item.eventdetail_index);
  } else if (number == 1) {
    //紧急告警确认
    list = urgentList.value
      .filter((item: any) => item.checked == true)
      .map((item: any) => item.eventdetail_index);
  } else if (number == 2) {
    //紧急告警全部确认
    list = urgentList.value.map((item: any) => item.eventdetail_index);
  } else if (number == 3) {
    list = [id];
  }
  if (list.length == 0) {
    return ElMessage.warning(`请选择需要确认的事件`);
  }

  ElMessageBox.confirm("请确认是否确认", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      lookEvent(list).then((res) => {
        list.forEach((id: any) => {
          urgentList.value = urgentList.value.filter(
            (item: any) => item.eventdetail_index != id
          );
          broadcast.value = broadcast.value.filter(
            (item: any) => item.eventdetail_index != id
          );
        });
        if (broadcast.value.length == 0) {
          audioRef.value.pause();
        }
        key.value -= list.length;
        if (urgentList.value.length == 0) {
          drawer.value = false;
        }
        return ElMessage({
          message: "确认成功",
          type: "success",
        });
      });
    })
    .catch(() => { });
};

// 过滤数据
const filteWavetype = (wavetype: string) => {
  switch (wavetype + "") {
    case "0":
      return "扰动";
    case "1":
      return "暂降";
    case "2":
      return "暂升";
    case "3":
      return "中断";
    case "4":
      return "其他";
    case "5":
      return "录波";
  }
};

const init = () => {
  noDealEventList({
    deptId: store.state.deptId,
    searchBeginTime: store.state.timeValue[0],
    searchEndTime: store.state.timeValue[1],
    eventtype: 0,
  }).then((res) => {
    res.data.forEach((item: any) => {
      // if (item.eventvalue < 0.5) {
      urgentList.value.unshift({ ...item, checked: false });
    });
    broadcast.value = res.data;
    key.value = res.data.length;
    if (urgentList.value.length > 0) {
      drawer.value = true;
    }
  });
};
const handleCurrentChange = (e: any) => {
  emit("handleCurrentChange", e.bdname);
};
// 关闭事件
const handleClose = (done: (cancel?: boolean) => void) => {
  if (urgentList.value.length > 0) {
    return ElMessage.warning(`请优先确认告警事件。`);
  } else {
    done();
  }
};
onMounted(() => {
  setTimeout(() => {
    init();
  }, 1000);
});

defineExpose({
  updateData,
  urgentList,
  broadcast,
  openDrawer,
  openSignificant,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.react-right {
  width: 500px !important;
}

.drawer-but {
  display: flex;
  justify-content: end;
  padding: 10px 10px 0 0;
}

.gradeInput {
  display: flex;
  justify-content: end;
  color: #fff;
  margin-bottom: 10px;
}

:deep(.el-dialog__header) {
  margin-bottom: 0px;
  border-bottom: 1px solid #fff;
  padding: 10px;
  color: #fff;
  background: #9f1700;
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.urgent) {
  width: 100% !important;
  height: 910px;
}

:deep(.el-dialog) {
  // border: 1px solid #ff0000;

  width: 25%;
  height: 920px;
  top: 0%;
  overflow: hidden;
  left: 37% !important;

  .el-dialog {
    border: 1px solid #ff0000;
    height: 910px !important;
  }

  .messageBox {
    margin-top: 10px;
    font-size: 12px;
    height: 832px;
    padding: 0 10px;

    div {
      font-size: 16px;
      cursor: pointer;
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      /* 滑块背景颜色 */
      border-radius: 5px;
      /* 滑块圆角 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #555;
      /* 悬停时滑块背景颜色 */
    }

    overflow-y: auto;

    .mesModule {
      margin-bottom: 10px;
      background-color: #00000085;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      align-items: center;

      p {
        margin-left: 15px;
      }
    }
  }
}

.iconfont {
  font-size: 24px !important;
  color: #ff0000;
  margin-right: 5px;
}

.blue {
  color: #0a73ff;
}
</style>
