<template>
  <div class="content" v-if="activeDate">
    <div style="font-size: 20px;color: #333333;font-weight: 600;text-align: left">{{ activeDate.new_name }}</div>
    <div style="text-align: center;font-size: 17px;margin-top: 10px;">{{ activeDate.subtitle }}</div>
    <div class="em">{{ activeDate.reporter }}</div>
    <!-- <div style="margin: 10px 0px;" @click="openVideo()" v-if="activeDate.video != '' && activeDate.video != null">
      <span style="color: #415CA2;">#视频链接</span>
    </div> -->
    <!-- <div style="padding: 10px 0px;" v-if="activeDate.video != '' && activeDate.video != null">
      <video :src="activeDate.video" controls style="width: 100%;max-height: 300px;margin: 0px auto;"></video>
    </div> -->
    <div style="margin-top: 15px;">
      <img src="/public/static/top_video.png" @click="showModal = true" style="width: 100%;">
    </div>
    <div id="imgBox" :class="'font' + fontSize" style="line-height: 30px;" v-html="activeDate.content"></div>
    <!-- <div style="margin: 10px 0px;" @click="openVideo()" v-if="activeDate.video != '' && activeDate.video != null">
      <span style="color: #415CA2;">#视频链接</span>
    </div> -->

    <div id="PageBtn">
      <div style="position: fixed;bottom: 290px;right: 15px;z-index: 100;">
        <div id="read-btn" @click="readMp3()">
          <img v-if="!isPlay" src="/public/static/stop.png" style="width: 50px;height: 50px;">
          <img v-if="isPlay" src="/public/static/bf.gif" style="width: 50px;height: 50px;">
        </div>
      </div>
      <div class="MenuBox">
        <a id="Haibao_share" @click="copy()" href="javascript:(-1);"
          style="background-image: url(/h5/public/static/share.png);background-position: center;background-repeat: repeat;"></a>
        <a @click.prevent="openUrl()" href="javascript:(-1);"><img src="/public/static/home.png" alt=""
            id="Menu_home"></a>
        <a @click.prevent="addFontSize('da')" id="Menu_larger" href="javascript:(-1);"
          style="background-image: url(/h5/public/static/font-larger.png);background-position: center;background-repeat: repeat;"></a>
        <a @click="addFontSize('xiao')" id="Menu_smaller" href="javascript:(-1);"
          style="background-image: url(/h5/public/static/font-smaller.png);background-position: center;background-repeat: repeat;"></a>
        <!-- <a id="read-btn" @click="readMp3()" href="javascript:(-1);">
          <img v-if="!isPlay" src="/public/static/voice_pause.png" alt="">
          <img v-if="isPlay" src="/public/static/voice_play.png" alt="">
        </a> -->
        <a @click.prevent="openTop()"><img src="/public/static/goTop.png" alt="" id="Menu_Top"></a>
      </div>
    </div>
    <div id="fullPage">
      <canvas id="canvas"></canvas>
    </div>
    <div id="shareList">
      <audio ref="audioPlayer" @ended="readEnd" controls :src="'https://jinrigushitwo.gushitv.com/' + activeDate.mp_url"
        @canplaythrough="onAudioLoaded" style='width:100%;display:none;'></audio>
      <!--            <audio ref="audioPlayer" @ended="readEnd" controls-->
      <!--                   src="https://jinrigushitwo.gushitv.com/public/uploads/mp/1214.mp3"-->
      <!--                   @canplaythrough="onAudioLoaded"-->
      <!--                   style='width:100%;display:none;'></audio>-->
    </div>
    <n-modal v-model:show="showModal" :mask-closable="true">
      <video :src="activeDate.video" autoplay controls style="width: 90%;max-height: 300px;margin: 0px auto;"></video>
    </n-modal>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import router from "@/router/routes";
import axios from "axios";
import $ from 'jquery';

const showModal = ref(false);

const route = useRoute();
const info = ref({});
const fontSize = ref(14);
const activeDate = ref();
onMounted(() => {
  console.log(route.query);
  getList(route.query);
})
const copy = () => {
  let url = window.location.href; // 当前页面链接
  fallbackCopyTextToClipboard(url);
  alert('链接已复制到剪贴板');
}
const audioPlayer = ref(null);
const isPlay = ref(false);
const readMp3 = () => {
  console.log(audioPlayer.value.error);
  if (audioPlayer.value.error != null) {
    alert('音频生成中，请稍候再试！');
    return;
  }
  if (isPlay.value) {
    audioPlayer.value.pause();
  } else {
    audioPlayer.value.play();
  }
  isPlay.value = !isPlay.value;
}
const onAudioLoaded = () => {
  console.log('Audio has been loaded and is ready to play.');
}
const readEnd = () => {
  isPlay.value = false;
}
const fallbackCopyTextToClipboard = (text) => {
  const textArea = document.createElement('textarea');
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.position = 'fixed';

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    const successful = document.execCommand('copy');
    const msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
const getList = (item) => {
  axios.post("https://jinrigushitwo.gushitv.com/api/h5/news/find", { id: item.id })
    .then(response => {
      // 使用导入的数据
      //activeDate.value = response.data;
      var info = response.data.data;
      info.content = info.content.replace(/href="\/dist\//g, 'href="/h5/');
      //console.log(item.time);
      //const targetData = response.data.list.find(data => data.numberDate == item.time);
      activeDate.value = info;
      //console.log(activeDate.value)
      loadScripts([
        '/h5/public/static/js/Phototoys.js',
        '/h5/public/static/js/PhototoysDsg.js',
      ]).then(() => {
      });
    })
    .catch(error => console.error('Error loading the JSON file:', error))
}
const loadScripts = (urls) => {
  const loadScript = (url) => {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = url;
      script.type = 'text/javascript';
      script.onload = resolve; // 确保脚本加载完成后再继续
      document.head.appendChild(script);
    });
  };
  // 依次加载所有脚本
  // 依次加载所有脚本并返回一个 Promise
  return urls.reduce((promise, url) => {
    return promise.then(() => loadScript(url));
  }, Promise.resolve());
}
const removeScripts = () => {
  const scripts = document.querySelectorAll('script[src^="/h5/public/static/js/"]');
  const styles = document.querySelectorAll('style');
  styles.forEach(styles => styles.remove());
  scripts.forEach(script => script.remove());
};
const openUrl = () => {
  // 关闭当前页面
  const year = sessionStorage.getItem('year');
  const month = sessionStorage.getItem('month');
  const day = sessionStorage.getItem('day');
  sessionStorage.setItem('isShow', 1);
  //router.push('/');
  if (window.history && window.history.length === 1) {
    window.location.href = 'https://jinrigushitwo.gushitv.com/h5/#/'; // 直接跳转 
  } else {
    setTimeout(() => {
      window.history.back();
    }, 50)
  }

  // if (year && month && day) {
  //  window.history.back();
  // } else {
  //   router.push('/').then(() => {
  //     window.location.reload();
  //   });
  // }
}
const addFontSize = (type) => {
  if (type == 'da') {
    if (fontSize.value == 29) {
      return;
    }
    fontSize.value += 3;
  } else if (type == 'xiao') {
    if (fontSize.value == 14) {
      return;
    }
    fontSize.value -= 3;
  } else {
    fontSize.value = 14;
  }
}
const openTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  });
}
const openVideo = () => {
  window.open(activeDate.value.jump_link);
}
</script>
<style scoped src="/public/static/css/content.css"></style>
<style scoped>
.content {
  height: 100%;
  padding: 10px 20px;
  overflow-y: auto;
  background-color: #ffffff;
}

.content .em {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top: 10px;
}

.MenuBox {
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index: 99;
  /*图片轮播新增样式*/
}

.MenuBox img {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  cursor: pointer;
  border-radius: 50%;
}

.MenuBox a {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  cursor: pointer;
  border-radius: 50%;
  background-size: cover;
}

.font14 {
  font-size: 14px !important;
}

.font17 {
  font-size: 17px !important;
}

.font20 {
  font-size: 20px !important;
}

.font23 {
  font-size: 23px !important;
}

.font26 {
  font-size: 26px !important;
}

.font29 {
  font-size: 29px !important;
}
</style>
