<template>
  <div id="coordinate-transform-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 {addDataPoint, changePosition} from "@/units/map/AddLayer";
const {mapState} = createNamespacedHelpers('platform')
export default {
  name: "CoordinateTransformResult",
  components:{
    CommonMapToolTitle
  },
  computed: {
    ...mapState({
      coordinateTransformData: 'coordinateTransformData',
      coordinateResultHeader:'coordinateResultHeader'
    }),
  },
  data(){
    return{
      tableData:[],
      coloumList:[],
      json_fields:{

      },
    }
  },
  methods:{
    gotoSingleItem(val){
      if(this.coordinateResultHeader.handle_number =='批量处理'){
        if(this.coordinateResultHeader.handle_type =='1'){
          let positionX = this.coordinateResultHeader.longitude;
          let positionY =  this.coordinateResultHeader.latitude;
          let position = [
            {
              "mapx": val[positionX],
              "mapy": val[positionY],
            },
          ]
          changePosition(position,true,true)
        }else{
          let position = [
            {
              "mapx": val["mapX"],
              "mapy": val["mapY"],
            },
          ]
          changePosition(position,true,true)
        }
      }else{
        if(this.coordinateResultHeader.handle_type =='1'){
          let position = [
            {
              "mapx": val["RMapX"],
              "mapy": val["RMapY"],
            },
          ]
          changePosition(position,true,true)
        }else{
          let position = [
            {
              "mapx": val["X"],
              "mapy": val["Y"],
            },
          ]
          changePosition(position,true,true)
        }
      }
    },
    getColoumAndData(val){
      debugger
      this.$emit('setLoading',false);
      this.coloumList = [];
      this.tableData = [];
      let mapPositionData = [];
      if(val.length > 0){
        this.json_fields = {};
        for(let key in val[0]){
          let temp = {
            prop:key,
            label:key
          }
          this.coloumList.push(temp)
          this.json_fields[key] = key;
        }
        this.tableData = val;
      }
      console.log(this.coordinateResultHeader)
      if(this.coordinateResultHeader.handle_number =='批量处理'){
        if(this.coordinateResultHeader.handle_type =='1'){
          let positionX = this.coordinateResultHeader.longitude;
          let positionY =  this.coordinateResultHeader.latitude;
          for(let i=0;i<val.length;i++){
            let temp = {
              mapx:val[i][positionX],
              mapy:val[i][positionY],
            }
            mapPositionData.push(temp);
          }
        }else{
          for(let i=0;i<val.length;i++){
            let temp = {
              mapx:val[i]["mapX"],
              mapy:val[i]["mapY"],
            }
            mapPositionData.push(temp);
          }
        }
        debugger
        console.log(mapPositionData);
        addDataPoint(true,mapPositionData)
      }else{

      }
      console.log(val)
    },
    outputExcel(){

    },
    close(){
      this.$emit('setToolDetailType','');
    },
  },
  watch:{
    coordinateTransformData:{
      //immediate:true,
      deep:true,
      handler(val){
        debugger
        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
  }
}
#coordinate-transform-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>
