<template>
  <a-input placeholder="请输入目标位置、图斑编号" style="margin-bottom: 10px;">
    <template #suffix>
      <SearchOutlined />
    </template>
  </a-input>
  <SubTitleSelect :data="[{title:'绘制范围', value: 0}, {title:'行政区划', value: 1}]" :select="select" @changeSelect="changeSelect"/>
  <div class="search-draw-map">
    <a-radio-group v-model:value="drawMapType" v-if="select === 0">
      <a-radio-button value="rectangle">矩形</a-radio-button>
      <a-radio-button value="polygon">多边形</a-radio-button>
    </a-radio-group>
    <div style="height: 32px;" v-if="select === 1"></div>
  </div>
  <a-divider class="divider" dashed />
  <div class="title">时间段</div>
  <a-range-picker class="time-select" v-model:value="time"/>
  <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 { SearchOutlined } from '@ant-design/icons-vue'
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'

const select = ref(0)
const drawMapType = ref('rectangle')
const time = ref()
const changeSelect = (value) => {
  select.value = value
}
</script>

<style lang="scss" scoped>
.search-draw-map{
  background-color: #efefef;
  padding: 10px;
}
.divider{
  margin-top: 10px; 
  margin-bottom: 10px; 
  background: #ececec;
}
.title{
  font-size: 18px;
  display: flex;
  margin-bottom: 10px;
}
.time-select{
  width: 100%;
  margin-bottom: 10px;
}
.footer{
  display: flex;
  justify-content: center;
  .footer-button-div{
    display: flex;
    .reset-button{
      margin-left: 10px;
    }
    .search-button{
      background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230))
    }
  }
}
</style>
