<template>
  <div class="home" v-if="$store.state.typeFire === 0">
    <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe> 
    <el-row class="contentClass contnetLift">
      <template v-for="item in resList.slice(0,3)">
        <info class="info" v-if="item.styleValue === 1" :key="item.styleValue" :resInfo="item"></info>
        <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control>
        <monitor class="monitor" v-else-if="item.styleValue === 3" :key="item.styleValue" :resInfo="item"></monitor>
        <parking-lot class="parkingLot" v-else-if="item.styleValue === 4" :key="item.styleValue" :resInfo="item"></parking-lot>
        <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
        <give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm>
      </template>
    </el-row>
    <el-row class="contnetCenter"></el-row>
    <el-row class="contentClass contnetRight">
      <template v-for="item in resList.slice(3)">
        <info class="info" v-if="item.styleValue === 1" :key="item.styleValue" :resInfo="item"></info>
        <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control>
        <monitor class="monitor" v-else-if="item.styleValue === 3" :key="item.styleValue" :resInfo="item"></monitor>
        <parking-lot class="parkingLot" v-else-if="item.styleValue === 4" :key="item.styleValue" :resInfo="item"></parking-lot>
        <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
        <give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm>
      </template>
    </el-row>
  </div>
  <div class="home home-AF" v-else>
    <div class="contentBox">
        <!-- <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe>  -->
      <el-collapse-transition>
        <el-row class="contentClass contnetLift" v-show="isLeft">
          <equipment class="equipment"></equipment>
          <give-an-alarm-af class="giveAnAlarmAf"></give-an-alarm-af>
          <warning-info class="warningInfo"></warning-info>
        </el-row>
      </el-collapse-transition>
      <el-row class="contnetCenter">
        <img src="../assets/image-af/left-icon.png" alt="" class="leftIcon" @click="roomBox('left')">
        <img src="../assets/image-af/right-icon.png" alt="" class="rightIcon" @click="roomBox('right')">
      </el-row>
      <el-collapse-transition>
        <el-row class="contentClass contnetRight" v-show="isRight">
          <screen-equipment class="screenEquipment"></screen-equipment>
          <current-state class="currentState"></current-state>
          <monitor-info class="monitorInfo"></monitor-info>
        </el-row>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
// 党校
import info from "../components/SD-school/info"; // 综合信息统计
import accessControl from "../components/SD-school/access-control"; // 门进出入统计
import monitor from "../components/SD-school/monitor"; // 视频监控
import parkingLot from "../components/SD-school/parking-lot"; // 停车场统计
import conferenceRoom from "../components/SD-school/conference-room"; // 会议室统计
import giveAnAlarm from "../components/SD-school/give-an-alarm"; // 综合告警列表

// 安防
import equipment from "../components/AF-exhibition/equipment"; // 设备工况
import giveAnAlarmAf from "../components/AF-exhibition/give-an-alarm"; // 设备告警情况
import warningInfo from "../components/AF-exhibition/warning-info"; // 告警信息
import screenEquipment from "../components/AF-exhibition/screen-equipment"; // 设备筛选
import currentState from "../components/AF-exhibition/current-state"; // 当前实时状态
import monitorInfo from "../components/AF-exhibition/monitor-info"; // 异常监控信息


export default {
  name: "Home",
  components: {
    info,
    accessControl,
    monitor,
    parkingLot,
    conferenceRoom,
    giveAnAlarm,

    equipment,
    giveAnAlarmAf,
    warningInfo,
    screenEquipment,
    currentState,
    monitorInfo,
  },
  data() {
    return {
      isLeft: true,
      isRight: true,
      resList:[]
    };
  },
  created() {
    this.getData()
  },
  mounted() {

  },
  methods: {
    async getData(){
      let res = await this.$axios.get('/top/listTopConfig?'+this.$qs.stringify({
        applicationCode: this.$store.state.typeFire === 0 ? 'SD' : 'AF'
      }))
      if(res.success){
        this.resList = res.data
      }
    },
    roomBox(val){
      val === 'left' ? this.isLeft = !this.isLeft : (this.isRight = !this.isRight)
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  iframe{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .contentBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .contentClass {
    width: 25%;
    min-width: 500px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .contnetCenter{
    flex: 1;
    z-index: -1;
  }
  .info {
    width: 100%;
    height: 44%;
  }
  .accessControl {
    width: 100%;
    height: 28%;
  }
  .monitor {
    width: 100%;
    height: 28%;
  }
  .parkingLot,
  .conferenceRoom,
  .giveAnAlarm,
  .equipment,
  .giveAnAlarmAf,
  .warningInfo,
  .screenEquipment,
  .currentState,
  .monitorInfo {
    width: 100%;
    height: 33.33%;
    overflow: hidden;
    // flex: 1;
  }
}

.home-AF{
  padding: 0 30px;
}
  .leftIcon{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    margin: auto;
    z-index: 9;
  }
  .rightIcon{
    position: absolute;
    top: 0;
    bottom: 0;
    right:  -10px;
    margin: auto;
    z-index: 9;
  }
</style>
