<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">叠加到地图</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">
        <a-image
          :width="470"
          :height="470"
          :preview="false"
          :src="image"
        />
    </template>
    <template v-if="selectType === 1"></template>
    <template v-if="selectType === 2">
      <ModalMap :width="'470px'" :height="'470px'"/>
    </template>
    
  </div>
  <a-tabs v-model:activeKey="type">
    <a-tab-pane key="1" tab="土地分类">
      <ShowTableList 
        :columns="landClassificationColumns" 
        :data="landClassificationData"
        :title="'土地利用现状查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="2" tab="城镇村等用地">Content of tab </a-tab-pane>
    <a-tab-pane key="3" tab="土地坐落">Content of tab </a-tab-pane>
    <a-tab-pane key="4" tab="基本农田">Content of tab </a-tab-pane>
    <a-tab-pane key="5" tab="土地规划">
      <ShowTableList 
        :columns="landPlanningColumns" 
        :data="landClassificationData"
        :title="'土地规划查询结果'"/>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { ref } from "vue"
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue'
import ModalMap from './ModalMap/index.vue'
import image from '../01B759D0-567B-4794-9386-645E7DC93C5F.png'
const type = ref('1')
const addOnMap = ref(false)
const selectType = ref(0)
const landClassificationColumns = [
  {
    title: '地类名称',
    dataIndex: 'landName',
    key: 'landName',
    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 landClassificationData = [
  {
    landName: '乔木林地-0331',
    type: '限制建设区(030)',
    stats: '-',
    area: 3.05,
  },
  {
    landName: '乔木林地-0332',
    type: '限制建设区(031)',
    stats: '-',
    area: 4.05,
  },
  {
    landName: '乔木林地-0331',
    type: '建设区(030)',
    stats: '-',
    area: 3.05,
  },
  {
    landName: '乔木林地-0332',
    type: '建设区(031)',
    stats: '-',
    area: 4.05,
  },
  {
    landName: '乔木林地-0331',
    type: '限制(030)',
    stats: '-',
    area: 3.05,
  },
  {
    landName: '乔木林地-0332',
    type: '限制(031)',
    stats: '-',
    area: 4.05,
  }
]
</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;
  background: burlywood;
  position: relative;
}
</style>
