<template>
  <div class="word_meaning">
    <div v-if="list && list.length > 0" class="header">
      <Icon name="jing" size="64"></Icon>
      <span class="title">词义 ｜ Interpretation</span>
    </div>
    <div class="g-container">
      <div v-for="(item, idx1) in list" :key="idx1" class="interpretation-box">
        <div v-if="item.znDesc || item.enDesc" class="meaing-box">
          <span class="meaning"
            ><span class="znDesc">{{ item.znDesc }}</span>
            <span class="enDesc">（{{ item.enDesc }}）</span></span
          >
        </div>
        <div v-for="(itx, idx2) in item.meaningVoList" :key="idx2" class="lizi-box">
          <div v-if="itx.subTypeStr && itx.subTypeStr.length > 0" class="show">
            <div class="text">
              {{ itx.subTypeShow }}
            </div>
          </div>
          <div class="parent-box">
            <div class="content">
              <div
                ref="sentenceLeft"
                :class="['left', { 'left-not': itx.image && itx.image.length <= 0 }]"
              >
                <div class="znDesc">{{ itx.znDesc }}</div>
              </div>
              <div v-if="itx.image && itx.image.length > 0" class="right">
                <div
                  v-if="!mapData['p-' + itx.id] && itx.image && itx.image.length > 0"
                  class="img-content-loading"
                ></div>
                <div
                  class="img-content"
                  @click="showImage(item.meaningVoList, { item: itx, idx: idx2 }, 1)"
                >
                  <img
                    v-if="itx.image && itx.image.length > 0 && itx.image[0].indexOf('mp4') === -1"
                    mode="aspectFill"
                    :class="['img']"
                    :src="itx.image[0]"
                    @load="handleLoad('p-' + itx.id)"
                  />
                  <div
                    v-if="itx.image && itx.image.length > 0 && itx.image[0].indexOf('mp4') !== -1"
                    class="img"
                  >
                    <video :id="`video-${idx2}`" ref="videoRef" :src="itx.image[0]"></video>
                    <div class="box"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="child-box">
            <div v-for="(child, idx3) in itx.sentenceVoList" :key="idx3" class="child">
              <div class="content">
                <div class="circle">{{ idx3 + 1 }}</div>
                <div :class="['content-box', { 'content-box2': child.sentenceUsageEnDesc }]">
                  <div v-if="child.sentenceUsageEnDesc" class="mainword">
                    {{ child.sentenceUsageEnDesc }}
                  </div>
                  <div class="all-content">
                    <div class="left">
                      <div class="desc-box">
                        <div class="enDesc">
                          <span class="text" v-html="child.content"> </span>
                          <div
                            v-if="child.brFile"
                            class="t-icon"
                            @click="handlePlayus(child, child.brFile, false)"
                          >
                            <Accent name="br" :active="child.isplayus"></Accent>
                          </div>
                          <div
                            v-if="child.usFile"
                            class="t-icon"
                            @click="handlePlaybr(child, child.usFile, false)"
                          >
                            <Accent name="us" :active="child.isplaybr"></Accent>
                          </div>
                        </div>
                        <div class="znDesc">
                          {{ child.znDesc }}
                        </div>
                      </div>
                    </div>
                    <div v-if="child.image && child.image.length > 0" class="right">
                      <div
                        v-if="!mapData['c-' + child.id] && child.image && child.image.length > 0"
                        class="img-content-loading"
                      ></div>
                      <div
                        class="img-content-child"
                        @click="showImage(itx.sentenceVoList, { item: child, idx: idx3 }, 2)"
                      >
                        <img
                          style="display: none"
                          :src="child.image[0]"
                          @load="handleLoad('c-' + child.id)"
                        />
                        <div
                          v-if="
                            child.image &&
                            child.image.length > 0 &&
                            child.image[0].indexOf('mp4') === -1
                          "
                          class="img"
                          :style="{
                            backgroundImage: `url(${child.image[0]})`,
                          }"
                        />
                        <div
                          v-if="
                            child.image &&
                            child.image.length > 0 &&
                            child.image[0].indexOf('mp4') !== -1
                          "
                          class="img"
                        >
                          <video :id="`video-${idx2}`" ref="videoRef" :src="itx.image[0]"></video>
                          <div class="box"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="itx.supplement" class="bottom-box">
            <span class="meaning">{{ itx.supplement }}</span>
          </div>
        </div>
      </div>
    </div>
    <swiperPage v-model:visible="viewVisible" :meaningData="meaningData"></swiperPage>
  </div>
</template>

<script setup lang="ts">
import swiperPage from './swiperPage.vue'
import { playbr, playus } from './hook'
import { nextTick } from 'vue'

const props = defineProps<{
  meaningGroupVoList: any[]
  spell: string
}>()
const emits = defineEmits(['viewVisible', 'stopAllLottie'])

// let list = ref<formType>({});
let list = ref<any[]>()
const viewVisible = ref(false)
const meaningData = ref<any>({})
let loadingMap = ref({})
const OSS_URL = import.meta.env.VITE_OSS_URL
const bg_slideLine = `url(${OSS_URL}/urm/dictionaries_wordDetail_slideLine.svg)`
// const swiperImgUrls = ref<string[]>([
//     `${getImage('img_p')}`,
//     `@/static/wordDetail/video.mp4`,
//     `@/static/wordDetail/video.mp4`,
//     `${getImage('img_p')}`,
//     `@/static/wordDetail/video.mp4`,
// ]);
const keyWords = ref('')
const mapData: any = ref({})
const sentenceLeft = ref()

const handlePlayus = (data: anyObj, url: string, _bool = true) => {
  emits('stopAllLottie')
  playus(data, url, _bool)
}
const handlePlaybr = (data: anyObj, url: string, _bool = true) => {
  emits('stopAllLottie')
  playbr(data, url, _bool)
}

// 停止当前组件喇叭动画
const stopAllChildLottie = () => {
  for (const par of list.value || []) {
    for (const item of par.meaningVoList) {
      for (const child of item.sentenceVoList) {
        child.isplaybr = child.isplayus = false
      }
    }
  }
}
defineExpose({
  stopAllChildLottie,
})

const handleLoad = (id: any) => {
  mapData.value[id] = true
}

const showImage = (list: any, child: { item: any; idx: number }, type: number) => {
  stopAllChildLottie()
  if (child.item.image && child.item.image.length <= 0) return
  viewVisible.value = true

  meaningData.value = JSON.parse(
    JSON.stringify({
      znDesc: child.item.znDesc,
      content: child.item.content,
      enDesc: child.item.enDesc,
      swiperList: list,
      swiperImgUrls: child.item.image,
      idx: child.idx,
    }),
  )

  if (type === 2) {
    meaningData.value.sentenceUsageEnDesc = JSON.parse(
      JSON.stringify(child.item.sentenceUsageEnDesc),
    )
  }
}

watch(
  () => viewVisible,
  (newValue, oldValue) => {
    emits('viewVisible', newValue)
  },
  {
    immediate: true,
    deep: true,
  },
)

watch(
  () => props.meaningGroupVoList,
  (newValue, oldValue) => {
    if (!newValue) return

    list.value = JSON.parse(JSON.stringify(newValue))
    keyWords.value = props.spell
    mapData.value = {}

    nextTick(() => {
      sentenceLeft.value?.forEach((item: any) => {
        if (item.scrollHeight > item.clientHeight) {
          item.style.cssText += 'display: block; overflow: auto'
        }
      })
    })
  },
  {
    deep: true,
    immediate: true,
    flush: 'post',
  },
)
</script>

<style lang="scss" scoped>
@keyframes loading1 {
  0% {
    background-size: 300% 100%;
    background-image: linear-gradient(120deg, transparent 40%, #fff999 50%, transparent 60%);
    background-position: 100% 50%;
  }

  100% {
    background-size: 300% 100%;
    background-image: linear-gradient(120deg, transparent 40%, #fff999 50%, transparent 60%);
    background-position: 0 50%;
  }
}

.word_meaning {
  padding: 4vh 0;
  .header {
    display: flex;
    align-items: center;

    .t-icon {
      width: 5.33vh;
      height: 5.33vh;
    }

    .title {
      font-family: $font-text;
      font-size: 3.33vh;
      font-weight: 500;
      line-height: 5vh;
    }
  }

  .g-container {
    width: auto;
    margin: 0;
    .interpretation-box {
      margin-top: 1.33vh;

      .meaing-box {
        display: flex;
        flex-direction: column;
        font-family: $font-text;
        margin: 2.67vh 0 1.33vh 6.25vh;

        .meaning {
          height: 4.5vh;
          font-size: 3vh;
          font-weight: 500;
          line-height: 4.5vh;
          position: relative;

          .enDesc {
            font-family: Arial;
          }

          &::before {
            content: '';
            width: 1vh;
            height: 4.5vh;
            box-sizing: border-box;
            border-radius: 0.33vh;
            border: 0.33vh solid #6a3906;
            background-color: #fff01f;
            position: absolute;
            left: -1.5vh;
          }
        }
      }

      .lizi-box {
        .show {
          margin-left: 4.5vh;
          display: flex;
          flex-wrap: wrap;

          // align-items: center;

          .text {
            color: #ffa51f;
            font-family: 'Alibaba Health Font 2.0 CN';
            font-size: 2.67vh;
            font-style: normal;
            font-weight: 300;
            line-height: 4vh;
          }
        }

        .parent-box {
          width: 112.67vh;
          // height: 320px;
          border: 0.33vh solid #7787f4;
          // background-color: #fffef2;
          background: linear-gradient(to right, #fdfdf9 25%, #dfebf7 80%);
          // fill: linear-gradient(179deg, #FDFDF9 0.76%, #DFEBF7 97.42%);

          border-radius: 3.33vh;
          overflow: hidden;
          margin-left: 4.5vh;
          margin-top: 1.33vh;

          .content {
            position: relative;
            display: flex;
            max-height: 26.67vh;

            .left {
              padding: 2.67vh 2.67vh 2.67vh 4.67vh;
              box-sizing: border-box;
              display: block;
              font-size: 3.33vh;
              display: flex;
              flex-direction: column;
              justify-content: center;
              flex: 1;
              min-width: 0;

              .enDesc,
              .znDesc {
                font-family: $font-text;
                font-size: 2.67vh;
              }

              .enDesc {
                font-family: Arial;
              }
            }

            .right {
              display: flex;
              display: block;
              flex-shrink: 0;

              .img-content-loading {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                right: 0;
                background-color: #fffaba;
                animation: loading1 1.6s ease infinite;
              }

              .img-content {
                width: 100%;
                // height: 100%;
                height: 26.67vh;
                cursor: pointer;
                display: flex;
                justify-content: flex-end;
                // overflow-x: hidden;

                // border-left: 2px solid #d9d163;
                .img {
                  object-fit: contain;
                  // width: 100%;
                  height: 100%;
                  // height: 0;
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center;

                  video {
                    width: 100%;
                    height: 100%;
                  }

                  .box {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 999;
                  }
                }
              }
            }
          }
        }

        .child-box {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          position: relative;
          overflow: hidden;

          .child {
            width: 103.33vh;
            margin-bottom: 1.33vh;
            position: relative;

            &:first-child {
              margin-top: 2.67vh;
            }

            &::before {
              content: '';
              width: 0.33vh;
              height: calc(100% + 2.67vh);
              position: absolute;
              top: -2.67vh;
              left: -6.33vh;
              background-color: #7787f4;
            }

            &:last-child {
              &::before {
                height: calc(50% + 1.17vh);
              }
            }

            .content {
              position: relative;
              z-index: 1;

              .mainword {
                font-family: Arial;
                font-size: 3vh;
                line-height: 4.5vh;
                color: #ffa51f;
                margin: 2.67vh 0 1.33vh 80px;
              }

              .content-box {
                border-radius: 2.5vh;
                border: 0.17vh solid #7787f4;
                // border: 4px solid #7787f4;
                background: linear-gradient(to right, #fdfdf9 25%, #dfebf7 80%);

                box-sizing: border-box;
                overflow: hidden;

                .all-content {
                  display: flex;
                  // position: relative;
                  // justify-content: space-between;
                  // position: relative;

                  .left {
                    padding: 2.67vh 2.67vh 2.67vh 6.67vh;
                    box-sizing: border-box;
                    font-family: $font-text;
                    font-weight: 500;
                    // width: 1000px;
                    display: flex;
                    flex: 1;
                    // background-color: red;

                    .desc-box {
                      .enDesc {
                        font-family: Arial;
                        display: flex;
                        // align-items: center;
                        align-items: flex-start;
                        font-size: 2.67vh;
                        word-spacing: 0.33vh;
                        color: rgba(0, 0, 0, 0.65);
                        line-height: 4vh;
                        font-weight: 700;

                        .text {
                          display: inline-block;
                          margin-right: 1.33vh;
                        }

                        .t-icon {
                          cursor: pointer;
                          width: 4vh;
                          height: 4vh;
                          line-height: 4vh;
                          margin-left: 1.33vh;
                          margin-bottom: -1vh;
                          margin-top: -1.08vh;
                          flex-shrink: 0;
                          margin-top: 0.08vh;
                        }
                      }

                      .znDesc {
                        line-height: 3.5vh;
                        font-size: 2.33vh;
                        font-weight: 400;
                        color: #00000073;
                      }
                    }
                  }

                  .right {
                    // position: absolute;
                    display: block;
                    width: 20vh;
                    // height: 100%;
                    // top: 0;
                    // right: 0;

                    .img-content-loading {
                      position: absolute;
                      width: 20vh;
                      height: 100%;
                      right: 0;
                      top: 0;
                      background-color: #fffaba;
                      animation: loading1 1.6s ease infinite;
                    }

                    .img-content-child {
                      width: 20vh;
                      height: 100%;
                      cursor: pointer;
                      overflow: hidden;

                      .img {
                        // object-fit: cover;
                        width: 100%;
                        height: 100%;
                        // height: 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;

                        video {
                          width: 100%;
                          height: 100%;
                        }

                        .box {
                          position: absolute;
                          width: 100%;
                          height: 100%;
                          top: 0;
                          left: 0;
                          z-index: 999;
                        }
                      }
                    }
                  }
                }

                &.content-box2 {
                  padding-bottom: 2vh;

                  .all-content {
                    margin-left: 9.33vh;
                    width: 94.17vh;
                    border: 0.17vh solid #7787f4;
                    border-right: none;
                    // padding: 25px 0 25px 8px;
                    border-radius: 2.5vh 0 0 2.5vh;
                    overflow: hidden;
                    box-sizing: border-box;
                    position: relative;

                    .left {
                      padding: 2.08vh 2.08vh 2.08vh 4.67vh;
                      // width: 890px;
                      display: flex;
                      flex: 1;
                      box-sizing: border-box;

                      .enDesc {
                        font-family: Arial;

                        .text {
                          position: relative;

                          &::before {
                            position: absolute;
                            content: '';
                            width: 0.92vh;
                            height: 0.92vh;
                            border-radius: 50%;
                            position: absolute;
                            background-color: #595955;
                            // top: calc(50% - 5px);
                            top: 1.67vh;
                            left: -1.75vh;
                          }
                        }
                      }
                    }

                    .right {
                      // width: 240px;
                    }
                  }
                }
              }

              .circle {
                position: absolute;
                width: 6.67vh;
                height: 6.67vh;
                border: 0.17vh solid #7787f4;
                border-radius: 50%;
                top: calc(50% - 3.33vh);
                left: -3.33vh;
                background-color: #fffef2;
                color: #7283f1;
                font-family: $font-special;
                font-size: 3.33vh;
                font-style: normal;
                font-weight: 400;
                text-align: center;
                line-height: 6.67vh;

                &::before {
                  content: '';
                  background-image: v-bind(bg_slideLine);
                  background-repeat: no-repeat;
                  position: absolute;
                  background-size: 3.58vh 2vh;
                  width: 3.58vh;
                  height: 2vh;
                  top: calc(50% - 2vh);
                  left: -3.08vh;
                  z-index: -1;
                }
              }
            }
          }
        }
      }

      .bottom-box {
        width: 120vh;
        height: 13.67vh;
        padding: 2vh 4vh;
        box-sizing: border-box;
        border-radius: 1.67vh;
        background-color: #fae9be;
        font-family: $font-text;
        font-size: 2.67vh;
        font-weight: 500;
        line-height: 4.83vh;
        margin: 4vh 0;
      }
    }
  }
}
</style>
