<template>
  <div :class="['legend', sidebarState ? 'open' : '']">
    <div class="legend-menu" @click="toggleMenu" v-show="sidebarState"></div>
    <div class="legend-detail">
      <div class="content">
        <el-tabs tab-position="left" v-model="slidactiveName" @tab-click="tabshandleClick">
          <el-tab-pane
            v-for="(pages, index) in menu[equipType]"
            v-bind:key="index"
            :label="pages.label"
            :name="pages.name"
          > 
            <!-- <keep-alive> -->
              <components :is="pages.name" :equipId="equipId" :d_id="d_id" :equipType='equipType' v-if="pages.name == nowPage" :model="model"></components>
            <!-- </keep-alive> -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import scdCtrl from '@/pages/plantGuard/plantProtection/equipCtrls/scdctrl' //杀虫灯控制
import cbdCtrl from '@/pages/plantGuard/plantProtection/equipCtrls/cbdctrl' //测报灯控制
import cbdMsgWarn from '@/pages/plantGuard/plantProtection/warn/cbdMsgWarn' //短信预警
import xycbCtrl from '@/pages/plantGuard/plantProtection/equipCtrls/xycbctrl' //性诱测报控制
import bzyCtrl from '@/pages/plantGuard/plantProtection/equipCtrls/bzyctrl' //孢子仪控制
import qxzCtrl from '@/pages/plantGuard/plantProtection/equipCtrls/qxzctrl' //气象站控制
import qxzMsgWarn from '@/pages/plantGuard/plantProtection/warn/qxzMsgWarn' //短信预警
import simCode from '@/pages/plantGuard/plantProtection/equipCtrls/simCode' //SIM卡流量
export default {
  props: ["equipId", "equipType","d_id","model"],
  components: {
      scdCtrl,
      cbdCtrl,
      cbdMsgWarn,
      xycbCtrl,
      bzyCtrl,
      qxzCtrl,
      qxzMsgWarn,
      simCode,
  },
  data: function () {
    return {
      sidebarState: true,
      // 各类型菜单
      nowPage:"",
      slidactiveName:"",
      menu:{
        "2":[{
          name:"scdCtrl",
          label:"设备控制",
        },{
          name:"simCode",
          label:"SIM卡详情",
        }],
        "3":[{
          name:"cbdCtrl",
          label:"设备控制",
        },
        {
          name:"cbdMsgWarn",
          label:"短信预警",
        },
        {
          name:"simCode",
          label:"SIM卡详情",
        }],
        "4":[{
          name:"xycbCtrl",
          label:"设备控制",
        },{
          name:"simCode",
          label:"SIM卡详情",
        }],
        "5":[{
          name:"qxzCtrl",
          label:"设备控制",
        },{
          name:"qxzMsgWarn",
          label:"短信预警",
        }],
        "7":[{
          name:"bzyCtrl",
          label:"设备控制",
        },{
          name:"simCode",
          label:"SIM卡详情",
        }],
      }
    };
  },
  methods: {
    toggleMenu() {
      this.sidebarState = !this.sidebarState;
      setTimeout(()=>{
        this.$emit('sidebarClear','')
      },1000)
    },
    tabshandleClick(tab){
      this.nowPage = tab.name;
    },
  },
  mounted(){
    this.nowPage = this.menu[this.equipType][0].name
    this.slidactiveName = this.menu[this.equipType][0].name
  }
};
</script>
<style lang='less' scoped>

.legend {
  position: absolute;
  top: 10px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: flex-start;
  z-index: 9;
  .legend-menu {
    width: 21px;
    height: 103px;
    cursor: pointer;
    margin-top: calc(50vh - 100px);
    background: url('../../../static/images/sliderBtn.png') no-repeat center;
    i {
      transition: 0.5s;
    }
  }
  .legend-menu:hover{
    opacity: 1;
  }
  .legend-detail {
    transition: 0.8s;
    width: 0px;
    background: #fff;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: #212121;
    .content {
      padding: 20px;
      box-sizing: border-box;
      height: 100%;
    }
  }
}
.legend.open {
  .legend-menu{
    opacity: 1;
    border-radius: 4px;
  }
  .legend-detail {
    width: 400px;
  }
}
/deep/.el-tabs__item{
  white-space: break-spaces;
  height: inherit;
  width: 42px;
  line-height: 24px;
  padding: 10px;
  background: #dfdfdf;
  color: #868686;
  border-radius: 5px;
  margin-bottom: 10px;
}
/deep/.el-tabs__nav-wrap::after,
/deep/.el-tabs__active-bar{
  background-color: #fff;
}
/deep/.el-tabs__item.is-active{
  background: #0295ff;
  color: #fff;
}
/deep/.el-tabs__content{
  height: 100%;
  overflow: auto;
}
/deep/.el-tabs--left .el-tabs__item.is-left{
  text-align: center;
}
/deep/.el-tabs--left .el-tabs__active-bar.is-left{
  right: -2px;
}
.el-tabs{
  height: 100%;
}
/deep/.el-tabs__content{
  padding-left: 15px;
}
// form调整
/deep/.el-form--label-top .el-form-item__label{
  padding: 0 0 0 13px;
  position: relative;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-form-item__label::before{
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: #0295ff;
  left: 0;
  top: 17px;
}
// 滑块颜色
/deep/.el-slider__bar{
  background-color: #0295ff;
}
/deep/.el-slider__button{
  border: solid 2px #0295ff;
}
/deep/.el-input-number__increase:hover, /deep/.el-input-number__decrease:hover{
 color: #0295ff; 
}
/deep/.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
/deep/.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
    border-color: #0295ff;
}

.el-select{
  width: 88%;
}
</style>