<template>
  <div>

    <!-- "详情"弹出框 -->
    <EventDetailDialog  :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName"
      @update:value="handleDialogClose"  />

  </div>
</template>

<script>
import moment from "moment";
import Cookies from 'js-cookie'

import request from "@/utils/request";
import { WarningType as warningTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js"
import { param } from "../../../utils";

export default {
  name: "WarningNotify",
  props: {
   
  },
  components: {
  },
  provide() {
    return {
      
    }
  },
  data() {
    return {
      notifications: [],
      notifyIndex: 0,
      activeName: '-1',
      eventDetailDialogVisible: false,
      detailDialogFormData: {},
    }
  },
  computed: {
    
  },
  watch: {
    
  },
  methods: {
    //点击事件回调
    closeNotify(para) {
      // let type = para.type;
      this.notifications[para.index].close();
    },
    showNotify(para){
      let _this = this;
      let obj = {};
      if( para.subEvent == "0"){
        let eventType = ["trafficAccident", "vehicleBroken", "trafficControl", "trafficJam", "illegalVehicle", "barrierClear", "construction", "serviceAreaAbnormal", "equipmentTrouble", "abnormalWeather", "otherEvent"];
        obj = {
          content: para.content.content,
          time:para.content.event.occurrenceTime,
          type: eventType[para.content.event.eventType*1-1],
          level: "danger",
          duration: 0
        }
      } else if(para.subEvent === '1'){
        obj = {
          content: para.content.content,
          time:para.content.event.warningTime,
          type: "signal",
          level: "info",
          duration: 4000 
        }
      } else if(para.subEvent === 'trafficFlowDataEarlyWarning'){
        obj = {
          content: para.content.content,
          time:'',
          type: "trafficJam",
          level: "warning",
          duration: 4000 
        }
      } else if(para.subEvent === '3'){
        para.content.content = para.content.earlyWorningContent
        obj = {
          content: para.content.earlyWorningContent,
          time:'',
          type: "abnormalWeather",
          level: "warning",
          duration: 4000 
        }
      }
        

      this.speak(obj.time + '' + para.content.content);
      if(Cookies.get('warning-notify') === 'off'){
        return;
      }
      _this.notifications[_this.notifyIndex] = _this.$notify({
        title: '',
        dangerouslyUseHTMLString: true,
        duration: obj.duration,
        customClass: 'notify_whole',
        offset: 50,
        showClose: false,
        onClick:function(){
          // _this.showDialog(para)
          // _this.notifications[idx].close();
        },
        message: _this.$createElement(
          "div",
          { class: "notify_box " + obj.level },
          [
            _this.$createElement(
              "div",
              { class: 'nofify_head' },
              [
                _this.$createElement(
                  "p",
                  { class: "title" },
                  [
                    _this.$createElement(
                      "i",
                      { class: 'icon el-icon-warning' }
                    ), _this.$createElement(
                      "span",
                      { class: 'text' },
                      obj.level === 'warning' ? '预警':"告警"
                    )
                  ]
                )
                , _this.$createElement(
                  "button",
                  {
                    class: 'btn_close el-icon-close',
                    on: {
                      click: _this.closeNotify.bind(_this, { type: obj.type, index: _this.notifyIndex }),
                    },
                  }
                )
              ]
            ),
            _this.$createElement(
              "div",
              { class: 'nofify_content',
                on: {
                  click: function(){
                    _this.showDialog(para)
                  }
                } 
              },
              [
                _this.$createElement(
                  "span",
                  { class: 'type_icon' },
                  [
                    _this.$createElement(
                      "i",
                      { class: 'iconfont icon-' + obj.type }
                    )
                  ]
                ),

                _this.$createElement(
                  "div",
                  { class: 'info' },
                  [
                    _this.$createElement(
                      "p",
                      { class: 'content' },
                      obj.content
                    )
                    ,
                    _this.$createElement(
                      "p",
                      { class: 'time' },
                      obj.time
                    )
                  ]
                ),

              ]
            ),

          ]
        ),
      });
      _this.notifyIndex++;
    },
    showDialog(info,idx){
      if (info.subEvent == '1') {
        this.activeName = '-1' //感知事件
        request({
          url: `/perceivedEvents/warning/getWarningById`,//感知事件
          method: "post",
          data: { id:info.content.event.id }
        }).then((result) => {
          if (result.code != 200) return Message.error(result?.msg);
          let data = result.data;
          if(data.warningSource === 6){
            return;
          }
          data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : '';
          data.nickName = data.userName;
          // data.direction = gzDirectionMapping[data.direction] || data.direction;
          data.startTime = data.warningTime;
          data.stringEventState = warningStateMapping[data.warningState];
          data.stringEventType = warningTypeMapping[data.warningType];
          data.actionSource = this.activeName

          data.videoList = [];
          if (data.otherConfig) {
            let otherConfig = JSON.parse(data.otherConfig);

            data.waterFilmThickness = otherConfig.waterFilmThickness;
            data.windSpeed = otherConfig.windSpeed;
            data.visibility = otherConfig.visibility;

            data.pictures = otherConfig.pictures || otherConfig.imgUrl ||[];
            data.videoList = otherConfig.videoList || otherConfig.videoUrl || [];
            // data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4',
            // 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
          }
          data.videoType = "mp4";
          data.component = "Video";
          data.description = data.remark;

          this.detailDialogFormData = data;
          this.eventDetailDialogVisible = true;
        });
      } else {
        this.activeName = info.eventState
        request({
          url: `/dc/system/event/${info.content.event.id}`,//交通事件
          method: "get",
        }).then(async (result) => {
          if (result.code != 200) return Message.error(result?.msg);
          let data = result.data;
          data.stringDirection = gzDirectionMapping[data.direction] || data.direction;
          data.startTime = data?.occurrenceTime || '';


          data.videoList = [];
          data.component = "VideoMulti";

          // const { downCamera, upCamera } = ((await getNearCameraNew(data.stakeMark))?.data || {});//新的上下游摄像头接口
          // data.downCamId = downCamera?.camId;
          // data.upCamId = upCamera?.camId;
          data.videoType = "flv";

          this.detailDialogFormData = data;

          this.eventDetailDialogVisible = true;
        });
      }

    },

    handleDialogClose() {
      this.eventDetailDialogVisible = false;
      this.$root.$emit('refresh-event-list');
    },
    speak(text){
      // 判断是否开启声音
      if(Cookies.get('warning-sound') === 'off'){
        return;
      }

      // 创建SpeechSynthesisUtterance实例  
      const utterance = new SpeechSynthesisUtterance(text);

      // 设置语音的语言  
      utterance.lang = 'zh-CN'; // 中文简体  

      // 设置语音的音量（0到1之间）  
      utterance.volume = 10;

      // 设置语音的语速（1是正常语速）  
      utterance.rate = 1;

      // 设置语音的音调（可以是"default", "female", "male"）  
      utterance.pitch = 1;

      // 使用SpeechSynthesis接口播放语音  
      window.speechSynthesis.speak(utterance);  
    }
  },
  mounted() {
  },
};
</script>

<style lang="scss">
.notify_whole {
  padding: 0;
  width: 420px !important;
  // height: 120px !important;
  margin-top: 40px !important;
  background: none;
  border: none;
  border-radius: 0;
}

.el-notification__group {
  width: 100%;
  height: 100%;
  margin: 0;
}

.el-notification__content {
  width: 100%;
  height: 100%;
  margin: 0;
}

.notify_box {
  width: 100%;
  height: 100%;
  border: 1px solid;

  .nofify_head {
    display: flex;
    justify-content: space-between;
    height: 44px;
    align-items: center;
    margin: 0 12px;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .icon {
        font-size: 24px;
      }

      .text {
        font-size: 17px;
        margin-left: 4px;
        font-weight: bold;
      }
    }

    .btn_close {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 20px;
      text-align: center;
    }
  }

  .nofify_content {
    display: flex;
    align-items: center;
    padding: 20px 20px 16px 0;
    cursor: pointer;
    .type_icon {
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 48px;
        &.icon-illegalVehicle{ font-size: 30px;}
      }
    }

    .info {
      flex: 1;

      .content {
        color: #FFF;
        font-size: 16px;
        word-wrap: break-word;
        white-space: wrap;
      }

      .time {
        color: #FFF;
        font-size: 14px;
        opacity: 0.5;
        text-align: right;
        margin-top: 8px;
      }
    }
  }
}

$infoColor: #3DE8FF;
$dangerColor: #FF5F5F;
$warningColor: #FFD294;
.notify_box.info {
  background-image: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%);
  border-image: linear-gradient(180deg, rgba(78, 174, 204, 1), rgba(78, 174, 204, 0)) 2 2;

  .nofify_head {
    border-bottom: 1px solid #FFFFFF33;

    .title {
      .icon {
        color: $infoColor;
      }

      .text {
        color: $infoColor;
      }
    }

    .btn_close {
      color: $infoColor;
    }
  }

  .nofify_content {
    .type_icon {
      .iconfont {
        color: $infoColor;
      }
    }

    .info {
      .content {}

      .time {}
    }
  }
}

.notify_box.danger {
  background-image: linear-gradient(180deg, rgba(30, 0, 0, 0.9) 0%, rgba(111, 0, 0, 0.9) 100%);
  border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2;

  .nofify_head {
    border-bottom: 1px solid #FFFFFF33;

    .title {
      .icon {
        color: $dangerColor;
      }

      .text {
        color: $dangerColor;
      }
    }

    .btn_close {
      color: $dangerColor;
    }
  }

  .nofify_content {
    .type_icon {
      .iconfont {
        color: $dangerColor;
      }
    }

    .info {
      .content {}

      .time {}
    }
  }
}


.notify_box.warning {
  background: linear-gradient( 180deg, #573101 0%, #A46003 100%);
  border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2;

  .nofify_head {
    border-bottom: 1px solid #FFFFFF33;

    .title {
      .icon {
        color: $warningColor;
      }

      .text {
        color: $warningColor;
      }
    }

    .btn_close {
      color: $warningColor;
    }
  }

  .nofify_content {
    .type_icon {
      .iconfont {
        color: $warningColor;
      }
    }

    .info {
      .content {}

      .time {}
    }
  }
}
</style>