<template>
  <SubTitleSelect :data="[{title:'绘制范围', value: 0}, {title:'图斑搜索', value: 1}]" :select="select" @changeSelect="changeSelect"/>
  <div class="search-draw-map" v-if="select === 0">
    <a-radio-group v-model:value="drawMapType">
      <a-radio-button value="rectangle">矩形</a-radio-button>
      <a-radio-button value="polygon">多边形</a-radio-button>
    </a-radio-group>
  </div>
  <div class="search-content" v-if="select === 1">
    <a-input placeholder="请输入目标位置、图斑编号">
      <template #suffix>
        <SearchOutlined />
      </template>
    </a-input>
    <a-table :columns="columns" :dataSource="dataSource" :pagination="false" :scroll="{ y: 200 }"></a-table>
  </div>
  <div class="footer">
    <div class="footer-button-div">
      <a-button class="search-button" type="primary">查询</a-button>
      <a-button class="reset-button" type="dashed">重置</a-button>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from "vue"
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { title } from "process";

const select = ref(0)
const drawMapType = ref()
const columns = ref([
  {
    title: '图斑编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '行政区',
    dataIndex: 'region',
    key: 'region',
  },
  {
    title: '操作',
    dataIndex: 'control',
    key: 'control',
  },
])
const dataSource = ref([
  {
    id: '1',
    region: '北京市',
    control: '查看',
  },
  {
    id: '2',
    region: '北京市',
    control: '查看',
  },
  {
    id: '3',
    region: '北京市',
    control: '查看',
  },
  {
    id: '4',
    region: '北京市',
    control: '查看',
  },
  {
    id: '5',
    region: '北京市',
    control: '查看',
  },
  {
    id: '6',
    region: '北京市',
    control: '查看',
  },
  {
    id: '7',
    region: '北京市',
    control: '查看',
  },

])

const changeSelect = (value: number) => {
  select.value = value
}
</script>

<style lang="scss" scoped>
.search-draw-map{
  background-color: #efefef;
  padding: 10px;
}
.search-content{
  padding-top: 10px;
}

.footer{
  display: flex;
  justify-content: end;
  margin-top: 15px;
  .footer-button-div{
    display: flex;
    .reset-button{
      margin-left: 10px;
    }
    .search-button{
      background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230))
    }
  }
}

</style>
