<template>
  <div>
    <input type="hidden" id="activeDate" value=""/>
    <div class="topBox" v-if="data !== ''">
      <div class="cp">{{ timeInfo }} 版面总览</div>
      <div class="divider"></div>
      <div class="divider"></div>
      <div class="thumbnail-left-left clearfix">
        <ul>
          <li v-for="(item, index) in data.bm" class="shortjpg">
            <p><span class="title">{{ item.bm_name }}</span></p>
            <a href="#" @click.prevent="openBm(index)">
              <img class="paperImg" :src="item.bm_img" border="0" style="width: 100%;">
            </a>
          </li>
        </ul>
      </div>


    </div>
    <div class="footerBox">
      <div class="footerWrap wangqi">

        <div class="item">
          <img src="/public/static/wangqi.png" alt="">
          <div class="text datetimeBtn">往期</div>
          <!-- 三角形 -->
        </div>
      </div>
      <!-- //分享按钮 -->
      <div class="synthesis share">
        <div class="item">
          <img src="/public/static/fenxiang.png" alt="">
          <div class="text">分享</div>
        </div>
      </div>
      <!-- 日历层 -->
      <input type="text" class="form_date">
      <!-- 取消按钮 -->
      <div class="cancelBox" style="display: none;">
        <button class="cancelBtn">取消</button>
      </div>
      <!-- 下载层 -->
      <div class="synthPage"></div>
      <!-- 遮罩 -->

    </div>
    <div class="mask"></div>
    <div style="display:none;" id="publishDateTime">{{ timeInfo }}</div>
    <!--    <table style="display: none;">-->
    <!--      <tbody>-->
    <!--      <tr>-->
    <!--        <td>-->
    <!--          <span id="NewsPaperName">今日固始</span> <span id="NewsEditionName">#current-ed-name#</span>-->
    <!--          <span id="NewsEditionNumber">#current-ed-no#</span> <span id="NewsArticleTitle"></span>-->
    <!--          <span id="NewsArticleAuthor"></span><span id="NewsArticleTime">2024-12-17</span><span id="Class">1</span>-->
    <!--          <span id="jbdata">2024年12月17日  星期二</span>-->
    <!--        </td>-->
    <!--      </tr>-->
    <!--      </tbody>-->
    <!--    </table>-->
  </div>
</template>

<script>
import axios from "axios";
import $ from 'jquery';
import router from "@/router/routes";

export default {
  data() {
    return {
      timeId: '',
      data: '',
      timeInfo: ''
    };
  },
  mounted() {
    //$('#activeDate').val(newTime.time);
    var ListShow = sessionStorage.getItem('ListShow');
    //alert( webview);
    if (ListShow && ListShow == 1) {
      sessionStorage.setItem('ListShow', 0);
      setTimeout(() => {
        window.location.reload();
      }, 100)
    }
    // this.timeId = this.$route.query.id;
    this.timeInfo = this.$route.query.time;
    // sessionStorage.setItem("timeId", this.timeId);
    this.getJson();
  },
  methods: {
    removeScripts() {
      const scripts = document.querySelectorAll('script[src^="/h5/public/static/js/"]');
      const styles = document.querySelectorAll('style[src^="/public/static/css/"]');
      styles.forEach(styles => styles.remove());
      scripts.forEach(script => script.remove());
    },
    openBm(index) {
      sessionStorage.setItem("index", index);
      sessionStorage.setItem('isShow', 1);
      //router.push('/');
     setTimeout(() => {
       window.history.back();
    }, 50)
    },
    getJson() {
      axios.post("https://democs.gushitv.com/api/h5/date/search", {date: this.timeInfo})
          .then(response => {
            //var resIndex = response.data.list.length - 1;
            this.data = response.data.data;
            console.log(response);
            $('#activeDate').val(this.timeInfo);
            this.loadScripts([
              '/h5/public/static/js/jquery.min.js',
              '/h5/public/static/js/jquery.mobile.custom.min.js',
              '/h5/public/static/js/bootstrap.min.js',
              '/h5/public/static/js/bootstrap-datetimepicker.min.js',
              '/h5/public/static/js/bootstrap-datetimepicker.zh-CN.js',
              '/h5/public/static/js/jquery.qrcode.min.js',
              '/h5/public/static/js/pinchzoom.min.js',
              '/h5/public/static/js/html2canvas.min.js',
              '/h5/public/static/js/navi.js',
              '/h5/public/static/js/qfstatH5.js',
              '/h5/public/static/js/posterShare.js',
              '/h5/public/static/js/bigHaiBao.js'
            ]);
          })
          .catch(error => console.error('Error loading the JSON file:', error));
    },
    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);
        });
      };
      // 依次加载所有脚本
      urls.reduce((promise, url) => {
        return promise.then(() => loadScript(url));
      }, Promise.resolve());
    },
  }
}
</script>


<style src="/public/static/css/swiper.min.css"></style>
<style src="/public/static/css/bootstrap.min.css"></style>
<style src="/public/static/css/bootstrap-datetimepicker.min.css"></style>
<style src="/public/static/css/index_list.css"></style>
<style src="/public/static/css/global.css"></style>
<style src="/public/static/css/navi.css"></style>
<style scoped>
.cp {
  height: 42px;
  font-size: 30px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
  margin: 8px 0 12px 0;
  text-align: center;
}
</style>
