<template>
  <div id="base-map-change">

    <div @click="threeObject.chosen = !threeObject.chosen">
      <img :src="imgSrc(threeObject)">
    </div>
    <ul class="screen-list">
      <li v-for="item in baseMapList" :class="[item.chosen?'base_chosen':'']" :key="item.id" :title="item.name" @click="selectTool(item)">
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {addWhiteMold, changeBaseMap} from "@/units/map/AddLayer";

export default {
  name: "BaseMapChange",
  data(){
    return{
      threeObject:{
        chosen:true,
        url:'3D'
      },
      baseMapList:[
        {
          id:'01',
          name:'政务',
          value:'zwdt',
          opacity:1,
          chosen:false
        },
        {
          id:'02',
          name:'遥感',
          value:'air',
          opacity:1,
          chosen:false
        },
        {
          id:'03',
          name:'暗色',
          value:'basemap',
          opacity:0.7,
          chosen:true
        },
      ]
    }
  },
  methods:{
    imgSrc(item){
      if(item.chosen){
        addWhiteMold(true)
        return require('../../../../../assets/imgs/mainPage/'+item.url+'-选中.png')
      }else{
        addWhiteMold(false)
        return require('../../../../../assets/imgs/mainPage/'+item.url+'-未选中.png')
      }
    },
    selectTool(item){
      for(let i=0;i<this.baseMapList.length;i++){
        if(item.name ==this.baseMapList[i].name) {
          this.baseMapList[i].chosen = true;
          changeBaseMap(this.baseMapList[i].value,this.baseMapList[i].opacity);
        }
        else{
          this.baseMapList[i].chosen = false;
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
#base-map-change{
  position: absolute;
  right:70px;
  top:780px;
  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: 2px 0px 4px 0px;
    margin: 0;
    .base_chosen{
      color: #ffc600;
    }
  }

  .screen-list li{
    list-style: none;
    cursor: pointer;
    padding: 2px 0px 2px 0px;
    margin: 4px 0px;
    background-color: rgba(0, 31, 112, 0.8);
    color: #00d8ff;
  }
}
</style>
