<!--报警提醒弹窗-->
<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="25%" custom-class="warning-dialog" append-to-body
    :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" @close="cancel">
    <div class="dialog-container">
      <div class="right-div">
        <div><span class="label">报警设备: </span> <span class="value">{{ alarm.deviceNo }}</span></div>
        <div><span class="label">报警值: </span> <span class="value">{{ alarm.value }} ppm</span></div>
        <!-- <div v-show="alarm.deviceNo"><span class="label">设备编号: </span> <span class="value">{{ alarm.deviceNo }}</span> -->
        <!-- </div> -->
        <!-- <div><span class="label">报警等级: </span> <span class="value">{{ alarm.level }}</span></div> -->
        <!-- <div><span class="label">报警分类: </span> <span class="value">{{ alarm.typeName }}</span></div> -->
        <div><span class="label">报警内容: </span> <span class="value">{{ alarm.message }}</span></div>
        <div><span class="label">报警时间: </span> <span class="value">{{ alarm.alarmTime }}</span></div>
        <div><span class="label">报警状态: </span> <span class="value">正在报警</span></div>
      </div>
    </div>
    <!-- <div class="btn-div">
      <el-button type="danger" @click="handleAlarm">
        查看
      </el-button>
      <el-button type="danger" @click="cancel">
        忽略
      </el-button>
    </div> -->
  </el-dialog>
</template>

<script>
import { getSearchLastDayTime } from '@/utils/dateutils'
export default {
  name: 'AlarmInfoDialog',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      title: '报警详情', // 表头显示标题
      alarm: {
        deviceName: '--',
        typeName: '--',
        level: '--',
        system: '--',
        content: '--',
        alarmTime: '--',
        cancelTime: '--'
      },
      isHidden: false, // 页面是否被切走
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function (alarm) {
      this.dialogFormVisible = true
      this.alarm = alarm
      alarm.alarmTime = getSearchLastDayTime()[1] || ''
      // 播放音效
      if (!this.isHidden) {
        this.playAudio()
      }
      else {
        this.pauseAudio()
      }
      setTimeout(() => {
        this.cancel()
      }, 1000 * 5)
    }, // 处理报警
    handleAlarm() {
      this.dialogFormVisible = false
      this.pauseAudio()
      this.$router.push({
        path: '/alarmNow',
        // query: { refresh: true }
      })
    }, // 忽略
    cancel() {
      console.log('关闭报警弹窗')
      this.pauseAudio()
      this.dialogFormVisible = false
    },
    handleTabVisibility() {
      if (document.visibilityState === 'visible') {
        console.log('页面被切回来,alarmDialog')
        this.isHidden = false
        // 执行当Tab回到前台时的逻辑
      } else if (document.visibilityState === 'hidden') {
        console.log('页面被切走,alarmDialog')
        this.isHidden = true
      }
    }
  },
  mounted() {
    document.addEventListener('visibilitychange', this.handleTabVisibility)
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep(.el-dialog__title) {
  color: #fff;
  font-weight: 700;
  padding-left: 10px;
}

.dialog-container {
  display: flex;
  line-height: 2;
  align-items: center;
  margin-bottom: 10px;
  color: #fff;

  .left-div {
    width: 30%;
    text-align: center;
  }

  .right-div {
    margin-left: 30px;
    flex: 1;
    font-size: 18px;

    .label {
      font-weight: 700;
    }

    .value {
      margin-left: 10px;
      color: #fcfcfc;
    }
  }
}

.btn-div {
  margin-bottom: 10px;
  text-align: center;
}
</style>

<style>
.warning-dialog {
  background-color: #00000000;
  background-image: url('./../assets/global_images/1级.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  opacity: 0.9;
}
</style>