<template>
  <!-- 普通弹窗 -->
  <van-overlay
    :show="visible"
    class="word-popup"
    :lock-scroll="false"
    @click="$emit('update:visible', false)"
    @change="change"
  >
    <div :class="['popup-content', 'uni-margin-wrap']">
      <van-swipe
        :class="['swiper-container', currData.swiperList.length > 1 ? 'swiper-block' : '']"
        :width="(windowWidth * 880) / 1920"
        :current="swiperDotIndex"
        :initial-swipe="props.meaningData.idx"
        :stop-propagation="false"
        @change="swiperChange"
      >
        <van-swipe-item
          v-for="(item, index) in currData.swiperList"
          :key="index"
          class="swiper-item"
        >
          <div class="swiper-item_child">
            <div :class="['slide-item', currentIndex === index ? 'active' : '']">
              <div
                class="bgc-cicle"
                :style="{
                  background: bg2,
                }"
              ></div>
              <div class="gray-box"></div>
              <div class="slide-item-container">
                <div class="uni-margin-wrap-child">
                  <el-scrollbar class="scroll_v hidden_scroll">
                    <van-swipe :class="['swiper-block-child']">
                      <van-swipe-item
                        v-for="(child, index) in item.image"
                        :key="index"
                        class="swiper-item-child"
                      >
                        <div class="slide-item-container-child">
                          <div
                            v-if="!mapSwiper[`id-${child}`] && child"
                            class="img-content-loading"
                          ></div>
                          <div v-if="child.indexOf('mp4') !== -1" class="video_box">
                            <XgVideo :url="child" class="slide-item-img"></XgVideo>
                          </div>
                          <img
                            v-else
                            :src="child"
                            class="slide-item-img"
                            @load="handleLoad(`id-${child}`)"
                          />
                        </div>
                      </van-swipe-item>
                    </van-swipe>
                    <div class="slide-item-content">
                      <span class="text1">{{ item.sentenceUsageEnDesc }}</span>
                      <span class="text2" v-html="item.content || item.enDesc"></span>
                      <span class="text3">{{ item.znDesc }}</span>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <template #indicator="">
          <div></div>
        </template>
      </van-swipe>
    </div>
  </van-overlay>
</template>

<script setup lang="ts" scoped>
import { playMp3 } from './hook'
import XgVideo from '../components/XgVideo.vue'
// import { pauseMp3 } from '../details/hook';

const props = defineProps<{
  visible: boolean
  meaningData: formType
}>()
const emit = defineEmits(['update:visible'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const bg = `url(${OSS_URL}/urm/word_swiper_bg.svg)`
const bg2 = `url(${OSS_URL}/urm/word_swiper_bg2.svg) 100% / contain no-repeat`

interface formType {
  sentenceUsageEnDesc?: string
  znDesc: string
  content: string
  swiperImgUrls: string[]
  swiperList: any[]
  idx: number
}
const windowWidth = ref(1920)
let currData = ref<formType>({
  sentenceUsageEnDesc: '',
  znDesc: '',
  content: '',
  swiperImgUrls: [],
  swiperList: [],
  idx: 0,
})

const currentIndex = ref(0)
const swiperDotIndex = ref(0)
const instance = getCurrentInstance()
const mapSwiper: anyObj = ref({})

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

const handlePause = (event: any, index: number) => {
  const doc = document.getElementById(`play_icon-${index}`) as HTMLElement
  doc.style.display = 'block'
}

const videoRef = ref()
const handlePlay = (event: any, index: number) => {
  // const doc = document.getElementById(`play_icon-${index}`) as HTMLElement;
  // doc.style.display = 'none';
  // const videoContext = uni.createVideoContext(`video-${index}`, instance);
  // videoContext.play();
}

const swiperChange = (event: any) => {
  currentIndex.value = event
  swiperDotIndex.value = event
  // pauseMp3();

  playMp3(
    currData.value.swiperList[currentIndex.value],
    currData.value.swiperList[currentIndex.value]?.usFile,
    false,
  )
  // 暂停播放视频
  pauseAll()
}

const pauseAll = () => {
  // for (let i = 0; i < currData.value.swiperImgUrls.length; i++) {
  // const videoContext = uni.createVideoContext(`video-${i}`, instance);
  // videoContext.pause();
  // }
}

const popupClose = (e: any) => {
  if (props.visible) {
    emit('update:visible', false)
    // pauseMp3();
  }
}

const change = (e: any) => {
  emit('update:visible', e.show)
}

watch(
  () => props.visible,
  (newValue, oldValue) => {
    if (!newValue) return
    currData.value = props.meaningData

    currData.value.swiperList = currData.value.swiperList.filter((item, index: number) => {
      item.active = index === currData.value.idx
      return item.image.length > 0
    })
    // 当前选中下标
    let idx = currData.value.swiperList.findIndex(item => {
      return item.active && item.active === true
    })
    // pauseMp3();

    playMp3(currData.value.swiperList[idx], currData.value.swiperList[idx]?.usFile, false)
    currentIndex.value = swiperDotIndex.value = idx
  },
  {
    deep: true,
    immediate: true,
  },
)

onMounted(() => {
  windowWidth.value = window.innerWidth
})
</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%;
  }
}

.popup-content {
  width: 100vw;
  height: 100%;
  .swiper-container {
    height: 100%;
    width: 880px;
    overflow: visible;
    margin: 0 auto;
  }
  :deep(.swiper-block) {
    margin-left: 27.5vw;
  }

  :deep(.swiper-block-child) {
    min-height: 40vh;
    width: 100%;

    .uni-swiper-dots {
      display: flex;
      align-items: center;
    }

    &.swiper-block-child-1 {
      .uni-swiper-dots {
        display: none;
      }
    }
    .van-swipe__track {
      // width: 800px !important;
    }
  }

  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: unset;
    position: relative;

    .circle-groups {
      position: absolute;
      width: 880px;
      height: 7.67vh;
      background-size: cover;
      background-repeat: no-repeat;
      top: 0;
      left: -3px;
    }
  }

  .add-f-s {
    height: 0;
  }

  .swiper-item_child {
    // width: 880px;
    // height: 739.994px;
    // padding-top: 90px;
    box-sizing: border-box;
  }

  .slide-item {
    border: none !important;
    width: 880px;
    height: 60.83vh;
    border-radius: 3.33vh;
    z-index: 1;
    border: 0.33vh solid #d9d163;
    box-sizing: border-box;
    position: relative;
    padding-top: 7.5vh;
    transform: scale(0.85);

    &::before {
      content: '';
      position: absolute;
      width: 108%;
      height: 108%;
      background-image: v-bind(bg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      top: -4.5vh;
      left: -48px;
      transform: skew(1deg, -1deg);
    }

    .bgc-cicle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &.active {
      transform: scale(1);
      transition: all 0.2s ease-in 0s;
      z-index: 20;
      position: relative;

      .gray-box {
        display: none;
      }
    }

    .gray-box {
      display: block;
      position: absolute;
      opacity: 1;
      background-color: #000;
      width: 879.8px;
      height: 100.8%;
      z-index: 999;
      opacity: 0.25;
      top: -0.25vh;
      left: -3px;
      border-radius: 3.33vh;
    }

    .slide-item-container {
      padding: 0 40px 3.33vh;
      border-radius: 0 0 3.33vh 3.33vh;
      position: relative;

      .play_icon {
        // display: none;
        position: absolute;
        width: 163.62px;
        height: 13.63vh;
        // background-image: url('@/static/unity/play_circle.png');
        background-size: 163.62px 163.62px;
        background-repeat: no-repeat;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .swiper-item-child {
        // border-radius: 1.67vh;
        // border: 4px solid #d9d163;
        box-sizing: border-box;
        overflow: hidden;

        .slide-item-container-child {
          position: relative;
          display: flex;
          justify-content: center;

          height: 100%;
          width: 100%;
          border-radius: 1.67vh;
          overflow: hidden;

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

          .slide-item-img {
            height: 40vh;
            object-fit: contain;
            border-radius: 1.67vh;
          }

          .video_box {
            width: 800px;
            height: 40vh;
          }
        }
      }

      .uni-margin-wrap-child {
        width: 800px;
      }

      .slide-item-content {
        display: flex;
        flex-direction: column;
        font-family: $font-text;
        font-weight: 500;
        text-align: center;

        .text1 {
          font-size: 2.67vh;
          line-height: 4vh;
          color: #ffa51f;
          margin-top: 0.83vh;
        }

        .text2 {
          font-size: 3.33vh;
          line-height: 5vh;
          color: #000000a6;
          margin: 1.33vh 0 0.67vh 0;
        }

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

  :deep(.van-swipe__indicators) {
    // 指示点整个区域的位置
    bottom: 2.67vh;
    align-items: center;

    .van-swipe__indicator {
      // 指示点元素默认样式
      width: 16px !important;
      height: 1.33vh !important;
      background: #90d4fe !important;
      border: 0.17vh solid #ffffff;

      &--active {
        width: 24px !important;
        height: 2vh !important;
      }
    }
  }
}

.scroll_v {
  max-height: 51.67vh;
  overflow: scroll;
}
</style>
