<template>
    <div style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
      <div class="intellect">
          <div class="intellect-top">
              <div class="in-top-l">
                  <span>视频设备</span>
                  <div class="top-l">
                    <div :class="checkIndex=== index ? 'active' : 'topl'" v-for="(item,index) in videoLists" @click="checkVideo(index,item)">
                      <span>{{item.mapDeviceName}}</span>
                      <img src="../../assets/img/live-fill.png" alt="" >
                    </div>
                  </div>
              </div>
              <div class="in-top-c">
                <SplitVideoView ref="video"/>
              </div>
              <div class="in-top-r">
                  <div class="top-r-t">
                      <div class="ent-ru-in">
                          <div class="ru-in-l">
                              <img src="../../assets/img/zhan.png" alt="">
                          </div>
                          <div class="ru-in-r">
                              <span>最新预警</span>
                              <div v-if="alarmList[0]">{{alarmList[0].alarmBeginTime}}</div>
                          </div>
                      </div>
                      <div class="rt-b">
                          <span> 预警：</span>
                          <div>
                              储罐区有火焰从原料罐冒出，目前有溢出风险
                          </div>
                      </div>
                      <div class="intellect-btn">
                          <el-button @click="videoView(alarmList[0])" class="but">查看实时视频</el-button>
                      </div>
                  </div>
                  <div class="top-r-b">
                      <div class="r-b-l">
                          <img src="../../assets/img/up.png" alt="" width="50px">
                          <div>预警统计</div>
                      </div>
                      <div class="ent-ruchang">
                          <div class="ent-ru-in">
                              <div class="ru-in-l">
                                  <img src="../../assets/img/down.png" alt="">
                              </div>
                              <div class="ru-in-r">
                                  <span>日累积预警</span>
                                  <div>{{dayTotal}}</div>
                              </div>
                          </div>
                          <div class="ent-ru-in">
                              <div class="ru-in-l">
                                  <img src="../../assets/img/down1.png" alt="">
                              </div>
                              <div class="ru-in-r">
                                  <span>月累积预警</span>
                                  <div>{{monthTotal}}</div>
                              </div>
                          </div>
                          <div class="ent-ru-in">
                              <div class="ru-in-l">
                                  <img src="../../assets/img/down2.png" alt="">
                              </div>
                              <div class="ru-in-r">
                                  <span>年累积预警</span>
                                  <div>{{yearTotal}}</div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="intellect-bottom">
              <p>预警信息</p>
              <div class="ent-yuanqu">
                <el-table v-loading="loading" :data="alarmList">
                  <!--<el-table-column type="selection" width="55" align="center" />-->
                  <!--<el-table-column label="id" align="center" prop="alarmId" />-->
                  <!--<el-table-column label="报警设备" align="center" prop="deviceName" />-->
                  <el-table-column label="预警类型" align="center" prop="alarmContent" :formatter="alarmContentFormat" />
                  <el-table-column label="报警级别" align="center" prop="alarmLevel"  >
                    <template slot-scope="scope">
                      <span :style="colorList[scope.row.alarmLevel]" >{{alarmLevelFormat(scope.row,null)}}</span>
                    </template>
                  </el-table-column>
                  <!--:formatter="alarmLevelFormat"-->
                  <el-table-column label="报警开始时间" align="center" prop="alarmBeginTime" width="180"/>

                  <el-table-column label="报警结束时间" align="center" prop="alarmEndTime" width="180"/>

                  <el-table-column label="报警状态" align="center" prop="alarmStatus" >
                    <template slot-scope="scope">
                      <span style="color: red" v-if="scope.row.alarmStatus==0">正在报警</span>
                      <span  v-if="scope.row.alarmStatus==1">自动消警</span>
                      <span  v-if="scope.row.alarmStatus==2">手动消警</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预警图片" align="center" prop="alarmImageUrl" >
                    <template slot-scope="scope">
                      <img :src="scope.row.alarmImageUrl" style="width: 20%;vertical-align:middle;cursor:pointer;" @click="showPicture(scope.row)"/>
                      <el-image :ref="'a'+scope.row.id" :src="scope.row.alarmImageUrl" v-show="false" :preview-src-list="[scope.row.alarmImageUrl]" v-if="scope.row.alarmImageUrl != '' && scope.row.alarmImageUrl != null"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="video"
                    label="视频">
                    <template slot-scope="scope">
                      <img class="demo" @click="videoView(scope.row)" :src="require(`../../assets/img/live-fill.png`)" />
                    </template>
                  </el-table-column>
                </el-table>

                <pagination
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getAlarmList"
                />
              </div>
          </div>
      </div>
      <el-dialog :title= "title" :visible.sync="dialogTableVisible">
        <div style="height: 500px">
          <PlayVideo
            playId="play"
            :isChoice = "false"
            ref="play"
          >
          </PlayVideo>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import livefill from "../../assets/img/live-fill.png";
    import {deviceInfoLists} from "@/api/map/deviceInfo";
    import SplitVideoView from "@/components/Video/SplitVideoView";
    import PlayVideo from "@/components/Video/PlayVideo"
    import { listAlarm, sumAlarmTotal } from "@/api/system/alarm";
    export default {
      name:"intellect",
      components:{
        SplitVideoView,
        PlayVideo
      },
      data() {
          return {
            videoLists:[],
            //选中视频
            checkIndex:-1,
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              alarmBeginTime: null,
              alarmEndTime: null,
              alarmStatus: null,
            },
            alarmList:[],
            total: 0,
            loading: true,
            // 预警类型字典
            alarmContentOptions: [],
            // 报警级别字典
            alarmLevelOptions: [],
            colorList:[
              "color:red",
              "color:red;font-weight: bolder;",
              "color:#ff7744",
              "color:#ffaa33",
              "color:#bbbb00",
              "color:#ccff33",
            ],
            dialogTableVisible:false,
            title:"",
            monthTotal:0,
            dayTotal:0,
            yearTotal:0

          }
      },
      created(){
        this.getVideos();
        this.getAlarmList();
        this.getDicts("t_alarm_content").then(response => {
            this.alarmContentOptions = response.data;
        });
        this.getDicts("t_alarm_level").then(response => {
            this.alarmLevelOptions = response.data;
        });
        this.getTotalAlarm();
      },
      methods:{
        //获取视频列表
        getVideos(){
          deviceInfoLists({mapDeviceType:"5"}).then(res =>{
            this.videoLists = res;
          })
        },
        //视频选择
        checkVideo(index,videoData){
          this.checkIndex = index;
          let video = {};
          video.deviceNum = videoData.mapDeviceNum;
          video.label = videoData.mapDeviceName;
          this.$refs.video.playVideo(video);
        },
        getAlarmList(){
          this.loading = true;
          listAlarm(this.queryParams).then(res =>{
            this.alarmList = res.rows;
            this.total = res.total;
            this.loading = false;
          })
        },
        // 预警类型字典翻译
        alarmContentFormat(row, column) {
          return this.selectDictLabel(this.alarmContentOptions, row.alarmContent);
        },
        // 报警级别字典翻译
        alarmLevelFormat(row, column) {
          return this.selectDictLabel(this.alarmLevelOptions, row.alarmLevel);
        },
        showPicture(row){
          this.$refs['a'+row.id].showViewer = true;
        },
        videoView(row){
          //this.title = row.deviceName;
          this.dialogTableVisible = true;
          let video = {};
          video.deviceNum = row.relationDeviceId;
          video.label = "视频";
          this.$nextTick(() => {
              this.$refs.play.playVideo(video);
          })
        },
        getTotalAlarm(){
          sumAlarmTotal().then(res =>{
           this.yearTotal = res.data.yearTotal;
           this.monthTotal = res.data.monthTotal;
           this.dayTotal =  res.data.dayTotal;
          })
        }
      }
    };
</script>
<style lang="scss" scoped>
.intellect{
    width: calc(100vw - 280px);
    height: calc(100vh - 50px);
    padding: 30px;
    .intellect-top{
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: space-between;
        .in-top-l{
            width: 15%;
            height: 100%;
            background-color: #fff;
            border-radius: 15px;
            padding: 20px;
            .top-l{
                width: 100%;
                height: 95%;
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                overflow-y: scroll;
                overflow-x: hidden;
                &::-webkit-scrollbar {
                  width:0px;
                }
                &::-webkit-scrollbar-track {
                  -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
                  border-radius:10px;
                }
                &::-webkit-scrollbar-thumb {
                  border-radius:5px;
                  background:rgba(0,0,0,0.1);
                  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
                }
                //justify-content: space-around;
                .topl{
                    width: 100%;
                    height: 40px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    padding: 5px 10px;
                    border: 1px solid rgb(235, 232, 232);
                    border-radius: 10px;
                    background-color: #fff;
                    font-size: 14px;
                    cursor: pointer;
                    img{
                        width: 20px;
                        height: 20px;
                        margin-top: 5px;
                    }
                }
            }

        }
        .in-top-c{
            width: 62%;
            height: 100%;
            .video{
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                flex-wrap: wrap;
                div{
                    width: 48%;
                    height: 48%;
                    background-color: rgb(69, 70, 70);
                }
            }
        }
        .in-top-r{
            width: 20%;
            height: 100%;
            .top-r-t{
                width: 100%;
                height: 36%;
                border-radius: 15px;
                background-color: #fff;
                padding: 10px 20px 0 20px;
                .ent-ru-in{
                    width: 100%;
                    /* height: 30%; */
                    display: flex;
                    .ru-in-l{
                        width: 45px;
                        height: 45px;
                        text-align: center;
                        margin-top: 10px;
                        img{
                            width: 100%;
                        }
                    }
                    .ru-in-r{
                        padding: 10px 0 0 10px;
                        span{
                            font-size: 15px;
                        }
                        div{
                            font-size: 12px;
                            margin-top: 7px;
                        }
                    }
                }
                .rt-b{
                    margin-left: 50px;
                    display: flex;
                    font-size: 13px;
                    margin-top: 10px;
                    div{
                        width: 75%;
                        height: auto;
                    }
                }
                .intellect-btn{
                    width: 100%;
                    text-align: center;
                    margin-top: 15px;
                    .but{
                        border-radius: 10px;
                        background-color: #51be5f;
                        color: #fff;
                    }
                }
            }
            .top-r-b{
                width: 100%;
                height: 60%;
                margin-top: 6%;
                background-color: #fff;
                border-radius: 15px;
                padding: 20px 20px 0 20px;
                .r-b-l{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    div{
                        width: 150px;
                        height: 50px;
                        line-height: 50px;
                        margin-left: 10px;
                        font-size: 16px;
                    }
                    img{
                        width: 45px;
                        height: 45px;
                    }
                }
                .ent-ruchang{
                    width: 100%;
                    height: 80%;
                    padding-top: 10px;
                    .ent-ru-in{
                        width: 70%;
                        height: 30%;
                        display: flex;
                        margin-top: 2%;
                        margin-left: 20%;
                        .ru-in-l{
                            width: 50px;
                            height: 50px;
                            line-height: 55px;
                            text-align: center;
                            margin-top: 10px;
                            img{
                                width: 100%;
                            }
                        }
                        .ru-in-r{
                            padding: 7px 0 0 10px;
                            span{
                                font-size: 13px;
                            }
                            div{
                                font-size: 22px;
                                margin-top: 7px;
                            }
                        }
                    }
                }
            }
        }
    }
    .intellect-bottom{
        width: 100%;
        height: 38%;
        margin-top: 1.5%;
        background-color: #fff;
        border-radius: 15px;
        padding: 10px 20px 20px 20px;
        overflow-y: scroll;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          width:0px;
        }
        &::-webkit-scrollbar-track {
          -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
          border-radius:10px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius:5px;
          background:rgba(0,0,0,0.1);
          -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
        }
        .ent-yuanqu{
                width: 100%;
                height: 95%;
                text-align: center;
            }
    }
}
::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table tr td .cell {
    text-align: center;
}
.active{
  width: 100%;
  height: 40px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  border: 1px solid rgb(235, 232, 232);
  border-radius: 10px;
  background-color: #e7f4fd;
  color: #3662ec;
  cursor:pointer;
  font-size: 14px;
  img{
    width: 20px;
    height: 20px;
    margin-top: 5px;
  }
}
</style>
