<template>
  <div
    v-for="(item, index) in list"
    :key="item.key"
    :class="[
      'select_item',
      isColored ? `familiarity familiarity_${index}` : '',
      { active: isSameValue(modelValue, item.key) },
    ]"
    @click="switchValue(item.key)"
  >
    <div class="name">
      {{ item.value }}
    </div>
    <div class="count">
      {{ item.count }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick } from 'vue'

interface SelectItem {
  key: any
  value: string
  count?: number | string | undefined
}

const props = defineProps<{
  modelValue: any
  list: SelectItem[]
  isColored?: boolean
  disabled?: any
}>()

const emits = defineEmits(['update:modelValue', 'onChange', 'disabledClick'])

function isSameValue(a: any, b: any) {
  if ((a === undefined || a === null || a === '') && (b === undefined || b === null || b === '')) {
    return true
  }
  return String(a) === String(b)
}

function switchValue(value: any) {
  if (props.disabled) {
    emits('disabledClick')
    return
  }
  emits('update:modelValue', value)
  nextTick(() => {
    emits('onChange')
  })
}
</script>
<style scoped lang="scss">
@use '../style/familiarityColor.scss' as *;
.select_item {
  color: rgba(0, 0, 0, 0.65);
  font-family: $font-text;
  font-size: 2vh;

  padding: 0.33vh 16px;
  border-radius: 0.67vh;
  border: 0.23vh solid #fff01f;
  background: #fffef2;
  cursor: pointer;
  &.familiarity {
    padding: 0.33vh 0px;

    .name,
    .count {
      display: flex;
      justify-content: center;
      width: 116px;
    }
    .name {
      border-bottom: 0.08vh solid #fff01f;
    }
  }

  &.active {
    color: rgba(0, 0, 0, 0.75);
    background-color: #fff01f;
    .name {
      border-color: #f5d058;
    }
  }
  & + .select_item {
    margin-left: 16px;
  }
  &.familiarity_1 {
    border: 0.17vh solid $color-familiarity-1;
    .name {
      border-color: $color-familiarity-1;
    }
    &.active {
      background-color: $bg-familiarity-1;
    }
  }
  &.familiarity_2 {
    border: 0.17vh solid $color-familiarity-2;
    .name {
      border-color: $color-familiarity-2;
    }
    &.active {
      background-color: $bg-familiarity-2;
    }
  }
  &.familiarity_3 {
    border: 0.17vh solid $color-familiarity-3;
    .name {
      border-color: $color-familiarity-3;
    }
    &.active {
      background-color: $bg-familiarity-3;
    }
  }
  &.familiarity_4 {
    border: 0.17vh solid $color-familiarity-4;
    .name {
      border-color: $color-familiarity-4;
    }
    &.active {
      background-color: $bg-familiarity-4;
    }
  }
  &.familiarity_5 {
    border: 0.17vh solid $color-familiarity-5;
    .name {
      border-color: $color-familiarity-5;
    }
    &.active {
      background-color: $bg-familiarity-5;
    }
  }
}
</style>
