<template>
    <div class="app-wrapper">
      <navbar @ShowWarn="ShowWarn" @CloseWarn="CloseWarn" :warnNum="warnlist.length" />
      <!-- <div class="warnTab" v-show="Isshow" @mouseover="ShowWarn" @mouseout="CloseWarn"></div> -->
      <div class="warnTab" v-show="false" @mouseover="ShowWarn" @mouseout="CloseWarn">
        <el-table :data="warnlist" :header-cell-style="{
            background: 'rgba(127,151,197,0.92)',
            borderColor: '#CDDEFF',
            color: 'white',
          }" 
          stripe 
          fit 
          height="100%"
          style="width: 100%">
            <el-table-column prop="createTime" label="开始时间" width="98" />
            <el-table-column prop="equipment" width="106" label="设备标识" />
            <el-table-column prop="info" label="告警信息" />
            <el-table-column label="" align="center" width="100">
              <template v-if="scope.row.equipment == '架载机'" slot-scope="scope">
                <el-button class="Warnbtn" @click="ShowWarnList(scope.row)">处置</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
      <!-- <Sidebar /> -->
      <div :class="{hasheaderView:$route.matched[0].name === 'Permission'|| $route.matched[0].name === 'ManageLog'|| $route.matched[0].name === 'ControlConfig'}">
        <Header v-if="getChildrenRouter"></Header>
        <app-main />
      </div>
    </div>
</template>

<script>
import { AppMain, Navbar } from './components'
import Header from './components/Header'
import AppLayout from './components/AppLayout'
import { getfireProtection,getwarnList } from "@/api/statistics";
export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    Header,
    AppLayout
  },
  data(){
    return{
      Isshow:false,
      warnlist:[],
    }
  },
  mounted(){
    // setInterval(() => {
    //       this.getwarnList()
    // }, 1000);
  },
  computed: {
    //是否显示子路由
    getChildrenRouter(){
      if((this.$route.matched[0].name === 'Permission' || this.$route.matched[0].name === 'ManageLog' || this.$route.matched[0].name === 'ControlConfig') && this.$route.name !== 'RolePermission' && this.$route.name !== 'UpdatePassword'){
        return true;
      }else{
        return false;
      }
    }
  },
  methods: {
    ShowWarn(){
      this.Isshow=true
    },
    CloseWarn(){
      this.Isshow=false
    },
    getwarnList(){
      getwarnList().then(res=>{
        this.warnlist=res.data
      })
    },
    ShowWarnList(row){
      this.$confirm(`系统检测到【${row.Machine}】发生了消防问题，确认需要抓取电池吗？`, '消防换仓', {
        cancelButtonText: '忽略',
        confirmButtonText: '确认',
        type: 'warning'
      })
        .then(async() => {
          const res=await getfireProtection({ targetCode:1})
          if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '处置成功',
              })
            } else {
              this.$message({
                type: 'warning',
                message: '处置失败',
              })
            }
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  width: 100%;
  background:#0a101c;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
  .warnTab{
      width: 582px;
      height: 238px;
      background-color: #BBCFF6;
      z-index: 100;
      position: absolute;
      top: 64px;
      right: 290px;
      border-radius: 4px;
      ::v-deep .el-table th.is-leaf{
        font-size: 16px !important;
        height: 40px !important;
        line-height: 40px !important;
      }
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
}

.mobile .fixed-header {
  width: 100%;
}
</style>
