<script setup lang="ts">
import { ref, withDefaults, watch, onUnmounted, provide } from 'vue'
import type { WordCardType } from '../interface'
import SearchWordPup from './SearchWordPup.vue'
import { useAudio } from '@/hooks'

const props = withDefaults(
  defineProps<{
    wordList: WordCardType[]
    showDelSelect: boolean
    reviewMode: boolean
    wordItem: WordCardType
    isAutoOpenPop?: boolean
  }>(),
  {
    showDelSelect: false,
    reviewMode: false,
    isAutoOpenPop: false,
  },
)
const emits = defineEmits(['removeDelWord', 'addDelWord', 'changeWord'])

const showDialog = ref(false)
const dialogAnimation = ref(false)
const wordId = ref<string>('')
const wordSpell = ref<string>('')
const sureDelete = ref(false) // false-未勾选 true-勾选
const showWordList = ref<WordCardType[]>([])
// const innerAudioContext = uni.createInnerAudioContext();
watch(
  () => showDialog.value,
  nv => {
    if (nv) {
      window.requestAnimationFrame(() => (dialogAnimation.value = nv))
    }
  },
)

provide('insert', true)
function stopAllLottie() {
  showWordList.value.forEach(item => {
    item.isPlayMei = item.isPlayYing = false
  })
}
function tapExpand(val: boolean) {
  dialogAnimation.value = false
  setTimeout(() => {
    showDialog.value = false
    emits('changeWord')
  }, 500)

  //  下拉
}
function tapPlayMei(i: any) {
  stopAllLottie()
  let _file = JSON.parse(i.usAccents)
  i.isPlayMei = true
  useAudio({
    url: _file[0].file,
    autoplay: true,
    onEnded: () => {
      i.isPlayMei = false
    },
  })
}
function tapPlayYing(i: any) {
  stopAllLottie()
  let _file = JSON.parse(i.brAccents)
  i.isPlayYing = true
  useAudio({
    url: _file[0].file,
    autoplay: true,
    onEnded: () => {
      i.isPlayYing = false
    },
  })
}
function addDelList(i: any) {
  i.isRemove = true
  emits('addDelWord', i.id)
}
function removeDelList(i: any) {
  i.isRemove = false
  emits('removeDelWord', i.id)
}
function tapWordDetails(i: any) {
  wordId.value = i.wordId
  wordSpell.value = i.wordSpell
  if (sureDelete.value) {
    i.isRemove = !i.isRemove
    if (i.isRemove) {
      emits('addDelWord', i.id)
    } else {
      emits('removeDelWord', i.id)
    }
  } else {
    if (props.reviewMode && i.isReviewMode) {
      i.isReviewMode = false
      tapPlayMei(i)
    } else {
      showDialog.value = true
    }
  }
}

watch(
  () => props.showDelSelect,
  () => {
    if (props.showDelSelect) {
      sureDelete.value = true
    } else {
      sureDelete.value = false
      let data = props.wordList
      for (let i in data) {
        data[i].isRemove = false
      }
    }
  },
)
watch(
  () => props.wordList,
  () => {
    showWordList.value = toRaw(props.wordList)
    for (const par of showWordList.value || []) {
      for (const item of par.meaningSimpleList || []) {
        if (typeof item.typeAbbr !== 'string') return
        item.typeAbbr = (item.typeAbbr || '').split('/')
      }
    }
  },
  { immediate: true, deep: true },
)

onUnmounted(() => {
  // innerAudioContext.stop();
})
</script>
<template>
  <div class="scroll_box">
    <div class="all_words">
      <div class="all_cards">
        <div
          v-for="i in showWordList"
          :key="i.wordId"
          :class="{ word_card: true, del_active: i.isRemove }"
          @click="tapWordDetails(i)"
        >
          <div v-if="i.wordImg" class="word_img">
            <img class="image" :src="i.wordImg" />
          </div>
          <div class="content">
            <div v-if="showDelSelect" class="del_select">
              <div v-if="!i.isRemove" class="circel select_icon" @click.stop="addDelList(i)"></div>
              <Icon v-else name="activity_delete" size="48"></Icon>
            </div>
            <div class="dictionaries">
              <div class="english">{{ i.wordSpell }}</div>
              <div class="listen">
                <div class="listen_icon" @click.stop="tapPlayMei(i)">
                  <Accent name="us" :active="i.isPlayMei"></Accent>
                </div>
                <div class="listen_icon" @click.stop="tapPlayYing(i)">
                  <Accent name="br" :active="i.isPlayYing"></Accent>
                </div>
              </div>
              <div :class="{ chinese: true, isblur: i.isReviewMode }">
                <div v-if="i.meaningSimpleList?.length <= 1" class="one">
                  <div v-for="(o, index) in i.meaningSimpleList" :key="index" class="one_meaning">
                    <AbbrImg height="30" gap="4" :abbr="o.typeAbbr"></AbbrImg>

                    <span class="abbr">{{ o.znDesc }}</span>
                  </div>
                </div>
                <div v-else class="more">
                  <div v-for="(o, index) in i.meaningSimpleList" :key="index" class="more_meaning">
                    <AbbrImg height="30" gap="4" :abbr="o.typeAbbr"></AbbrImg>
                    <div class="abbr">{{ o.znDesc }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="showDialog" :class="{ pop_box: true, up: dialogAnimation }">
      <SearchWordPup
        :wordId="wordId"
        :wordSpell="wordSpell"
        :closed="false"
        @tapDown="tapExpand(false)"
      ></SearchWordPup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scroll_box {
  position: relative;
  .pop_box {
    height: 100%;
    width: 100vw;
    position: fixed;
    // bottom: 0;
    left: 0;
    top: 100%;
    transition: all 0.5s ease;
    z-index: 999;
  }
  .up {
    top: 0%;
  }
}

.all_words {
  padding: 1vh 0 2vh 0;
  .all_cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: hidden;
    gap: 3vh;

    .del_active {
      position: relative;
      border: 0.67vh solid #f00a0a !important;

      &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 1.67vh;
        background-color: #fff2f2;
        opacity: 65%;
        z-index: 1;
        box-sizing: border-box;
      }

      .word_img {
        position: relative;
        height: 100%;
        &:before {
          content: '';
          position: absolute;
          height: 100%;
          width: 100%;
          border-radius: 1.67vh;
          background-color: transparent !important;
          z-index: 1;
          box-sizing: border-box;
        }
      }
    }

    .word_card {
      position: relative;
      flex: 1;
      // height: 394px;
      height: 23.33vh;
      width: 28.33vh;
      min-width: 28.33vh;
      max-width: 28.33vh;
      // width: 340px;
      // margin: 0 36px 3vh 0;
      box-sizing: border-box;
      border: 0.67vh solid #fff;
      border-radius: 1.67vh;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(4px);
      position: relative;
      box-shadow: 0 0.17vh 0.42vh rgba(0, 0, 0, 0.5);
      &:nth-child(4n) {
        margin-right: 0;
      }

      .word_img {
        position: relative;
        height: 100%;

        &:before {
          content: '';
          position: absolute;
          height: 100%;
          width: 100%;
          border-radius: 1.67vh;
          background-color: #fffef2;
          opacity: 85%;
          z-index: 1;
          // filter: blur(8px);
          box-sizing: border-box;
        }

        .image {
          display: inline-block;
          border-radius: 1.67vh;
          height: 100% !important;
          width: 100% !important;
        }
      }

      .content {
        cursor: pointer;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        z-index: 99;

        .del_select {
          position: absolute;
          top: 0.83vh;
          left: 10px;

          .select_icon {
            width: 4vh;
            height: 4vh;
            pointer-events: auto;
          }
          .circel {
            height: 3.33vh;
            width: 3.33vh;
            border: 0.25vh solid #fff;
            border-radius: 50%;
            box-shadow: 0.17vh 0.17vh 0.42vh rgba(0, 0, 0, 0.25);
            background-color: rgba(0, 0, 0, 0.65);
          }
        }

        .dictionaries {
          margin-top: 1.67vh;
          padding: 0 16px;
          text-align: center;

          .english {
            font-size: 2.83vh;
            line-height: 4.33vh;
            font-family: $font-special;
          }

          .listen {
            display: flex;
            justify-content: center;
            gap: 2.67vh;
            margin-bottom: 2vh;

            .listen_icon {
              width: 4.67vh;
              height: 4.67vh;
              cursor: pointer;
            }
          }

          .chinese {
            color: #404040;
            font-size: 1.67vh;
            line-height: 2.5vh;
            transition: all 0.5s;
            filter: blur(0px);
            // text {
            //     color: #404040;
            //     display: block;
            //     font-size: 24.013px;
            //     line-height: 35.994px;
            // }

            .one {
              overflow-y: auto;
              height: 15vh;

              .one_meaning {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                max-height: 9.5vh;

                .img {
                  display: inline-flex;
                  width: auto;
                  height: 2.5vh;
                  margin-right: 4px;
                }
              }
            }

            .more {
              overflow-y: auto;
              height: 11.67vh;
              &::-webkit-scrollbar {
                display: none;
                width: 0 !important;
                height: 0 !important;
                -webkit-appearance: none;
                background: transparent;
                color: transparent;
              }

              .more_meaning {
                display: flex;
                justify-content: center;
                margin-bottom: 0.42vh;

                .abbr {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
            &.isblur {
              filter: blur(5px);
            }
          }
        }
      }
    }
  }
}
</style>
