<template>
  <ShowImage :data="data" :haveFooter="false" />
  <a-tabs v-model:activeKey="type">
    <a-tab-pane key="1" tab="审批备案">
      <ShowTableList 
        :columns="aloneLayerColumns" 
        :data="dataSource"
        :title="'审批备案查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="2" tab="单独图层">
      <ShowTableList 
        :columns="aloneLayerColumns" 
        :data="dataSource"
        :title="'三调单独图层查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="3" tab="耕地坡度">
      <ShowTableList 
        :columns="aloneLayerColumns" 
        :data="dataSource"
        :title="'耕地坡度查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="4" tab="保护区(国情)">
      <ShowTableList 
        :columns="aloneLayerColumns" 
        :data="dataSource"
        :title="'保护区(国情)查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="5" tab="自然保护地">
      <ShowTableList 
        :columns="aloneLayerColumns" 
        :data="dataSource"
        :title="'自然保护地查询结果'"/>
    </a-tab-pane>
    <a-tab-pane key="6" tab="保护地(备案)">
      <ShowTableList 
        :columns="aloneLayerColumns" 
        :data="dataSource"
        :title="'保护地(备案)查询结果'"/>
    </a-tab-pane>
  </a-tabs>
  <div style="margin-top:5px; opacity: 0.6;user-select: none;">数据来源：中国国土勘测规划院</div>
</template>

<script setup lang="ts">
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue'
import { ref } from "vue"
const type = ref('1')
const data = ref({
  specialUrl: 'https://aliyuncdn.antdv.com/vue.png',
  screenshotUrl: 'https://aliyuncdn.antdv.com/logo.png',
})
const aloneLayerColumns = [
  {
    title: '数据名称',
    dataIndex: 'name',
    key: 'name',
    sorter:(a,b) => a.name - b.name,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '面积(亩)',
    dataIndex: 'area',
    key: 'area',
    sorter:(a,b) => a.area - b.area,
    sortDirections: ['descend', 'ascend'],
  }
]
const dataSource = [
  {
    name: '推土区',
    area: 3.05,
  }
]
</script>

<style lang="scss" scoped></style>
