<template>
  <div id="greenbelt-analysis-dynamic-result" class="map-tool-model">
    <common-map-tool-title @close="close" title="统计结果"/>
    <div class="main-content p20">
      <el-table
          @row-click="gotoSingleItem"
          :data="tableData"
          :height="250"
          style="width: 100%">
        <el-table-column
            v-for="(item,index) in coloumList" :key="index"
            show-overflow-tooltip
            :prop="item.prop"
            :label="item.label">
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-btn">
      <div class="btn single_button" @click="outputExcel">
        <download-excel class="blueBtn"
                        :data="tableData"
                        :fields="json_fields"
                        worksheet="My Worksheet"
                        name="分析结果"
        >
          导出Excel<i class="el-icon-download el-icon--right"></i>
        </download-excel>
      </div>
      <div class="btn single_button" @click="close">关闭</div>
    </div>
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import {createNamespacedHelpers} from "vuex";
import {setFieldQuerySearch, setMapTy} from "@/units/map/AddLayer";
const {mapState} = createNamespacedHelpers('platform')
export default {
  name: "GreenbeltAnalysisDynamicResult",
  components:{
    CommonMapToolTitle
  },
  computed:{
    ...mapState({
      currentReturnResult:'currentReturnResult'
    }),

  },
  data(){
    return{
      activeName:'second',
      coloumList:[],
      tableData: [],
      json_fields:{

      },
    }
  },
  methods:{
    getColoumAndData(val){
      debugger
      this.coloumList = [];
      this.tableData = [];
      this.$emit('setLoading',false);
      if(val.length > 0){
        debugger
        this.$emit('setLoading',false);
        if(val[0].geometry !==undefined){
          let tempTable = [];
          this.json_fields = {};
          for(let i=0;i<val.length;i++){
            tempTable.push(val[i].attributes)
          }
          for(let key in tempTable[0]){
            let temp = {
              prop:key,
              label:key
            }
            this.json_fields[key] = key;
            this.coloumList.push(temp)
          }
          this.tableData = tempTable;
        }else{
          this.json_fields = {};
          for(let key in val[0]){
            let temp = {
              prop:key,
              label:key
            }
            this.json_fields[key] = key;
            this.coloumList.push(temp)
          }
          this.tableData = val;
        }
      }
      if(val.features.length > 0 && val.attributes.length > 0){
        debugger
        this.$emit('setLoading',false);
        this.json_fields = {};
        for(let key in val.attributes[0]){
          let temp = {
            prop:key,
            label:key
          }
          this.json_fields[key] = key;
          this.coloumList.push(temp)
        }
        this.tableData = val.attributes;
      }
      console.log(val)
    },
    gotoSingleItem(row){
      console.log(row)
      if(this.currentReturnResult.features !==undefined){
        setFieldQuerySearch('whiteMold','OBJECTID='+row.OBJECTID);
      }else{
        for(let i=0;i<this.currentReturnResult.length;i++){
          if(this.currentReturnResult[i].attributes.OBJECTID == row.OBJECTID){
            debugger
            setMapTy(this.currentReturnResult[i].geometry,"singleGraphicHighLight");
          }
        }
      }
    },
    outputExcel(){

    },
    close(){
      this.$emit('setToolDetailResultType','');
    }
  },
  watch:{
    currentReturnResult:{
      //immediate:true,
      deep:true,
      handler(val){
        if(val !==''){
          this.getColoumAndData(val)
        }
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-tabs__item{
    color: #fff;
  }
  .el-tabs__item.is-active {
    color: #409EFF !important;
  }
  .el-tabs--card>.el-tabs__header{
    border-bottom: 1px solid rgba(0, 170, 255, 0.8);
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border-bottom: 1px solid rgba(0, 170, 255, 0.8);
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border:1px solid rgba(0, 170, 255, 0.8);
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item{
    border-left:1px solid rgba(0, 170, 255, 0.8);
  }
  .el-table, .el-table__expanded-cell{
    background-color: transparent;
  }
  .el-table th.el-table__cell{
    background-color: transparent;
  }
  .el-table tr{
    background-color: transparent;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border-bottom: 1px solid rgba(0, 170, 255, 0.8);
  }
  .el-table thead{
    color: #fff;
  }
  .el-table{
    color: #fff;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: transparent;
  }
  .el-table tbody tr:hover>td {
    background: rgba(0, 204, 255, 0.7) !important
  }
}
#greenbelt-analysis-dynamic-result{
  position: absolute;
  z-index: 1;
  width: 650px;
  top: 150px;
  left: 540px;
  .bottom-btn{
    display: flex;
    justify-content: right;
    .single_button{
      margin: 0px 10px;
    }
  }
  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb{
    background-color: #028aab;
    border-radius: 3px;
  }
}
</style>
