<!-- 单词区 && 音标区：最多14位，超过换行  词根助记区：宽度不限，可以滚动-->
<!-- 单音节最长：swimming 多音节最长：transportation（L6--下--牛津上海版--UniT7） -->
<template>
<!--		<selectTypesVue activeSelect="1"></selectTypesVue>-->
		<view class="ezy-border-body">
			<view class="words-xue-box">
				<view class="words-xue-body">
					<!-- 单词区 -->
					<view class="word-circle-box">
						<view class="word-link-box">
							<text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
						</view>
					</view>
					<view class="word-block-box">
						<text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
					</view>
					<!-- 音标区 -->
					<view class="yb-play-box xue-yb-play-box">
						<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
						<!-- 音频播放 -->
						<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
					</view>
					<!-- 注释区 -->
					<view class="pin-words-explain-box xue-words-explain-box">
						<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
					</view>
					<!-- 详解触发 -->
					<ezyActiveVue @click="goXiangjie" class="ezy-btn-active details-btn">详解 ></ezyActiveVue>
					<!-- 音标拆分区 -->
					<view v-show="data.isPindu" class="word-block-box yb-block-box">
						<!-- pindu -->
						<audioThreeVue v-for="(item,index) in activeWord.pindu" :key="index" :YItem="item"
							@play-audio="handlePlay"></audioThreeVue>
					</view>
					<view v-show="!data.isPindu" class="yj-block-box">
						<!-- yinjie -->
						<audioFourVue v-for="(item,index) in activeWord.yinjie" :key="index" :YItem="item"
							@play-audio="handlePlay"></audioFourVue>
					</view>

					<!-- 音标按钮 -->
					<view class="xue-change-btn-box">
						<ezyActiveVue class="ezy-btn-active change-btn" :class="{active: data.isPindu}" @click="handlePindu">
						  <text>自然拼读</text>
						  <icon v-if="data.isPindu && isAutoPlaying" class="change-play-icon" ></icon>
						</ezyActiveVue>
						<ezyActiveVue class="ezy-btn-active change-btn" :class="{active: !data.isPindu}" @click="handleYinjie">
						  <text>音节拆分</text>
						  <icon v-if="!data.isPindu && isAutoPlaying" class="change-play-icon" ></icon>
						</ezyActiveVue>
					</view>
					<!-- 词根+实用口语 -->
					<view v-if="activeWord.cigenzhuji.length" class="details-content-box xue-details-content-box">
						<text class="details-title">词根助记</text>
						<scroll-view class="cg-item-list" scroll-x @touchmove.stop>
							<view class="cg-item-box" v-for="(item,index) in activeWord.cigenzhuji" :key="index">
								<view class="cg-item">
									<view
										:class="{isEven: index% 2 !== 0 && index!==activeWord.cigenzhuji.length-1,isOdd: index% 2 === 0 && index!==activeWord.cigenzhuji.length-1}">
										{{item.en}}
									</view>
									<view>{{item.zn}}</view>
								</view>
								<view class="cg-symbol" v-if="index<activeWord.cigenzhuji.length-2">+</view>
								<view class="cg-symbol" v-if="index == activeWord.cigenzhuji.length - 2">=</view>
							</view>
						</scroll-view>
					</view>

					<!-- 实用语句 -->
					<view class="details-content-box xue-details-content-box">
						<text class="details-title">实用口语</text>
						<view v-for="(item,index) in activeWord.kouyu" :key="index" class="syky-content">
							<view class="details-en-content">
								<rich-text :nodes="highlightWord(item.en)"></rich-text>
							</view>
							<view class="details-cn-content">{{item.zn}}</view>
						</view>
					</view>

				</view>
			</view>
		</view>
</template>

<script setup>
	import selectTypesVue from './selectTypes.vue';
	import audioTwoVue from './audioTwo.vue';
	import audioThreeVue from './audioThree.vue';
	import audioFourVue from './audioFour.vue';
	import yinbiaoTxtVue from "./yinbiaoTxt.vue"
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	import {
		reactive,
		computed,
    onUnmounted
	} from 'vue';
	import {
		audioPlayer,
		useAudioCache
	} from './useAudio.js';
  import {useYinBiaoAutoPlay} from "./useYinbiao.js"

  const { playYinbiaoAuto,isAutoPlaying,removeListen } = useYinBiaoAutoPlay();
	const emits = defineEmits(['play-audio', 'goXiangjie'])
	const {
		cacheAudio,
		clearAudioCache
	} = useAudioCache();

  onUnmounted(() => {
    removeListen();
  })

	const data = reactive({
		isPlaying: false,
		isPindu: true,
	})

	const props = defineProps({
		activeWord: { // 单词数据
			type: Object,
		},
		activeWords: {
			type: Array
		},
		pageData: {
			type: Object,
		},
	})


	const highlightWord = (text) => {
		if (!text || !props.activeWord.name) {
			return text
		}
		const word = props.activeWord.name;
		const regex = /<([^>]+)>/g;
		return text.replace(regex, (match) => {
			console.log('match', match)
			return `<span style="color: #3a7fe9;">${match.replace(/[<>]/g, "")}</span>`;
		});
	}

	async function handlePlay(opt) {
		emits('play-audio', opt)
	}

	function handlePindu() {
    // 自动播放中不允许切换
    if (isAutoPlaying.value) return
    if (data.isPindu) return
		data.isPindu = true
    playYinbiaoAuto(props.activeWord.pindu)
	}

	function handleYinjie() {
    // 自动播放中不允许切换
    if (isAutoPlaying.value) return
    if (!data.isPindu) return
		data.isPindu = false
    playYinbiaoAuto(props.activeWord.yinjie)
	}

	function goXiangjie() {
    uni.redirectTo({
      url: '/pages/chaojidanci/newEnglish/components/xiangjie?danyuanId=' + props.pageData.danyuanId + '&wordId=' + props
          .pageData.activeId
    })
	}
</script>

<style>
</style>