<template>
  <div id="single-sun-analysis">
    <div class="explain_border">
      <span class="explain_content">请单击场景，选择建筑</span>
    </div>
    <div class="main_content">
      <div class="single_content">
        <button @click="selectSingleType" class="single_button">选择建筑</button>
      </div>
      <div class="single_content">
        <button @click="runSunAnalysis" class="single_button">下一步</button>
      </div>
      <div class="single_content">
        <button @click="deleteAnalysis" class="single_button">清除</button>
      </div>
    </div>
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import CommonNumTitle from "@/components/common/CommonNumTitle";
import {getDefinedLayer, getMoreBuildingPoint, setMapSumAna} from "@/units/map/AddLayer";
export default {
  name: "SingleSunAnalysis",
  components:{
    CommonMapToolTitle,CommonNumTitle
  },
  data(){
    return{
      form:{
        type:'',
      },
      typeList:[
        {
          id:'01',
          name:'建筑',
          value:'point',
          chosen:true
        }
      ],
    }
  },
  mounted() {
    this.form.type = 'point';
  },
  methods:{
    close(){
      this.$emit('setToolDetailType','');
    },
    deleteAnalysis(){
      getDefinedLayer(true);
    },
    runSunAnalysis(){
      getDefinedLayer(false);
      setMapSumAna(true)
      this.$emit('setToolDetailType','singleSunAnalysisDetail');
    },
    selectSingleType(){
      let  item = this.typeList[0];
      for(let i=0;i<this.typeList.length;i++){
        if(item.id==this.typeList[i].id){
          this.typeList[i].chosen = true;
          this.form.type=this.typeList[i].value;
          if(this.form.type =='point'){
            getMoreBuildingPoint();
          }else{
            getMoreBuildingPoint(true);
          }
        }else{
          this.typeList[i].chosen = false;
        }
      }
    },
  }
}
</script>

<style scoped lang="scss">
#single-sun-analysis{
  position: absolute;
  z-index: 1;
  width: 350px;
  height:200px;
  top: 89px;
  right: 155px;
  color:#FFF;
  background-color:rgba(0, 31, 112, 0.9);
  .explain_border{
    margin: 10px;
    padding: 5px 10px;
    .explain_content{
      font-size: 16px;
    }
  }
  .main_content{
    display:flex;
    flex-direction: column;
    .single_content{
      height:40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .single_button{
        color:#fff;
        width: 80%;
        padding: 5px;
        cursor: pointer;
        text-align: center;
        background-color: #0079c1;
        border: 1px solid #0079c1;
      }
    }
  }
}
</style>
