<template>
  <div id="right-tool">
    <ul class="tool-list">
      <li v-for="(item,index) in toolList" :key="item.id" :title="item.name" @click="selectTool(item)">
        <img :src="imgSrc(item)" class="tool-img" />
      </li>
      <li v-for="(item,index) in controlList" :key="item.id" :title="item.name" @click="selectControl(item)">
        <img :src="imgSrc(item)" class="tool-img" />
      </li>
      <li v-for="(item,index) in clearList" :key="item.id" :title="item.name" @click="selectClear(item)">
        <img :src="imgSrc(item)" class="tool-img" />
      </li>
    </ul>

  </div>
</template>

<script>
import {
  addWhiteMold,
  changeBaseMap,
  changeShowSlice,
  setClMap, setMapCircleWatch,
  setMapScreenSplit,
  DrawBuffers,
  setMapSumAna, calculation3D
} from "@/units/map/AddLayer";
import {createNamespacedHelpers} from "vuex";
const {mapState} = createNamespacedHelpers('platform')
export default {
  name: "RightTool",
  computed:{
    ...mapState({
      rightToolState:'rightToolState'
    }),
  },
  data(){
    return{
      toolList:[
        {
          id:"01",
          name:'空间统计',
          code:'spaceStatistics',
          chosen:false,
        },
        {
          id:"02",
          name:'缓冲区分析',
          code:'bufferAnalysis',
          chosen:false,
        },
        {
          id:"03",
          name:'绿地分析',
          code:'greenbelt',
          chosen:false,
        },
        {
          id:"04",
          name:'日照分析',
          code:'sunAnalysis',
          chosen:false,
        },
        {
          id:"05",
          name:'通视分析',
          code:'perspectiveAnalysis',
          chosen:false,
        },
        // {
        //   id:"06",
        //   name:'天际线分析',
        //   code:'horizonAnalysis',
        //   chosen:false,
        // },
        {
          id:"07",
          name:'多屏',
          code:'moreScreen',
          chosen:false,
        },
        {
          id:"08",
          name:'地名地址',
          code:'addressSearch',
          chosen:false,
        },
        {
          id:"09",
          name:'坐标转换',
          code:'coordinateTransform',
          chosen:false,
        },
        {
          id:"10",
          name:'测距',
          code:'distanceMeasure',
          chosen:false,
        },
        {
          id:"11",
          name:'测面',
          code:'areaMeasure',
          chosen:false,
        },
        {
          id:"12",
          name:'剖切',
          code:'slice',
          chosen:false,
        },
        {
          id:"13",
          name:'环视',
          code:'roundView',
          chosen:false,
        },
        {
          id:"14",
          name:'飞行路线',
          code:'flyWay',
          chosen:false,
        },
        {
          id:"15",
          name:'叠加分析',
          code:'compositionAnalysis',
          chosen:false,
        },
        {
          id:"16",
          name:'书签',
          code:'bookmark',
          chosen:false,
        },
      ],
      controlList:[
        {
          id:"17",
          name:'底图切换',
          code:'baseMapChange',
          chosen:false,
        },
      ],
      clearList:[
        {
          id:"18",
          name:'清空',
          code:'',
          chosen:false,
        },
      ],
    }
  },
  methods:{
    imgSrc(item){
      if(item.chosen){
        return require('../../../assets/imgs/mainPage/'+item.name+'2.png')
      }else{
        return require('../../../assets/imgs/mainPage/'+item.name+'1.png')
      }
    },
    selectTool(item){
      for(let i=0;i<this.toolList.length;i++){
        if(item.name ==this.toolList[i].name){
          this.toolList[i].chosen = !this.toolList[i].chosen;
          switch(this.toolList[i].code){


            // case 'sunshineAnalysis':
            //   if(this.toolList[i].chosen){
            //     setMapSumAna(true)
            //   }else{
            //     setMapSumAna(false)
            //   }
            //   break;
            // case 'roundView':
            //   if(this.toolList[i].chosen){
            //     setMapCircleWatch(true)
            //   }else{
            //     setMapCircleWatch(false)
            //   }
            //   break;
            case 'slice':
              if(this.toolList[i].chosen){
                changeShowSlice("open")
              }
              break;
            case 'distanceMeasure':
              if(this.toolList[i].chosen){
                calculation3D('polyline',true)
              }else{
                calculation3D('polyline',false)
              }
              break;
            case 'areaMeasure':
              if(this.toolList[i].chosen){
                calculation3D('polygon',true)
              }else{
                calculation3D('polygon',false)
              }
              break;
            default:
              break;
          }
          if(this.toolList[i].chosen){
            this.$emit('setToolType',item.code);
          }else{
            this.$emit('setToolType','');
          }
        }else{
          this.toolList[i].chosen = false
        }
      }
    },
    selectControl(item){
      debugger
      for(let i=0;i<this.controlList.length;i++){
        if(item.name == this.controlList[i].name){
          this.controlList[i].chosen = !this.controlList[i].chosen;
          if(this.controlList[i].chosen){
            this.$emit('setControlType',item.code);
          }else{
            this.$emit('setControlType','');
          }
        }else{
          this.controlList[i].chosen = false
        }
      }
    },
    selectClear(item){
      this.$emit('setToolType','');
      this.$emit('setControlType','');
      this.selectTool('');
      this.selectControl('')
    },
  },

  watch:{
    rightToolState:{
      handler(){
        this.selectClear()
      }
    },
  }
}
</script>

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

</style>
