<template>
  <div id="greenbelt-analysis-dynamic"  class="map-tool-model">
    <common-map-tool-title @close="close" title="绿地分析"/>
    <div class="main-content p20">
      <div class="single-block">
        <common-num-title title="选择绘制缓冲区要素类型" :num="1"/>
        <div class="single-row">
          <div v-for="item in typeList" :key="item.id" class="type_icon" :class="[item.chosen?'type_icon_chosen':'']" @click="selectSingleType(item)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div v-if="this.form.type =='point'" class="single-block">
        <common-num-title title="选择要分析的图层" :num="2"/>
        <div class="single-row">
          <el-select v-model="form.sideLayer"  :popper-append-to-body="false" @change="showGreenLayer" filterable collapse-tags style="width: 100%" placeholder="请选择">
            <el-option
                v-for="item in greenLayerList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div v-else class="single-block">
        <div class="single-row">
          <el-select v-model="form.unuseLayer"  :popper-append-to-body="false" @change="showUnuseLayer" filterable collapse-tags style="width: 60%;padding-left: 20px" placeholder="请选择">
            <el-option
                v-for="item in greenLayerList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="single-block">
        <common-num-title v-if="this.form.type =='point'"  title="分析半径(m)" :num="3"/>
        <common-num-title v-else  title="分析半径(m)" :num="2"/>
        <div class="single-row">
          <el-slider class="single_distance"
              v-model="form.buffer_distance"
              :max = "1000" :min = "1"
              show-input>
          </el-slider>
        </div>
      </div>
    </div>
    <div class="bottom-btn">
      <div class="btn single_button" style="margin-right: 60px"  @click="deleteAnalysis()">清除</div>
      <div class="btn single_button" @click="runGreenbeltAnalysisDynamic">运行分析</div>
    </div>
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import CommonNumTitle from "@/components/common/CommonNumTitle";
import {
  addGreenLayer,
  addJZXQLayer,
  clearMapDraw,
  drawByType,
  getBuildingPoint,
  greenAnalysis, setMapClick
} from "@/units/map/AddLayer";
import {CHANGE_CURRENT_RETURN_RESULT_ACTION} from "@/view/show-platform/store/action-constant";
import {createNamespacedHelpers} from "vuex";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "GreenbeltAnalysisDynamic",
  components:{
    CommonMapToolTitle,CommonNumTitle
  },
  data(){
    return{
      form:{
        type:'',
        unit:'meters',
        mainLayer:'',   //分析图层
        sideLayer:'',   //被分析图层
        unuseLayer:'',
        buffer_distance:0
      },
      allLayerList:[],
      typeList:[
        {
          id:'01',
          name:'建筑',
          value:'point',
          chosen:true
        },
        {
          id:'02',
          name:'公园',
          value:'object',
          chosen:false
        }
      ],
      greenLayerList:[
        {
          id:'01',
          name:'公园绿地',
          url:'http://172.16.120.2/site03/rest/services/gyld_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/gyld/MapServer'
        },
        {
          id:'02',
          name:'其他绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/qtld_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/qtld/MapServer'
        },
        {
          id:'03',
          name:'生产绿地',
          url:'http://172.16.120.2/site03/rest/services/scld_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/scld/MapServer'
        },
        {
          id:'05',
          name:'街道绿地',
          url:'http://172.16.120.2/site03/rest/services/jdld_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/jdld/MapServer'
        },
        {
          id:'06',
          name:'附属绿地',
          url:'http://10.81.66.1:8080/site03/rest/services/dwfsld_vr/MapServer',
          originUrl:'http://10.81.66.1:8080/site02/rest/services/dwfsld/MapServer'
        }
      ]
    }
  },
  mounted(){
    this.form.type = 'point';
    //this.form.sideLayer = 'http://172.16.120.2/site03/rest/services/gyld_vr/MapServer';
    addJZXQLayer(false)
    setMapClick('','')
  },
  methods:{
    selectSingleType(item){
      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'){
            getBuildingPoint();
          }else{
            getBuildingPoint(true);
          }
        }else{
          this.typeList[i].chosen = false;
        }
      }
    },
    gotoSingleItem(){

    },
    showGreenLayer(){
      let url = '';
      for(let i = 0; i<this.greenLayerList.length;i++){
        if(this.greenLayerList[i].name == this.form.sideLayer){
          url = this.greenLayerList[i].originUrl;
        }
      }
      addGreenLayer(false,url)
    },
    showUnuseLayer(){
      let url = '';
      for(let i = 0; i<this.greenLayerList.length;i++){
        if(this.greenLayerList[i].name == this.form.unuseLayer){
          url = this.greenLayerList[i].originUrl;
        }
      }
      addGreenLayer(false,url)
    },
    runGreenbeltAnalysisDynamic(){
      debugger
      this[CHANGE_CURRENT_RETURN_RESULT_ACTION]('')
      this.$emit('setLoading',true);
      if(this.form.type =="point"){
        let url = '';
        for(let i = 0; i<this.greenLayerList.length;i++){
          if(this.greenLayerList[i].name == this.form.sideLayer){
            url = this.greenLayerList[i].url;
          }
        }
        greenAnalysis('',url,this.form.type,this.form.buffer_distance);
      }else if(this.form.type =="object"){
        greenAnalysis('',"http://172.16.120.2/site03/rest/services/jzxqm_vr/MapServer",this.form.type,this.form.buffer_distance);
      }
      this.$emit('setToolDetailResultType','greenbeltAnalysisDynamicResult');
    },
    deleteAnalysis(){
      clearMapDraw(true,true,true);
      this.$emit('setToolDetailResultType','');
      //this.$emit('setToolDetailType','');
    },
    close(){
      addJZXQLayer(true)
      this.$emit('setToolDetailType','');
      this.$emit('setToolDetailResultType','');
    },
    ...mapActions({
      [CHANGE_CURRENT_RETURN_RESULT_ACTION]:CHANGE_CURRENT_RETURN_RESULT_ACTION
    })
  },
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-select__tags{
    white-space: nowrap;
    overflow: hidden;
  }
  .el-select__input{
    color: #fff;
  }
  .el-select-dropdown__wrap{
    max-height: 150px;
  }
  .el-scrollbar__wrap{
    overflow-y: scroll;
    height: 100%;
  }
  .el-select-dropdown{
    position: absolute !important;
    left: 0px !important;
    border: 1px solid #00a1ff !important;
    background-color: rgba(0, 31, 112, 0.8) !important;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-tag.el-tag--info .el-tag__close{
    color: transparent !important;
  }
  .el-select .el-tag__close.el-icon-close{
    color: #409EFF  !important;
    background-color: transparent  !important;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: rgba(0, 31, 112, 1);
  }
  .el-tag.el-tag--info {
    background-color: rgba(0, 31, 112, 0.8);
    border-color: #00a1ff;
    color: #409EFF;
  }
  .el-select-dropdown__item{
    color:#fff
  }
  .el-input-number__decrease, .el-input-number__increase{
    background: transparent;
    color: #fff;
  }
}
#greenbelt-analysis-dynamic{
  position: absolute;
  z-index: 1;
  width: 400px;
  top: 89px;
  right: 120px;
  .main-content{
    .single-block {
      display: flex;
      flex-direction: column;

      .title_type{
        color: #fff;
        .span_1{
          padding-left: 15px;
        }
        .span_2{
          padding-left: 130px;
        }
        padding-bottom: 5px;
      }
      .single-row {
        padding-bottom: 10px;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .single_distance{
          width: 95%;
          padding-left: 5%;
        }
        .type_icon{
          cursor: pointer;
          padding: 5px 20px;
          margin-left: 20px;
          border-radius: 2px;
          border: 1px solid rgba(0, 170, 255, 0.8);
        }
        .type_icon_chosen{
          background-color: rgba(0, 204, 255, 0.7);
        }
      }
      .single_result{
        padding-left: 20px;
        color: #fff;
      }
    }
  }
}
</style>
