<template>
  <div class="show-map-div">
    <div class="select-menu">
      <div class="add-on-map" v-if="selectType !== 2">
        <a-checkbox v-model:checked="addOnMap" @change="(e) => addOnMapChange(e.target.checked)">叠加到地图</a-checkbox>
      </div>
      <a-radio-group v-model:value="selectType" button-style="solid" size="small">
        <a-radio-button :value="0">专题图</a-radio-button>
        <a-radio-button :value="1">截图</a-radio-button>
        <a-radio-button :value="2">天地图</a-radio-button>
      </a-radio-group>
    </div>
    <template v-if="selectType === 0 && !addOnMap">
        <a-image
          :width="470"
          :height="470"
          :src="showData?.url"
        />
    </template>
    <template v-if="selectType === 1 && !addOnMap">
      <a-image
        :width="470"
        :height="470"
        :src="showData.screenshotImage"
      />
    </template>
    <template v-if="selectType === 2 || addOnMap">
      <ModalMap :width="'470px'" :height="'470px'" @getMap="getMap"/>
    </template>
    
  </div>
  <a-tabs v-model:activeKey="type">
    <a-tab-pane key="1" tab="土地分类">
      <ShowTableList 
        :columns="landClassificationColumns" 
        :data="landClassifyTable"
        :title="'土地利用现状查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="2" tab="耕地占用">
      <ShowTableList 
        :columns="landPlanningColumns" 
        :data="plowLandOccupyTable"
        :title="'土地规划查询结果'"/>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { ref, defineProps, computed, watch, onMounted } from "vue"
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue'
import ModalMap from './ModalMap/index.vue'

const props = defineProps(['data'])
let map
onMounted(() => {
  if(props.data){
    type.value = props.data[0].name
  }
})
const type = ref('1')
const landClassifyTable = computed(() => {

  let data
  props.data?.forEach(item => {
    if(item.name == '土地分类'){
      data = {...item}
    }
  })
  return data && data.list
})
const plowLandOccupyTable = computed(() => {
  let data
  props.data?.forEach(item => {
    if(item.name == '耕地分类'){
      data = {...item}
    }
  })
  return data && data.list
})
const showData = computed(() => {
  let data
  switch(type.value){
    case '1':
      props.data?.forEach(item => {
        if(item.name == '土地分类'){
          data = {...item}
        }
      })
      return data
    case '2':
        props.data?.forEach(item => {
          if(item.name == '耕地分类'){
            data = {...item}
          }
        })
      return data
  }
})
const addOnMap = ref(false)
const selectType = ref(0)
const landClassificationColumns = [
  {
    title: '地类名称',
    dataIndex: 'type',
    key: 'type',
    sorter:(a,b) => a.landName - b.landName,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '联合属性',
    dataIndex: 'stats',
    key: 'stats',
    sorter:(a,b) => a.stats.length - b.stats.length,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '面积（亩）',
    dataIndex: 'area',
    key: 'area',
    sorter:(a,b) => a.area - b.area,
    sortDirections: ['descend', 'ascend'],
  },
]
const landPlanningColumns = [
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    sorter:(a,b) => a.type.length - b.type.length,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '面积（亩）',
    dataIndex: 'area',
    key: 'area',
    sorter:(a,b) => a.area - b.area,
    sortDirections: ['descend', 'ascend'],
  },
]
const getMap = (value) => {
  map = value
}
const addOnMapChange = (value) => {
  setTimeout(() => {
    let url= ''
    let fourpoint = ''
    if(value){
      let data = {}
      if(type.value == '1'){
        props.data.forEach(item => {
          if(item.name == '土地分类'){
            data = {...item}
          }
        })
      }else if(type.value == '2'){
        props.data.forEach(item => {
          if(item.name == '耕地分类'){
            data = {...item}
          }
        })
      }
      if(selectType.value == 0){
        url = data.url
        fourpoint = JSON.parse(`[${data.fourpoint}]`)
      }
    }
  
    map.addSource('radar', {
      type: 'image',
      url:url,
      coordinates: fourpoint
    });
    map.addLayer({
      id: 'radar-layer',
      type: 'raster',
      source: 'radar',
      paint: {
        'raster-fade-duration': 0
      }
    });
    let x = 0
    let y = 0
    let length = fourpoint.length
    for(let i = 0; i < fourpoint.length; i++){
      x = x + fourpoint[i][0]
      y = y + fourpoint[i][1]
    }
    x = x / length
    y = y / length
    map.flyTo({
      center: [x,y],
      zoom: 14,
    });
  },500)
}
</script>

<style lang="scss" scoped>
.select-menu{
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  .add-on-map{
    width: 110px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
}
.show-map-div{
  width: 470px;
  height: 470px;
  position: relative;
}
</style>
