<template>
  <a-segmented v-model:value="props.landType" :options="data" 
  style="width: 100%;height:37px;border-radius: 19px;background:#102649;margin-bottom: 23px;border-top: 1px solid #4BB8F4;border-top: 1px solid #4BB8F4;border-left: 1px solid #4BB8F4;"
  @change="(v) => emits('changeLandType', v)"
  />
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue"
const props = defineProps(['landType'])
const emits = defineEmits(['changeLandType'])
const data = ref([
  {
    label: '农用地',
    value: '农用地'
  },
  {
    label: '建设用地',
    value: '建设用地'
  },
  {
    label: '推堆土',
    value: '推堆土'
  },
])
</script>

<style lang="scss" scoped>
:deep(.ant-segmented-thumb){
  background: linear-gradient(-38deg, #3058e1, #4cbbf5);
  border-radius: 19px;
}
:deep(.ant-segmented-item){
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
  }
  :deep(.ant-segmented-group){
    height: 100%;
  }
  :deep(.ant-segmented-item-selected){
    background: linear-gradient(-38deg, #3058E1, #4CBBF5);
    box-shadow: 0px 1px 3px 0px rgba(3,10,26,0.25);
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
  }
</style>
