<script setup lang="ts">
import { px2vh, px2vw } from '@/utils'
import type { selectType } from '../interface'
const props = withDefaults(
  defineProps<{
    dataList: selectType[]
    type?: string
    config?: 'value' | 'label'
    modelValue: number | string
  }>(),
  {
    dataList: () => [{ label: '', value: '' }],
    type: 'normal',
    config: 'value',
    modelValue: 0,
  },
)

const emits = defineEmits(['change', 'update:modelValue'])
const activeTap = ref()

watch(
  () => props.dataList,
  nv => {
    // 默认激活列表中第一项
    if (props.modelValue !== undefined) {
      activeTap.value = props.dataList.find(item => item.value === props.modelValue)
    } else {
      activeTap.value = props.dataList[0]
      // emits('update:modelValue', activeTap.value[props.config]);
    }
  },
  {
    deep: true,
    immediate: true,
  },
)

const fontColor = computed(() =>
  props.type === 'normal' ? 'rgba(255, 255, 255, 0.65)' : '#E3E4E6',
)
function handleSelect(item: any) {
  if (props.modelValue === item[props.config]) return
  emits('change', item)
  // emits('update:modelValue', item[props.config]);
}
</script>
<template>
  <div
    class="select-list"
    :style="{
      borderRadius: props.type === 'normal' ? px2vw(20) : px2vw(30),
    }"
  >
    <div
      v-for="(item, index) in dataList"
      :key="index"
      :class="{ 'data-item': true, active: modelValue === item[config] }"
      :style="{
        width: props.type === 'normal' ? px2vw(288) : px2vw(104),
        borderRadius: props.type === 'normal' ? px2vw(16) : px2vw(25),
        lineHeight: props.type === 'normal' ? px2vh(50) : px2vh(38),
        fontSize: props.type === 'normal' ? px2vh(32) : px2vh(28),
      }"
      @click="handleSelect(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
//

.select-list {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0.42vh;
  border-radius: 1.67vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  .data-item {
    font-family: $font-text;
    font-size: 2.67vh;
    font-weight: 400;
    line-height: 4.17vh;
    text-align: center;
    cursor: pointer;
    color: v-bind(fontColor);

    &.active {
      background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
      backdrop-filter: blur(3px);
      color: $font-color;
    }
  }
}
</style>
