<template>
  <div class="custom-select-box">
    <TSelect
      v-model="SelectValue"
      :placeholder="placeholder"
      :popupProps="{
        overlayClassName: 'custom-select-popup',
      }"
    >
      <t-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      ></t-option>
    </TSelect>
  </div>
</template>

<script lang="ts" setup>
import { Select as TSelect, Option as TOption } from 'tdesign-vue-next';
import { ref, watch } from 'vue';
const props = withDefaults(
  defineProps<{
    options: any[];
    modelValue: number | string;
    width?: string;
    placeholder?: string;
  }>(),
  {
    width: '50%',
    placeholder: '请选择',
  }
);
const emit = defineEmits(['update:modelValue']);
const SelectValue = ref(props.modelValue);
watch(
  () => SelectValue.value,
  (v) => {
    emit('update:modelValue', v);
  }
);
watch(
  () => props.modelValue,
  (v) => {
    SelectValue.value = v;
  }
);
</script>

<style lang="less">
.custom-select-popup {
  border: none;
  box-shadow: none;
  .t-popup__content {
    border: none;
    box-shadow: none;
  }
  .t-select__list {
    background: #181818;
    box-shadow: none;
    .t-select-option {
      color: white;
      --ripple-color: #00dddd;
    }
    .t-select-option__hover,
    .t-is-selected {
      color: #00dddd;
      background: rgba(0, 0, 0, 0.3) !important;
    }
  }
}
.custom-select-box {
  .t-select__wrap {
    width: 100%;
    height: 48px;
    .t-select-input {
      height: 100%;
      .t-input__wrap {
        height: 100%;
        .t-input {
          height: 100%;
          border-radius: 8px;
          background: #181818;
          border: none;
          .t-input__inner {
            text-align: center;
            color: #ffffff;
            &::placeholder {
              color: #888fa1;
            }
          }
        }
        .t-is-focused {
          box-shadow: 0px 0px 0px 1px #00dddd;
        }
        .t-fake-arrow {
          color: #00dddd;
        }
      }
    }
  }
}
</style>
