<template>
  <div id="more-screen">
    <ul class="screen-list">
      <li v-for="item in screenList" :key="item.id" :title="item.name" @click="selectTool(item)">
        <img :src="imgSrc(item)" class="screen-img" />
      </li>
    </ul>
  </div>
</template>

<script>
import {setMapScreenSplit} from "@/units/map/AddLayer";

export default {
  name: "MoreScreen",
  data(){
    return {
      originList:[

      ],
      screenList:[
        {
          id:'0001',
          name:'双屏',
          chosen:false,
          url:'2'
        },
        {
          id:'0002',
          name:'四屏',
          chosen:false,
          url:'4'
        },
        {
          id:'0003',
          name:'六屏',
          chosen:false,
          url:'6'
        },
      ],
      twoScreenList:[
        {
          id:'0001',
          mapID:'map0',
          viewID:'viewDiv_0',
          position:{
            x:'20%',
            y:'15%'
          }
        },
        {
          id:'0002',
          mapID:'map1',
          viewID:'viewDiv_1',
          position:{
            x:'70%',
            y:'15%'
          }
        },
      ],
      fourScreenList:[
        {
          id:'0003',
          mapID:'map0',
          viewID:'viewDiv_0',
          position:{
            x:'20%',
            y:'15%'
          }
        },
        {
          id:'0004',
          mapID:'map1',
          viewID:'viewDiv_1',
          position:{
            x:'70%',
            y:'15%'
          }
        },
        {
          id:'0005',
          mapID:'map2',
          viewID:'viewDiv_2',
          position:{
            x:'20%',
            y:'60%'
          }
        },
        {
          id:'0006',
          mapID:'map3',
          viewID:'viewDiv_3',
          position:{
            x:'70%',
            y:'60%'
          }
        },
      ],
      sixScreenList:[
        {
          id:'0007',
          mapID:'map0',
          viewID:'viewDiv_0',
          position:{
            x:'10%',
            y:'15%'
          }
        },
        {
          id:'0008',
          mapID:'map1',
          viewID:'viewDiv_1',
          position:{
            x:'42%',
            y:'15%'
          }
        },
        {
          id:'0009',
          mapID:'map2',
          viewID:'viewDiv_2',
          position:{
            x:'75%',
            y:'15%'
          }
        },
        {
          id:'0010',
          mapID:'map3',
          viewID:'viewDiv_3',
          position:{
            x:'10%',
            y:'60%'
          }
        },
        {
          id:'0011',
          mapID:'map4',
          viewID:'viewDiv_4',
          position:{
            x:'42%',
            y:'60%'
          }
        },
        {
          id:'0012',
          mapID:'map5',
          viewID:'viewDiv_5',
          position:{
            x:'75%',
            y:'60%'
          }
        },
      ]
    }
  },
  methods:{
    imgSrc(item){
      if(item.chosen){
        return require('../../../../../assets/imgs/mainPage/'+item.url+'-选中.png')
      }else{
        return require('../../../../../assets/imgs/mainPage/'+item.url+'-未选中.png')
      }
    },
    selectTool(item){
      setMapScreenSplit(false);
      this.$emit('setScreenList',this.originList)
      for(let i=0;i<this.screenList.length;i++){
        if(item.name ==this.screenList[i].name) {
          this.screenList[i].chosen = !this.screenList[i].chosen;
          if(this.screenList[i].chosen){
            switch (this.screenList[i].name){
              case "双屏":
                setMapScreenSplit(true,2)
                this.$emit('setScreenList',this.twoScreenList)
                break;
              case "四屏":
                setMapScreenSplit(true,4)
                this.$emit('setScreenList',this.fourScreenList)
                break;
              case "六屏":
                setMapScreenSplit(true,6)
                this.$emit('setScreenList',this.sixScreenList)
                break;
            }
          }
        }
        else{
            this.screenList[i].chosen = false
          }
        }
      }
  }
}
</script>

<style scoped lang="scss">
#more-screen{
  position: absolute;
  right:70px;
  top:350px;
  z-index: 1;
  text-align: center;
  background: rgba(0, 31, 112, 0.6);
  border-radius: 4px;
  border: 1px solid #00a1ff;
  color: #fff;
  .screen-list{
    padding: 10px 0px 10px 0px;
    margin: 0;
  }
  .screen-list li{
    list-style: none;
    cursor: pointer;
    padding: 2px 0px 2px 0px;
  }
  .screen-img{
    width: 35px;
    height: 35px;
  }
}
</style>
