<script setup lang="ts">
interface selectType {
  label: string
  value: string | number
}
const props = defineProps<{
  modelValue: string | number
  selectList: selectType[]
}>()
const emits = defineEmits(['update:modelValue', 'selectChange'])
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const bg = `url(${OSS_URL}/icon/select.svg) 100% / contain  no-repeat`
const bg2 = `url(${OSS_URL}/xuexiaole_clinet/normalMode/check_4.png) 100% / contain no-repeat`

const showSelect = ref(false) // 是否显示下拉框
const activeSelect = ref<anyObj>({})
const active = computed({
  get() {
    activeSelect.value = props.selectList.find(i => i.value === props.modelValue) || {}
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  },
})
watch(
  () => props.selectList,
  nv => {
    if (props.selectList && props.selectList[0] && !props.modelValue) {
      // 默认激活列表中第一项
      active.value = props.selectList[0].value
    }
  },
  {
    deep: true,
    immediate: true,
  },
)

const selectChange = (item: selectType) => {
  if (active.value === item.value) return
  activeSelect.value = item
  showSelect.value = false
  active.value = item.value
  emits('selectChange', activeSelect.value)
}
</script>

<template>
  <div class="select-box">
    <div class="content" @click="showSelect = !showSelect">
      <span>{{ activeSelect.label }}</span>
      <span :class="{ icon: true, iconActive: showSelect }">
        <svg
          width="15"
          height="20"
          viewBox="0 0 30 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 15L15 3L27 15"
            stroke="url(#paint0_linear_288_32161)"
            stroke-width="5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <defs>
            <linearGradient
              id="paint0_linear_288_32161"
              x1="18.05"
              y1="15"
              x2="7.01625"
              y2="6.47252"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#fff" />
            </linearGradient>
          </defs>
        </svg>
      </span>
    </div>
    <div v-show="showSelect" class="selectList">
      <div class="selectList-box">
        <div
          v-for="item in selectList"
          :key="item.value"
          :class="{ 'select-item': true, active: item.value === active }"
          @click="selectChange(item)"
        >
          <span>
            {{ item.label }}
          </span>
          <span
            v-show="item.value === active"
            class="icon"
            :style="{
              background: bg2,
            }"
          >
          </span>
        </div>
      </div>
    </div>
    <div v-show="showSelect" class="mask" @click="showSelect = false"></div>
  </div>
</template>

<style scoped lang="scss">
//
.select-box {
  position: relative;
  font-size: 2.67vh;
  color: #ffffff;

  line-height: 4vh;
  margin-left: 32px;

  .content {
    background: rgba(0, 0, 0, 0.35);
    width: 170px;
    height: 4.17vh;
    border-radius: 2.08vh;
    border: 0.33vh solid #fffef2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    cursor: pointer;

    .icon {
      transition: all 0.3s;
      height: 2.08vh;
      width: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        height: 100%;
        width: 100%;
      }
    }
    .iconActive {
      transform: rotate(180deg);
    }
  }
  .selectList {
    width: 170px;
    border: 0.33vh solid #fffef2;

    max-height: 35vh;
    background: rgba(0, 0, 0, 0.35);
    margin-top: 0.83vh;
    position: absolute;
    z-index: 99;
    border-radius: 1.67vh;
    box-sizing: border-box;
  }
  .selectList-box {
    width: 100%;
    max-height: 33.33vh;
    overflow-y: scroll;
    padding: 1.25vh;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      width: 12px;
      border-radius: 0 1.67vh 1.67vh 0 !important;
      background-color: rgba(0, 0, 0, 0.35);
    }

    &::-webkit-scrollbar-thumb {
      /* 滚动条里面小方块 */
      height: 2.5vh !important;
      border-radius: 0.5vh !important;
      background-color: #fff681 !important;
    }
    .select-item {
      display: flex;
      align-items: center;
      color: #fff;
      width: 100%;
      padding: 0.42vh 0;
      justify-content: space-between;
      cursor: pointer;
      .icon {
        width: 40px;
        height: 2.92vh;
        // background-size: contain;
      }
      &.active {
        color: #ffee1d;
      }
    }
  }
  .mask {
    position: absolute;
    height: 200vh;
    width: 200vw;
    z-index: 9;
    left: -100vw;
    top: -100vh;
  }
}
</style>
