<template>
  <div id="composi-ana" 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="type_icon"  @click="typeChange">
            面
          </div>
        </div>
      </div>
      <div class="single-block">
        <common-num-title title="选择叠加分析的方式" :num="2"/>
        <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="3"/>
        <div class="single-row" v-if="currentReturnCalculation.length > 0">
          <div class="single_result">面积为：{{currentReturnCalculation}}</div>
        </div>
      </div>
    </div>
    <div class="bottom-btn">
      <div class="btn single_button" @click="runCompositionAnalysis">运行分析</div>
    </div>
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import CommonNumTitle from "@/components/common/CommonNumTitle";
import {drawByType, SetGeometryEngine} from "@/units/map/AddLayer";
import {createNamespacedHelpers} from "vuex";
import {CHANGE_CURRENT_RETURN_CALCULATION_ACTION} from "@/view/show-platform/store/action-constant";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "ComposiAna",
  components:{
    CommonMapToolTitle,CommonNumTitle
  },
  computed:{
    ...mapState({
      currentReturnCalculation:'currentReturnCalculation'
    })
  },
  data(){
    return{
      analysisTypeList:[
        {
          name:'交集',
          value:'intersect'
        },
        {
          name:'并集',
          value:'union'
        },
        {
          name:'交集取反',
          value:'difference'
        }
      ],
      form:{
        analysisType:''
      }
    }
  },
  methods:{
    typeChange(){
      drawByType('polygon',false)
    },
    runCompositionAnalysis(){
      SetGeometryEngine(this.form.analysisType)
    },
    close(){
      this[CHANGE_CURRENT_RETURN_CALCULATION_ACTION]('')
      this.$emit('setToolType','');
    },
    ...mapActions({
      [CHANGE_CURRENT_RETURN_CALCULATION_ACTION]:CHANGE_CURRENT_RETURN_CALCULATION_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;
  }
}
#composi-ana{
  position: absolute;
  z-index: 1;
  width: 510px;
  top: 89px;
  left: 578px;
  .main-content {
    .single-block {
      display: flex;
      flex-direction: column;

      .single-row {
        padding-bottom: 10px;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: left;
        padding-left: 20px;
        .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;
      }
    }
  }
}
</style>
