<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import WordCard from './components/WordCard.vue'
import { useAudio } from '@/hooks'

interface yingbiaoList {
  children: anyObj[]
  name: string
}
interface yinbiaoItem {
  audio: string
  examples: anyObj[]
  method: string
  name: string
  video_mouth: string
  video_organ: string
}
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const rightbg = `url(${OSS_URL}/urm/phoneticTranscription_detail_rightbg.svg) 100%/cover no-repeat`
const leftbg = `url(${OSS_URL}/urm/phoneticTranscription_detail_leftbg.svg) 100%/cover no-repeat`
const videoPlay = `url(${OSS_URL}/icon/video_play_icon.svg) 100%/cover no-repeat`
const router = useRouter()
const route = useRoute()
const list = ref<yingbiaoList[]>([])
const playerRef = ref()
const title = ref('')
const onshow = ref('') // 控制所有音频当前只能播放一个

const hornActive = ref(false) // 左上角喇叭播放状态

const showData = ref<yinbiaoItem>({
  audio: '',
  examples: [],
  method: '',
  name: '',
  video_mouth: '',
  video_organ: '',
})

const videoList = ref([
  {
    name: '发音口型示范',
    id: '',
    url: '',
    playIcon: 'block',
  },
  {
    name: '发音器官示范',
    id: '',
    url: '',
    mountId: 'x-video-two',
    playIcon: 'block',
  },
])

function onPause() {
  console.log('暂停')
}

function handleBack() {
  router.back()
}
function init() {
  fetch(`${OSS_URL}/data_JSON/yinbiao_all_new.json`)
    .then(res => {
      if (!res.ok) {
        return
      }
      return res.json()
    })
    .then(data => {
      list.value = data
      getData()
      handlePlaySound(false)
    })
}
function getData() {
  list.value.forEach(item => {
    item.children.forEach(i => {
      // eslint-disable-next-line
      i.children.forEach((j: anyObj) => {
        if (j.name === title.value) {
          showData.value = j as yinbiaoItem
        }
      })
    })
  })

  videoList.value = [
    {
      name: '发音口型示范',
      id: showData.value.name,
      url: showData.value.video_mouth,
      playIcon: 'block',
    },
    {
      name: '发音器官示范',
      id: showData.value.name,
      url: showData.value.video_organ,
      mountId: 'x-video-two',
      playIcon: 'block',
    },
  ]
}

function handlePlay(index: number) {
  // 播放开始
  videoList.value[index].playIcon = 'none'
}

function handleEnd(index: number) {
  // 播放结束
  videoList.value[index].playIcon = 'block'
}

function handlePlaySound(needLoading = true) {
  // 左上角喇叭播放
  if (needLoading && hornActive.value) return
  hornActive.value = true
  useAudio({
    url: showData.value.audio,
    autoplay: true,
    onEnded: () => {
      hornActive.value = false
    },
  })
}

onActivated(() => {
  title.value = (route.params.title as string) || ''
  getData()
  hornActive.value = false
  nextTick(() => {
    handlePlaySound()
  })
})

onMounted(() => {
  init()
})
</script>
<template>
  <div class="top">
    <!-- <BackBar :leftText="'[ ' + title + ' ]'" class="backBar" /> -->
    <div class="backBar" @click="handleBack">
      <Icon name="left_arrow" size="80"></Icon>
      <LineFont text="[" />
      &nbsp;
      <LineFont :text="title" class="back-text" />
      &nbsp;
      <LineFont text="]" />
    </div>
    <div class="playSound">
      <Horn v-if="hornActive" :active="hornActive" width="50" class="horn"></Horn>
      <Icon v-else name="playSound" size="64" @click="handlePlaySound()"></Icon>
    </div>
  </div>
  <div class="page">
    <div class="content">
      <div class="video">
        <div v-for="(item, index) in videoList" :key="item.name" class="video-item">
          <div class="title">
            {{ item.name }}
            <div class="round-split">
              <span v-for="i in 46" :key="i" class="dot"></span>
            </div>
          </div>

          <div class="video">
            <div
              class="play"
              :style="{
                display: item.playIcon,
                background: videoPlay,
              }"
            ></div>
            <VideoPlayer
              ref="playerRef"
              :video="{
                id: item.id,
                url: item.url,
              }"
              :playIcon="videoPlay"
              :videoDomId="item.mountId"
              @onPause="onPause"
              @onPlay="handlePlay(index)"
              @onEnded="handleEnd(index)"
            ></VideoPlayer>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in showData.examples" :key="item.tag" class="content-list">
        <div
          class="leftbg"
          :style="{
            background: leftbg,
          }"
        ></div>
        <div
          class="rightbg"
          :style="{
            background: rightbg,
          }"
        ></div>
        <div class="title">
          {{ item.tag.replace(/<\/?b>/g, '') }}
          <div class="round-split">
            <span v-for="i in 17" :key="i" class="dot"></span>
          </div>
        </div>
        <div class="yinbiao-box">
          <WordCard
            v-for="(card, cardNum) in item.words"
            :key="card.word"
            v-model="onshow"
            :wordData="card"
            :num="String(index) + cardNum"
          ></WordCard>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.top {
  position: absolute;
  z-index: 9999;
  left: $space-6;
  top: 2.67vh;
  display: flex;
  align-items: center;
  .backBar {
    display: flex;
    align-items: center;

    cursor: pointer;
    .x-icon {
      margin-right: $space-3;
    }
  }
  .back-text {
    font-family:
      'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
      sans-serif;
  }
  .playSound {
    margin-left: 24px;
    height: 6vh;
    width: 6vh;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0.5vh 0.5vh rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .horn {
      margin-left: 4px;
    }
  }
}
.page {
  width: 100%;
  height: 100%;
  padding: 0 $space-8 $space-4;
  @include main_bg;
  text-align: center;
  --gradient1: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #737373 12.85%);
  mask-image: var(--gradient1);
  -webkit-mask-image: var(--gradient1);
  mask: var(--gradient1);
  -webkit-mask: var(--gradient1);
  .content {
    height: 100vh;
    overflow: auto;
    padding-top: 13.67vh;
    padding-bottom: 1.67vh;
    @include hidden_scroll;
    // mask-mode: match-source;
    --gradient1: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #737373 12.85%);
    mask-image: var(--gradient1);
    -webkit-mask-image: var(--gradient1);
    mask: var(--gradient1);
    -webkit-mask: var(--gradient1);

    .video {
      display: flex;
      .video-item {
        &:first-child {
          margin-right: 40px;
        }
        .title {
          position: relative;

          display: flex;
          justify-content: center;
          align-items: center;
          width: 876px;
          height: 7.33vh;
          // fill: linear-gradient(268deg, #86e6ff 2.38%, #9effda 51.64%, #5fdcfd 98.96%);
          background-image: linear-gradient(272deg, #77e3ff 60.52%, #83fff3 99.73%);
          color: $font-color;
          font-family: $font-special;
          font-size: 3.33vh;
          font-style: normal;
          font-weight: 400;
          border-radius: 1.33vh;
        }

        .video {
          width: 876px;
          height: 41.33vh;
          padding: 2.67vh;
          background-color: #fff;
          border-radius: 1.33vh;
          position: relative;
          .play {
            position: absolute;
            z-index: 999;
            height: 9.33vh;
            width: 9.33vh;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
          }
          :deep(.x-video) {
            border-radius: 1.33vh;
            box-shadow: 0 0.25vh 0.25vh rgba(0, 0, 0, 0.15);

            .xg-options-icon {
              .xg-options-list {
                li {
                  height: 2.5vh;
                }
              }
            }
            .xgplayer-start {
              display: none;
            }
            .xgplayer-progress-played {
              background: linear-gradient(180deg, #ffe70b 0%, #ffcf24 56.25%, #ffc438 100%);
            }
            .xgplayer-progress-btn {
              background: linear-gradient(180deg, #ffe70b 0%, #ffcf24 56.25%, #ffc438 100%);
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
    .content-list {
      background-color: #fff;
      border-radius: 1.67vh;
      margin-top: 10.67vh;
      position: relative;
      padding: 2vh 24px 0;

      .leftbg,
      .rightbg {
        position: absolute;
        z-index: 2;
      }
      .leftbg {
        width: 15vh;
        height: 15vh;
        left: 0;
        top: 0;
      }
      .rightbg {
        width: 30.08vh;
        height: 25.33vh;
        bottom: 0;
        right: 0;
      }
      .title {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -10vh);
        // top: 5vh;

        width: 340px;
        height: 8vh;
        border-radius: 1.67vh;
        background-image: linear-gradient(274deg, #77e3ff -68.01%, #83fff3 52%);
        font-family: $font-special;
        font-size: 4.67vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $font-color;
        .round-split {
          top: 7.5vh;
        }
      }
      .yinbiao-box {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .round-split {
      position: absolute;
      left: 0;
      top: 6.83vh;

      width: 100%;
      height: 0.83vh;
      background-size: 20px 12px;
      background-position: center;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .dot {
        width: 0.83vh;
        height: 0.83vh;
        background: linear-gradient(180deg, #6384b9 0%, #82aef5 100%);
        margin: 0 4px;
        border-radius: 50%;
      }
    }
  }
}
</style>
