<template>
  <div id="controlCabin" class="h100">
    <div id="contentId" class="content">
      <div class="buttonList">
        <span v-for="item in haderArr" :key="item.id" class="singleButton">
          <div>
<!--            <img :src="require('../../assets/imgs/房屋.png')" class="handel_Img" alt="">-->
              <img :src="imgSrc(item)" class="handel_Img" alt="">
          </div>
          <span class="handel_Content" @click="clickFn($event,item.url)">{{item.name}}</span>
        </span>
      </div>

      <div style="width:100%;height:100%">
        <iframe  id="rightFrame" v-bind:src="contents" frameborder=0 name="showHere" ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ControlCabin",
  components: {

  },
  data(){
    return{
      contents:'',
      haderArr:[
        {
          id:'1',
          name:'整体情况',
          url:'http://10.81.71.229:82/wf/#/economicOperation',
          src:'房屋',
        },
        {
          id:'2',
          name:'年度重点工作',
          url:'http://10.81.71.229:82/wf/#/houseCommission2021/importantTaskProgress',
          src:'数据源',
        },
        {
          id:'3',
          name:'城市运行状态',
          url:'http://10.81.71.229:82/wf/#/industryOverview',
          src:'运行总览',
        },

        // {
        //   name:'整体情况',
        //   url:'http://10.81.71.229:82/#/houseCommission/cityBuilding',
        //   src:'房屋',
        // },
        // {
        //   name:'年度重点工作',
        //   url:'http://10.81.71.229:82/#/houseCommission/builtAppoint',
        //   src:'数据源',
        // },
        // {
        //   name:'城市运行状态',
        //   url:'http://10.81.71.229:82/#/houseCommission/cityOperation',
        //   src:'运行总览',
        // },
      ]
    }
  },
  mounted() {
    this.loadUrl();
    let allPartChooseList = document.getElementsByClassName('handel_Content')
    for(let i=0; i< allPartChooseList.length;i++){
      if(this.hasClass(allPartChooseList[i],'active')){
        this.removeClass(allPartChooseList[i],'active');
      }
    }
    this.addClass(allPartChooseList[0],'active')
  },
  methods:{
    imgSrc(item){
      return require('../../assets/imgs/'+item.src+'.png');
    },
    hasClass(elements,cName){
      return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
    },
    addClass(elements,cName){
      if( !this.hasClass( elements,cName ) ){
        elements.className += " " + cName;
      }
    },
    removeClass(elements,cName){
      if( this.hasClass( elements,cName ) ){
        elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
      }
    },
    clickFn(e,params){
      this.contents = params;
      let allPartChooseList = document.getElementsByClassName('handel_Content')
      for(let i=0; i< allPartChooseList.length;i++){
        if(this.hasClass(allPartChooseList[i],'active')){
          this.removeClass(allPartChooseList[i],'active');
        }
      }
      this.addClass(e.target,'active')
    },
    loadUrl(){
      this.contents = 'http://10.81.71.229:82/wf/#/economicOperation'
    },
  },
}
</script>

<style scoped lang="scss">
#controlCabin{
  //background: #001a53;
  width: 100%;
  height: 100%;
  background: url("../../assets/imgs/BG.png") no-repeat;
  background-size: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  .content{
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    justify-content: space-between;
    >iframe{
      width: 100%;
      height: 100%;
      .calcite{
        background-color: #061e35;
      }
    }
  }
}
#contentId{
  position:relative;
}
.buttonList{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
  width:30px;
  height:700px;
  left:2.5%;
  top: 110px;



  background: transparent;
  padding-left: 0;
  border: none;
  position: absolute;

}

.handel_Img{
  width: 17px;
  height: 17px;
}
.singleButton{
  cursor: pointer;
  width:30px;
  height:200px;
  background-color: transparent;
  border-radius: 4px;
  border: 2px solid #00a1ff;

  padding-top: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
#rightFrame{
  width:100%;
  height:100%;
}
.handel_Content{
  padding: 20px;
  font-size: 18px;
  color: #1fade2;
}
.singleButton span:hover,.singleButton span.active
{
  color: #fff;
}
</style>
