<template>
  <teleport to="body">
    <transition name="emergency-modal">
      <div class="modal-mask" @click="visible = false" v-if="visible">
        <div class="emergency-modal">
          <div class="glow"></div>
          <div class="modal-header">
            <div class="warning-icon">⚠️</div>
            <h2>紧急警报！</h2>
          </div>
          <div class="alarmTable">
            <div class="alarmTable-item">
              <div class="alarmTable-item-text">设备号</div>
              <div class="alarmTable-item-text">报警类型</div>
              <div class="alarmTable-item-text">佩戴者</div>
              <div class="alarmTable-item-text">触发时间</div>
              <div class="alarmTable-item-text">操作</div>
            </div>
            <div class="alarmTable-content scrollbar">
              <div class="alarmTable-item" v-for="(item, index) in warningList" :key="index">
                <div class="alarmTable-item-text">{{ item.deviceId }}</div>
                <div class="alarmTable-item-text">{{ warnTypeEnum[item.type] }}</div>
                <div class="alarmTable-item-text">{{ item.user }}</div>
                <div class="alarmTable-item-text">{{ item.createTime }}</div>
                <div class="alarmTable-item-text" @click="toIncidentDispose(item.warnId)">去处理</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

interface TWarning {
  deviceId: string;
  useName: string;
  createTime: string;
  type: number;
  user: number;
  warnId: string;
}

enum warnTypeEnum {
  "SOS告警",
  "围栏告警",
  "破坏告警",
  "低电告警",
  "心率告警",
  "血氧告警",
  "体温告警",
}
const router = useRouter();
const visible = ref(false);
const warningList = ref<TWarning[]>([]);
defineExpose({ visible, warningList });

const toIncidentDispose = (id: string) => {
  router.push({
    path: "/incidentDispose",
    query: { id },
  });
  warningList.value = [];
  visible.value = false;
};
</script>

<style scoped lang="less">
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.alarmTable {
  width: 100%;
  max-height: 475px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  flex-direction: column;
  .alarmTable-item {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #cf8585;
    display: flex;
    .alarmTable-item-text {
      flex: 1;
      color: #ff4444;
      flex-shrink: 0;
      text-align: center;
      &:nth-child(2) {
        width: 50px;
      }
    }
  }
  .alarmTable-content {
    flex: 1;
    overflow: auto;
  }
}

.emergency-modal {
  position: relative;
  width: 800px;
  padding: 2rem;
  background: #2a0a0a;
  border-radius: 12px;
  border: 2px solid #ff4444;
  box-shadow: 0 0 40px rgba(255, 68, 68, 0.3);
  transform-origin: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.3) 0%, rgba(255, 68, 68, 0) 70%);
  animation: glow-pulse 2s infinite;
}

.modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.warning-icon {
  font-size: 3rem;
  margin-right: 1rem;
  animation: shake 0.8s ease infinite;
}

h2 {
  color: #ff4444;
  font-size: 1.8rem;
  margin: 0;
}

.modal-content {
  color: #ffaaaa;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.emergency-button {
  position: relative;
  padding: 1rem 2rem;
  background: linear-gradient(45deg, #ff4444, #ff0000);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s;
}

.button-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.2) 50%, transparent 75%);
  animation: slide 1.5s infinite;
}

.emergency-button:hover {
  transform: scale(1.05);
}

.emergency-button:active {
  transform: scale(0.95);
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glow-pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes slide {
  to {
    left: 100%;
  }
}

.emergency-modal-enter-active {
  animation: emergency-modal-in 0.3s;
}

.emergency-modal-leave-active {
  animation: emergency-modal-in 0.3s reverse;
}

@keyframes emergency-modal-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.emergency-pulse {
  animation: emergency-pulse 1.5s infinite;
}
</style>
