<template>
  <div id="composition-analysis" 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 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>
      <div v-if="form.type!=='layer'" class="single-block">
        <common-num-title title="在地图上选择需要分析的对象" :num="2"/>
      </div>
      <div v-else class="single-block">
        <common-num-title title="选择需要分析的要素图层" :num="2"/>
        <div class="single-row">
          <el-select v-model="form.layerUrl" :popper-append-to-body="false"  filterable style="width: 100%" placeholder="请选择">
            <el-option
                v-for="item in allLayerList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="single-block">
        <common-num-title title="选择分析方式" :num="3"/>
        <div class="single-row">
          <el-select v-model="form.analysisType" :popper-append-to-body="false" filterable collapse-tags style="width: 100%" placeholder="请选择">
            <el-option
                v-for="item in analysisTypeList"
                :key="item.name"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="single-block">
        <common-num-title title="选择被分析的图层" :num="4"/>
        <div class="single-row">
          <el-select v-model="form.subLayerUrl" :popper-append-to-body="false" filterable @change="changeLayer"  style="width: 100%" placeholder="请选择">
            <el-option
                v-for="item in allLayerList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="single-block">
        <common-num-title class="half-margin"  title="配置筛选的内容" :num="5"/>
        <div class="single_content">
          <div class="content_title">
            <span class="single_title1">字段名称</span>
            <span class="single_title2">筛选类型</span>
            <span class="single_title3">筛选值</span>
            <span>操作</span>
          </div>
          <ul>
            <li v-for="item in statisticsList" class="statistics_item" :key="item.id">
              <el-select v-model="item.field" :popper-append-to-body="false" filterable collapse-tags style="width: 30%" placeholder="请选择">
                <el-option
                    v-for="item in showField"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="item.statisticsType" :popper-append-to-body="false" filterable collapse-tags style="width: 20%" placeholder="请选择">
                <el-option
                    v-for="item in statisticsTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="item.value" style="width: 42%" />
              <i class="el-icon-delete fly_icon" @click="deleteSingleItem(item)"></i>
            </li>
          </ul>
          <div class="single_add" @click="addSingleItem">
            <span>+</span>
          </div>
        </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="runCompositionAnalysis">运行分析</div>
    </div>
  </div>
</template>

<script>
import {getLayerFieldList, getLayerList} from "@/service/show-platform";
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import CommonNumTitle from "@/components/common/CommonNumTitle";
import {clearMapDraw, CompositionAnalysis, drawByType} from "@/units/map/AddLayer";
import {CHANGE_CURRENT_RETURN_RESULT_ACTION} from "@/view/show-platform/store/action-constant";
import {createNamespacedHelpers} from "vuex";
import {nanoid} from "nanoid";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "CompositionAnalysis",
  components:{
    CommonMapToolTitle,
    CommonNumTitle
  },
  data(){
    return{
      allLayerList:[],
      analysisTypeList:[
        {
          name:'交集',
          value:'intersect'
        },
        {
          name:'并集',
          value:'union'
        },
        {
          name:'交集取反',
          value:'difference'
        },
      ],
      typeList:[
        {
          id:'01',
          name:'图层',
          value:'layer',
          chosen:false
        },
        {
          id:'02',
          name:'对象',
          value:'object',
          chosen:false
        },
      ],
      form:{
        type:'',
        layerUrl: '',
        analysisType:'',
        subLayerUrl:''
      },
      statisticsList:[
      ],
      showField:[
      ],
      statisticsTypeList:[
        {
          label:'>',
          value:'>',
        },
        {
          label:'<',
          value:'<',
        },
        {
          label:'=',
          value:'=',
        },
      ],

    }
  },
  mounted(){
    getLayerList().then(res =>{
      let data = res.msg[0].Rows;
      this.getLayerList(data)
    })
  },
  methods:{
    changeLayer(){
      let id=this.form.subLayerUrl;
      getLayerFieldList(id).then(res =>{
        debugger;
        let data = res.msg[0].Rows;
        let fieldData = []
        for(let i=0;i<data.length;i++){
          let temp = {
            value:data[i].ATTRIBUTE_NAME,
            label:data[i].FIELD_DESCRIPTION,
            type:data[i].FIELD_TYPE,
            children:data[i].children
          }
          fieldData.push(temp)
        }
        this.showField = fieldData;
      })
    },
    deleteSingleItem(item){
      for(let i=0;i<this.statisticsList.length;i++){
        if(item.id ==this.statisticsList[i].id){
          this.statisticsList.splice(i,1)
        }
      }
    },
    addSingleItem(){
      this.statisticsList.push({
        id:nanoid(),
        field:'',
        statisticsType:'',
        value:''
      })
    },
    getLayerList(data){
      let allData = [] //全部的分类无序数据
      let totalData = [] //全部的一级节点数据
      this.allLayerList = [];
      //筛选出指定大类数据
      for(let i=0;i<data.length;i++){
        allData.push(data[i])
      }
      //获取全部一级节点数据
      allData.forEach((item,index)=>{
        let obj = item;
        totalData.push({
          label:obj.SECOND_TYPE,
          id:obj.MAIN_CODE + obj.SECOND_CODE,
          pid:obj.MAIN_TYPE,
          type:"second",
          children: []
        })
      })
      totalData = this.uniqueFunc(totalData,'label');

      //对于全部节点数据进行填充
      for(let j=0;j<totalData.length;j++){
        for(let k=0;k<allData.length;k++){
          if(totalData[j].label ==allData[k].SECOND_TYPE){
            let node = {
              id:allData[k].CODE,
              label:allData[k].TYPE_NAME,
              pid:allData[k].SECOND_CODE,
              type: "layer",
              opacity:100,    //设置默认的透明度
              url: allData[k].ADDRESS,
              layertype: allData[k].TYPE,
              u_code: allData[k].U_CODE,
              u_name: allData[k].U_NAME,
              time: allData[k].TIME,
              main: allData[k].MAIN_TYPE,
            }
            this.allLayerList.push(node)
          }
        }
      }
    },
    uniqueFunc(arr, uniId){
      const res = new Map();
      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
    },
    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 =='polygon'){
          //   drawByType(this.typeList[i].value,true)
          // }else{
          //   drawByType('',true)
          // }
        }else{
          this.typeList[i].chosen = false;
        }
      }
    },
    getNewUr(url){
      debugger
      switch (url){
        case "D90040200202111":   //北外滩边界
          return "http://172.16.120.2/site03/rest/services/bwtbj_vr/MapServer"
          break;
        case "D30050002201706":   //居住小区面
          return "http://172.16.120.2/site03/rest/services/jzxqm_vr/MapServer"
          break;
        case "D09010103201506":   //公园绿地
          return "http://172.16.120.2/site03/rest/services/gyld_vr/MapServer"
          break;
        case "D09010201201501":   //生产绿地
          return "http://172.16.120.2/site03/rest/services/scld_vr/MapServer"
          break;
        case "D09010102201501":   //街道绿地
          return "http://172.16.120.2/site03/rest/services/jdld_vr/MapServer"
          break;
        case "D90030000202108":   //白膜
          return "whiteMold"
          break;
      }
    },
    deleteAnalysis(){
      clearMapDraw(true,true,true);
      this.$emit('setToolDetailType','');
    },
    runCompositionAnalysis(){
      let where= "1=1";
      for(let i=0;i<this.statisticsList.length;i++){
        if(isNaN(Number(this.statisticsList[i].value,10))){
          where += " and " + this.statisticsList[i].field + " "+this.statisticsList[i].statisticsType +"'"+this.statisticsList[i].value+"'";
        }else{
          where += " and " + this.statisticsList[i].field + " "+this.statisticsList[i].statisticsType +this.statisticsList[i].value;
        }
      }
      debugger
      console.log(where)
      debugger
      this[CHANGE_CURRENT_RETURN_RESULT_ACTION]('')
      //this.getNewUr(this.form.mainLayer,this.form.sideLayer);
      let mainUrl= "";
      let sideUrl= "";
      mainUrl = this.getNewUr(this.form.layerUrl);
      sideUrl = this.getNewUr(this.form.subLayerUrl);
      CompositionAnalysis(mainUrl,sideUrl,this.form.type,this.form.analysisType,where);
      this.$emit('setLoading',true);
      this.$emit('setToolDetailType','compositionResult');
    },
    close(){
      this.$emit('setToolType','');
    },
    ...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{
    border: none !important;
    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-radio{
    color: #fff;
  }
}
#composition-analysis{
  position: absolute;
  z-index: 1;
  width: 500px;
  top: 89px;
  right: 80px;
  .single-row {
    padding-bottom: 10px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .type_icon{
      cursor: pointer;
      padding: 5px 20px;
      margin: 0px 10px;
      border-radius: 2px;
      border: 1px solid rgba(0, 170, 255, 0.8);
    }
    .type_icon_chosen{
      background-color: rgba(0, 204, 255, 0.7);
    }
  }
  .single-block {
    display: flex;
    flex-direction: column;

    .title_type{
      color: #fff;
      .span_1{
        padding-left: 25px;
      }
      .span_2{
        padding-left: 165px;
      }
      padding-bottom: 5px;
    }
    .single-row {
      padding-bottom: 10px;
      color: #fff;
      display: flex;
      flex-direction: row;
      //justify-content: space-evenly;
      .type_icon{
        cursor: pointer;
        padding: 5px 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;
    }
    .single_content{
      .content_title{
        color: #fff;
        display: flex;
        padding: 0px;
        margin:0px 10px 0px 10px;
        justify-content: space-between;
        .single_title1{
          display: flex;
          justify-content: center;
          width: 30%;
        }
        .single_title2{
          display: flex;
          justify-content: center;
          width: 20%;
        }
        .single_title3{
          display: flex;
          justify-content: center;
          width: 40%;
        }
      }
      >ul{
        list-style-type: none;
        padding: 4px;
        margin:0px 10px 0px 10px;
        height: 140px;
        overflow-y: auto;
        overflow-x: hidden;
        .statistics_item{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding:5px 0px;
          border-bottom: 1px solid #409EFF;
          .fly_icon{
            cursor: pointer;
            color: #fff;
            display: flex;
            align-items: center;
          }
        }

      }
      .single_add{
        cursor: pointer;
        margin:10px 10px 10px 10px;
        height: 40px;
        border: 1px dashed #409EFF;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          color: #fff;
          font-size: 20px;
        }
      }
    }
  }
  .half-margin{
    margin-bottom: 4px;
  }
  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb{
    background-color: #028aab;
    border-radius: 3px;
  }
}
</style>
