<template>
  <div class="wrapper" id="layout">
    <div class="div-float" v-show="showDiaBox"
         style="width: 230px;
              height: auto;
              background-color: rgba(66, 64, 64, 0.8);
              position: absolute;
              z-index: 1000;
              bottom: 0;right: 0;
              margin-bottom: 50px;
              margin-right: 10px;
              color: #fff;
              padding: 10px;">
        <span style="font-size:18px;">事件接报</span>
        <i class="el-icon-circle-close" @click="closeDiaBox(NameArr.id)" style="font-size: 24px;position: absolute;right: 0;top: 0;"></i>
        <p style="margin-left: 15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width: 200px;">事件名称:<span style=" ">{{NameArr.eventName}}</span></p>
        <p style="margin-left: 15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width: 200px;">事件来源:<span>{{NameArr.eventSource}}</span></p>
        <div style="width: 100%;text-align: center;">
          <el-button type="primary" plain @click="enterHome">查看</el-button></div>
        </div>
    <!-- 头部 -->
    <Header />
    <Content>
      <Navbar slot="left"/>
      <router-view slot="maincon"></router-view>
    </Content>
  </div>
  
</template>
<style lang="scss">
#layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import Header from "./Header.vue";
import Content from "./Content.vue";
import Navbar from "./Navbar.vue";
import METHOD from '@/utils/methods';
import {asyncRouterMap} from '../../router';
@Component({
  components: { Header,Content,Navbar }
})
export default class Layout extends Vue {
  @Provide() NameArr: any = {
        eventName: '',
        eventSource: ''
      };
  // @Provide() NameArrAll: any = [];
  data(){
		return{
      showDiaBox: false
		}
  };
  closeDiaBox(id) {
      this.showDiaBox = false;
      //关闭事件给个1
     sessionStorage.setItem(id,1);
  }
  //查看按钮
  enterHome(res) {
    // console.log("进入主页");
    this.$router.push({ 
      path: '/EventsMg',
    });
  };
  getEventInfo() {
    let that = this;
    (that as any).$axios.get(`/eventInfo/getOfficialAccountEventInfo`).then((res: any) => {
      console.log(res,"fdsafdsafds");
      if(null != res && ' ' != res && undefined != res){
        //获取接口数据  key为数据id  {}
        if(1 != sessionStorage.getItem(res.id)){
          if(res.eventName){
            sessionStorage.setItem(res.id,0)
            console.log("fdsfdsfdfdsa");
            //数据赋值
            that.NameArr = res;
            this.showDiaBox = true;
          }
          
        }
      }
      
    });
  }

  created() {

   METHOD.sysTITLE = this.$route.matched[0].meta.title; //父级title
   let that = this;
   if(this.NameArr.eventName){
     this.showDiaBox = true;
   }
   //公众号事件上报公告
   setInterval(function(){
     that.getEventInfo();
     
   },3000);
   
  }
  
}
</script>
