<script lang="ts" setup>
import type { MeaningVo, SelectedListType } from '../interfaces/index'

const props = defineProps<{
  levelId: string
  meaningVoList: Array<MeaningVo>
  selectedList: Array<SelectedListType>
  spell: string
  vocabularyName?: string
  wordId: string
}>()

const emits = defineEmits(['onSelected'])
const popoverRef = ref()

function select(meaning: MeaningVo) {
  if (meaning.selected === true) return
  // if (props.selectedList.length >= 4) return ElMessage.warning('每个关卡最多四个单词');
  const word = {
    spell: props.spell,
    wordId: props.wordId,
    meaning,
  }
  word.meaning.selected = true
  popoverRef.value.hide()
  emits('onSelected', word)
}

function init() {
  /* 给当前单词的各个释义添加selected状态，被选中的释义要变灰处理，避免同一个释义重复选择 */
  props.meaningVoList.forEach((item) => {
    item.selected = false
    // if (item.stageId && item.stageName && item.levelNum) {
    //     item.selected = true;
    // }
    props.selectedList.forEach((_) => {
      if (item.id === _.meaningId) {
        item.selected = true
      }
    })
  })
}

// function moveInto(meaning: MeaningVo) {
//   if (props.selectedList.length >= 4)
//     return ElMessage.warning('每个关卡最多四个单词')
//   forceMove({
//     levelId: props.levelId,
//     wordId: props.wordId,
//     meaningId: meaning.id,
//   }).then(() => {
//     const word = {
//       spell: props.spell,
//       wordId: props.wordId,
//       meaning,
//     }
//     word.meaning.selected = true
//     popoverRef.value.hide()
//     emits('onSelected', word)
//   })
// }

watch(
  () => props.meaningVoList,
  () => {
    init()
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <el-popover ref="popoverRef" trigger="click" placement="right" width="auto">
    <template #reference>
      <el-button class="m-2">{{ props.spell }}</el-button>
    </template>

    <!-- <div v-if="props.vocabularyName" class="title font-bold">
            此单词属于{{ props.vocabularyName }}分类词汇
        </div> -->
    <el-scrollbar max-height="75vh" class="list">
      <div
        v-for="item in props.meaningVoList"
        :key="item.id"
        class="list__item"
        :class="[{ disabled: item.selected }]"
        @click="select(item)"
      >
        <!-- <template v-if="item.selected && item.stageName && item.levelNum"> -->
        <!-- <el-popover placement="right" width="auto">
                        <template #reference>
                            <div class="item__meaning">
                                {{ item.typeAbbr }} {{ item.simpleDesc }}
                                <el-button class="ml-[15px]" type="primary" @click="moveInto(item)"
                                    >移入此关</el-button
                                >
                            </div>
                        </template>
                        <div>已加入{{ item.stageName }}第{{ item.levelNum }}关</div>
                    </el-popover> -->
        <!-- </template> -->
        <div>{{ item.typeAbbr }} {{ item.simpleDesc }}</div>
      </div>
    </el-scrollbar>
  </el-popover>
</template>

<style lang="scss" scoped>
.title {
  height: 40px;
  margin: 0 4px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
}

.list {
  .list__item {
    height: 40px;
    margin: 0 4px;
    line-height: 40px;
    cursor: pointer;

    .item__meaning {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    & + .list__item {
      border-top: 1px solid #eee;
    }

    &:hover {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
    }

    &.disabled {
      color: var(--el-text-color-placeholder);
      cursor: not-allowed;
      background-color: unset;
    }
  }
}
</style>
