<template>
    <el-dialog
            v-model="alertShowFlag"
            :title="title"
            width="30%"
            align-center
            class="alert-dialog-box"
    >
        <div class="alert-item-text">来源: {{ currAlert.device.deviceType }}</div>
        <div class="alert-item-text">设备: {{ currAlert.device.deviceName }} <span @click="locateDevice"
                                                                                   style="cursor: pointer">定位</span>
        </div>
        <div class="alert-item-text" :class="'level-' + currAlert.level">等级: {{ level[currAlert.level] }}</div>
        <div class="alert-item-texts">{{ currAlert.message }}</div>
        <!--    <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="alertShowFlag = false">
                  确定
                </el-button>
              </span>
            </template>-->
    </el-dialog>
</template>

<script>
import {onMounted, computed} from 'vue'
import alertModel from '@/components/ui/model/alert'
import globalEventManager from '@/utils/globalEvent'

export default {
    name: "kfAlertDialog",
    props: {
        props: {
            type: Object,
            default: () => {
            }
        }
    },
    setup(props) {
        onMounted(() => {
        })

        const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
        const level = ["普通", "紧急", "严重", "危险"];

        const title = computed(() => {
            let currAlert = alertModel.currAlert.value;
            if (currAlert?.alertTimeObj) {
                return `${currAlert.title} ${currAlert.alertTimeObj.getFullYear()}/${currAlert.alertTimeObj.getMonth() + 1}/${currAlert.alertTimeObj.getDate()} 星期${weekDays[currAlert.alertTimeObj.getDay()]} ${currAlert.alertTimeObj.getHours()}:${currAlert.alertTimeObj.getMinutes()}:${currAlert.alertTimeObj.getSeconds()}`
            } else {
                return "";
            }
        })

        const locateDevice = () => {
            if (alertModel.currAlert.value.device != null) {
                globalEventManager.issueEvent("/locate_device", {deviceId: alertModel.currAlert.value.device.deviceId});
            }
        }

        return {
            alertShowFlag: alertModel.alertShowFlag,
            currAlert: alertModel.currAlert,
            title,
            locateDevice,
            level
        }
    }
}
</script>

<style lang="scss">
.level-0 {
  color: #00ff00;
}

.level-1 {
  color: #ffff00;
}

.level-2 {
  color: #FFA500;
}

.level-3 {
  color: #ff0000;
}

.alert-dialog-box.el-dialog {
  .el-dialog__header {
    border-bottom: none;
    background: #303030;
  }

  .el-dialog__body {
    border-top: none;
    background: #303030;
    padding: 20px;
    gap: 5px;
    display: flex;
    flex-direction: column;
  }
}

.alert-item-text {
  height: 30px;
  font-size: 14px;
  color: #aaa;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.alert-item-texts {
  max-height: 200px;
  min-height: 30px;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  display: flex;
  font-size: 14px;
  color: #fff;
}
</style>