<template>
  <div class="subject-indexRightPage">
    <div class="top-button-box">
      <div :class="rightButtonType == 1 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(1)">传感器监测</div>
      <div :class="rightButtonType == 2 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(2)">物联控制</div>
      <div :class="rightButtonType == 3 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(3)">视频监控</div>
      <!--<div :class="rightButtonType == 4 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(4)">声光报警</div>-->
      <!--<div :class="rightButtonType == 5 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(5)">智能门禁</div>-->
    </div>
    <div class="bottom-content-max-big-box">
      <div class="bottom-content-address-box">
        <el-tooltip class="item" effect="dark"
                    v-if="deptName"
                    :content="deptName" placement="bottom">
          <i>{{deptName}}</i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark"
                    v-if="buildName && floorName"
                    :content="buildName+floorName" placement="bottom">
          <i>当前位置：{{buildName}}{{floorName}}</i>
        </el-tooltip>
      </div>
      <div class="bottom-content-big-box">
        <!--传感器-->
        <sensor-page ref="sensorPage" v-if="rightButtonType == 1"></sensor-page>
        <!--硬件开关-->
        <hardware-page ref="hardwarePage" v-if="rightButtonType == 2"></hardware-page>
        <!--视频监控-->
        <video-page ref="videoPage" v-if="rightButtonType == 3"></video-page>
        <!--声光报警-->
        <alarm-page ref="alarmPage" v-if="rightButtonType == 4"></alarm-page>
        <!--智能门禁-->
        <entrance-page ref="entrancePage" v-if="rightButtonType == 5"></entrance-page>
      </div>
    </div>
  </div>
</template>

<script>
  import { controlsRestrictVerify } from '@/utils/index'
  import sensorPage from './sensorPage.vue'
  import hardwarePage from './hardwarePage.vue'
  import videoPage from './videoPage.vue'
  import alarmPage from './alarmPage.vue'
  import entrancePage from './entrancePage.vue'
  export default {
    name: 'indexRightPage',
    components: {
      sensorPage,
      hardwarePage,
      videoPage,
      alarmPage,
      entrancePage,
    },
    data(){
      return{
        //实验室ID
        infoId:'',
        subId:'',
        //当前选中右侧按钮
        rightButtonType:0,
        //位置数据
        deptName:'',
        buildName:'',
        floorName:'',
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(item){
        this.$set(this,'infoId',item.infoId);
        this.$set(this,'subId',item.subId);
        this.$set(this,'deptName',item.deptName);
        this.$set(this,'buildName',item.buildName);
        this.$set(this,'floorName',item.floorName);
        this.$set(this,'rightButtonType',1);
        this.$nextTick(()=>{
          this.$refs.sensorPage.initialize();
        })
      },
      //切换实验室展示数据
      rightButtonClick(type) {
        let self = this
        if (this.rightButtonType != type) {
          if(type == 1){
            this.$set(this,'rightButtonType',type);
            this.$nextTick(()=>{
              this.$refs.sensorPage.initialize();
            })
          }else if(type == 2){
            this.$set(this,'rightButtonType',type);
            this.$nextTick(()=>{
              this.$refs.hardwarePage.initialize();
            })
          }else if(type == 3){
            if(!controlsRestrictVerify('subVideo')){
              this.msgError('没有相关操作权限,请联系管理员')
              return
            }
            this.$set(this,'rightButtonType',type);
            this.$nextTick(()=>{
              this.$refs.videoPage.initialize();
            })
          }else if(type == 4){
            this.$set(this,'rightButtonType',type);
            this.$nextTick(()=>{
              this.$refs.alarmPage.initialize();
            })
          }else if(type == 5){
            this.$set(this,'rightButtonType',type);
            this.$nextTick(()=>{
              this.$refs.entrancePage.initialize();
            })
          }
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .subject-indexRightPage{
    width:428px;
    display: flex;
    flex-direction: column;
    margin: 5px 0 20px 7px;
    .top-button-box{
      overflow: hidden;
      display: flex;
      div{
        padding:0 10px;
        height:40px;
        line-height:40px;
        font-size:14px;
        text-align: center;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        margin-right:1px;
        cursor: pointer;
        font-weight: 500;
      }
      .buttonColorA{
        color:#0045AF;
        background:#fff ;
        border: 1px solid #E0E0E0;
        border-bottom: 1px solid rgba(224,224,224,0.3);
      }
      .buttonColorB{
        color:#333;
        background:#E0E0E0 ;
        border: 1px solid #E0E0E0;
        border-bottom:none;
      }
    }
    .bottom-content-max-big-box{
      width:408px;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
      border-radius: 0 0 10px 10px;
      font-weight:500;
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .bottom-content-address-box{
        margin:16px 26px;
        display: flex;
        justify-content: space-between;
        >i{
          font-style: normal;
          line-height:18px;
          font-size:16px;
          color: #333;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .bottom-content-big-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
</style>
