<template>
  <div class="dropdown__container">
    <div :class="{ btn: true, active: showPanel }" @click="togglePanel">
      <div>{{ title.replace(/\（\d+\/\d+\）$/, '') }}<slot></slot></div>
      <img class="dropdown__arrow" :src="icon_empty" />
    </div>
    <div v-show="showPanel" class="panel">
      <div class="mask" @click="showPanel = false"></div>
      <div class="checkbox__list">
        <Select v-model="selected" :list="menu" @onChange="onChange"></Select>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import Select from './Select.vue'

interface MenuItem {
  key: any
  value: string
  learnWordCount?: number
  singleWordCount?: number
  selected?: boolean
}

const props = defineProps<{
  modelValue?: any
  menu: Array<MenuItem>
  item?: boolean
  disabled?: any
}>()
const emit = defineEmits(['update:modelValue', 'changeValue', 'disabledClick'])

const OSS_URL = import.meta.env.VITE_OSS_URL

const icon_empty = `${OSS_URL}/xuexiaole_clinet/normalMode/arrow_down.png`
const showPanel = ref(false)
const selected = ref('')

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

watch(
  () => props.menu,
  (nv: MenuItem[]) => {
    if (nv.length) {
      if (props.menu.findIndex((item: MenuItem) => isSameValue(item.key, props.modelValue)) >= 0) {
        selected.value = props.modelValue as any
      } else {
        selected.value = props.menu[0].key
      }
      emit('update:modelValue', selected.value)
    }
  },
  {
    immediate: true,
    deep: true,
  },
)

const title = computed(() => {
  const first = props.menu.find((item: MenuItem) => isSameValue(item.key, selected.value))

  if (first) {
    return first.value
  } else {
    return ''
  }
})

function togglePanel() {
  if (props.disabled) {
    emit('disabledClick')
    return
  }
  showPanel.value = !showPanel.value
}

function onChange() {
  nextTick(() => {
    emit('changeValue', title.value)
  })
}

watch(
  () => selected.value,
  (nv: any) => {
    emit('update:modelValue', nv)
  },
  // {
  //     immediate: true,
  // },
)
</script>
<style scoped lang="scss">
$bdColor: #d4bfe0;
* {
  box-sizing: border-box;
}
.dropdown__container {
  // position: relative;
  color: rbga(0, 0, 0, 0.65);
  font-family: $font-text;
  font-size: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    display: inline-flex;
    max-width: 100%;
    padding: 0 0px 0 18px;
    justify-content: center;
    align-items: center;
    border-radius: 3vh;
    border: 0.33vh solid #fff01f;
    background: #fff78c;
    cursor: pointer;
    > div {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &.active {
      border-color: #ffa51f;
      font-family: $font-text;
      font-weight: 500;
      img {
        transform: rotate(180deg);
      }
    }
    .dropdown__arrow {
      width: 48px;
      height: 4vh;
      margin-left: 10px;
    }
  }
  .panel {
    position: absolute;
    left: 0;
    top: 6.83vh;
    z-index: 99;
    width: 1814px;

    border: 0.25vh solid #ffa51f;
    border-radius: 1.67vh;
    padding: 2.67vh 72px 1.33vh;
    background-color: #fffef5;
    box-shadow: 0 0.33vh 1.33vh 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
    max-height: 41.67vh;
    @include hidden_scroll;

    .mask {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
    }

    .checkbox__list {
      display: flex;
      flex-wrap: wrap;
      padding: 0.5vh 0;
      :deep(.select_item) {
        margin: 0 16px 1.33vh 0;
      }
    }
  }
}
</style>
