<script setup lang="ts">
import { px2vh } from '@/utils'

const props = withDefaults(
  defineProps<{
    modelValue: string | number
    dataList: any
    format?: {
      label: string
      value: string
    }
    round?: boolean
    type?: 'normal' | 'small'
  }>(),
  {
    dataList: () => [{ label: '', value: '' }],
    round: false,
    type: 'normal',
  },
)

const emits = defineEmits(['change', 'update:modelValue'])
const formatValue = computed(() => (props.format ? props.format.value : 'value'))
const handleSelect = (item: any) => {
  if (props.modelValue === item[formatValue.value]) return
  emits('update:modelValue', item[formatValue.value])
  emits('change', item)
}

const borderRadius = computed(() => px2vh(props.round ? 60 : 20))
const itemBorderRadius = computed(() => px2vh(props.round ? 52 : 16))
const itemWidth = computed(() => (props.type === 'small' ? 'max-content' : px2vh(387)))
const itemSize = computed(() => px2vh(props.type === 'small' ? 28 : 32))
</script>
<template>
  <div class="select-list">
    <div
      v-for="item in dataList"
      :key="item.value"
      :class="{
        'data-item': true,
        active: props.modelValue === item[formatValue],
      }"
      @click="handleSelect(item)"
    >
      {{ item[format ? format.label : 'label'] }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.select-list {
  height: 5vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0.33vh;
  border-radius: v-bind(borderRadius);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  .data-item {
    cursor: pointer;
    font-family: $font-text;
    font-size: v-bind(itemSize);
    font-weight: 400;
    line-height: 4.17vh;
    height: 4.33vh;
    text-align: center;
    padding: 0 16px;
    width: v-bind(itemWidth);
    border-radius: v-bind(itemBorderRadius);
    color: rgba(255, 255, 255, 0.65);
    box-sizing: border-box;
    &.active {
      background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
      backdrop-filter: blur(3px);
      color: $font-color;
    }
  }
}
</style>
