<template>
  <div class="wrapper" id="content">
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside :class="[{'zk' : !iszk},{'notzk' : iszk}]">
        <slot name="left"></slot>
      </el-aside>
      <el-container>
        <!-- 面包屑 -->
        <el-header height="40px">
          <el-breadcrumb separator="/">
            <span class="fl flex" @click="toggleNavWi()">
              <i class="el-icon-menu"></i>
            </span>
            <el-breadcrumb-item>
              <i class="fa fa-bars"></i> 安全生产风险监测预警系统
            </el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumnItems" :key="index">{{item.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <!-- 主要内容 -->
        <el-main>
          <slot name="maincon"></slot>
        </el-main>
      </el-container>
    </el-container>
    <!--<alarminfo :dialogVisible="dialogVisible"  :title="dialogTit" @dialogFun="closeDialog" :key="zjKey"></alarminfo>-->
  <!-- :editForm="formData" @refreshTableData="getTableData" -->
    <el-dialog
            :visible.sync="dialogVisible"
            :title="title"
            :show-close="false"
            :close-on-click-modal="false"
    >
      <el-table :data="tableData.pageData" stripe style="width:100%;min-height: 400px" :loading="loading">
        <el-table-column width="50" type="index" label="序号"></el-table-column>
        <el-table-column prop="unitName" label="企业名称"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>

        <el-table-column prop="alarmInfo" label="预警信息">
          <template slot-scope="scope">
            <font class="dg">{{scope.row.alarmInfo}}</font>
          </template>
        </el-table-column>
        <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
        <el-table-column prop="dangerGrade" label="预警等级" width="80px"></el-table-column>

        <!--<el-table-column prop="handleType" label="消除类型">-->
        <!--<template slot-scope="scope">-->
        <!--<font v-if="scope.row.handleType == 0">-->
        <!--<span class="mark none">未处理</span>-->
        <!--</font>-->
        <!--<font v-if="scope.row.handleType == 1">-->
        <!--<span class="mark auto">自动消警</span>-->
        <!--</font>-->
        <!--<font v-if="scope.row.handleType == 2">-->
        <!--<span class="mark handle">手动消警</span>-->
        <!--</font>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="contacts" label="联系人" width="80px"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120px"></el-table-column>
        <!--<el-table-column label="操作" width="170">-->
        <!--<template slot-scope="scope">-->
        <!--<el-button-->
        <!--type="warning"-->
        <!--size="small"-->
        <!--@click="handle(scope.row)"-->
        <!--v-if="scope.row.handleType == 0"-->
        <!--&gt;-->
        <!--<i class="el-icon-bell"></i>手动消警-->
        <!--</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <el-pagination
              background
              layout="total,sizes, prev, pager, next, jumper"
              :total="tableData.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="PAGE.page"
              :page-size="PAGE.size"
      ></el-pagination>

      <div class="division">
        <div style="width: 85%"></div>
        <el-button  @click="stop()" size="small">关闭警报</el-button>
        <el-button  @click="closeDialog()" size="small">关闭</el-button>
      </div>
      <video  hidden="hidden" id="music" loop   autoplay controls="controls" src="@/assets/4031.wav"></video>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
  components: {

  },
})
export default class Content extends Vue {
  @Provide() breadcrumnItems: any = [];
    //编辑组件
    @Provide() dialogVisible: Boolean = false;
    @Provide() zjKey: any = 0;
    @Provide() title: String = "报警";
    @Provide() iszk: boolean = true;
    @Provide() PAGE: any = { page: 1, size: 10 };
    @Provide() enterpriseId:string = '';
    @Provide() searchData: any = { alarmStatus: 0 };
    @Provide() tableData: Object = { pageData: [], total: 0 };
    @Provide() loading: Boolean = false;
  @Watch("$route") handleRouteChange(router: any): any {
    this.inintBreadcrum(router);
  } //监听当前路由变化的时候返回数据
  inintBreadcrum(router: any) {
    let arr = [];
    if (router.matched) {
      let thatAlink = router.matched[1];
      if (thatAlink.meta.title == undefined) {
        arr.push({
          name: thatAlink.parent.meta.title,
          path: thatAlink.parent.path,
        });
      } else {
        arr.push({
          name: thatAlink.parent.meta.title,
          path: thatAlink.parent.path,
        });
        arr.push({ name: thatAlink.meta.title, path: thatAlink.path });
      }
    }
    this.breadcrumnItems = arr;
  }
  toggleNavWi() {
    this.iszk = !this.iszk;
  }
    closeDialog() {
        //关闭窗口
        document.getElementById("music").pause();
        this.dialogVisible = false;
        //this.formData = {};
    }
    handleSizeChange(val: any) {
        this.PAGE.size = val;
        this.getTableData();
    }
    handleCurrentChange(val: any) {
        this.PAGE.page = val;
        this.getTableData();
    }
    baoFun() {
        let that = this,
            param = Object.assign({enterpriseId: that.enterpriseId}, that.PAGE, that.searchData);
        METHOD.axiosPost(that, `/alarmInfo/getAlarmInfoList`, param, function(
            res: any
        ) {
            if (res.code == 0) {

                if(res.data.total!=0&&res.data.total > that.tableData.total){
                    that.tableData = res.data;
                    that.dialogTit = "报警";
                    that.zjKey++;
                    that.dialogVisible = true;
                    that.$nextTick(() => {
                        document.getElementById("begin").click()
                        // /that.start();
                    })
                }else if(that.tableData.total>res.data.total){
                    that.tableData = res.data;
                }
            }
        });

    }
    start(){
        document.getElementById("music").play();
    }
    stop(){
        document.getElementById("music").pause();
    }
  created() {
    this.inintBreadcrum(this.$route);
     var that = this;
    //   setTimeout(function(){
    //       that.baoFun();
    //   },1000);
      setInterval(function(){
          that.baoFun();
      },3000);
  }
}
</script>
<style lang="scss" scoped>
#content,
.maincon {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-aside {
  background: #414d58;
}
.el-header {
  background: #ffffff;
  line-height: 40px;
}
.el-header > div {
  height: 100%;
  line-height: 40px;
}
.el-main {
  background: #f3f3f3;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
}
.el-container {
  height: 100%;
}
.el-menu {
  border: none;
}
.zk {
  width: 215px !important;
}
.notzk {
  width: 0px !important;
}
</style>
<style lang="scss">
span.flex {
  cursor: pointer;
  padding-right: 5px;
  .el-icon-menu {
    color: #0aa288;
    font-size: 20px;
  }
}
</style>
<style lang="scss" scoped>
  ::v-deep .el-dialog{
    width: 60%;
  }
  .division{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
  }
</style>