<template>
  <div class="container">
    <input name="activeDate" value="" type="hidden">
    <div style="position: absolute;left: -40px;display: flex;flex-direction: column;">
      <div @mouseover="mouseLeft(1)" @mouseout="startHideMenuTimer()" class="container-left">目录</div>
      <div @mouseover="mouseLeft(2)" @mouseout="startHideMenuTimer()" class="container-left">本版</div>
      <div @mouseover="mouseLeft(3)" @mouseout="startHideMenuTimer()" class="container-left">往期</div>
    </div>
    <div v-if="mouseIndex == 1" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
      style="z-index: 999999;position: absolute;left:15px;border: 1px solid #bfbfbf;width: 205px;padding: 10px;background-color: #ffffff;">
      <div>
        <span class="triangle triangleBorder"></span>
        <span class="triangle triangleBg"></span>
        <div class="top_1_div" v-for="(item, index) in data" :key="item.bm_name">
          <div @click.prevent="openBm(index)">{{ item.bm_name }}</div>
          <!-- <a class="pdf" target="_blank" :href="item.bm_pdf"
              :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a> -->
        </div>
      </div>
    </div>
    <div v-if="mouseIndex == 2" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
      style="z-index: 999999;top: 85px;position: absolute;left:15px;border: 1px solid #bfbfbf;width: 205px;padding: 10px;background-color: #ffffff;">
      <div>
        <span class="triangle triangleBorder"></span>
        <span class="triangle triangleBg"></span>
        <div style="padding-left: 16px;font-weight: bold;">{{ data[dataIndex].bm_name }}</div>
        <div class="top_1_div" v-for="news in data[dataIndex].news" :key="news.new_name">
          <div class="text-ellipsis" @click.prevent="openNews(news)">{{ news.new_name }}</div>
          <!-- <a class="pdf" target="_blank" :href="item.bm_pdf"
              :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a> -->
        </div>
      </div>
    </div>
    <div v-show="mouseIndex == 3" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
      style="z-index: 999999;top: 150px;position: absolute;left:15px;border: 1px solid #bfbfbf;padding: 10px;background-color: #ffffff;">
      <div class="main-layout clearfix">
        <div class="layout-calendar fr" id="calendar">
          <div class="calendar-header clearfix">
            <h4 class="fl">按日期查找</h4>
            <div class="date-toggle fr clearfix">
              <div class="date-toggle-item year-toggle fl">
                <i class="icon-toggle icon-toggle-prev"></i>
                <select class="date-select" style="margin: 0px 3px"></select>
                <i class="icon-toggle icon-toggle-next"></i>
              </div>
              <div class="date-toggle-item month-toggle fl">
                <i class="icon-toggle icon-toggle-prev"></i>
                <select class="date-select" style="margin: 0px 3px"></select>
                <i class="icon-toggle icon-toggle-next"></i>
              </div>
            </div>
          </div>
          <ul class="calendar-week"></ul>
          <div class="calendar-main"></div>
          <div class="calendar-footer clearfix">
            <input class="date-input" id="input_year" type="text" maxlength="4" style="margin-right: 5px">
            <span>年</span>
            <input class="date-input" id="input_month" type="text" maxlength="2" style="margin:0px 5px">
            <span>月</span>
            <input class="date-input" id="input_day" type="text" maxlength="2" style="margin:0px 5px">
            <span>日</span>
            <button class="btn-view fr" id="submit_btn">查 看</button>
          </div>
        </div>
        <div class="layout-calendar fr" id="search">
          <div class="calendar-footer clearfix">
            <input class="date-input" id="input_search" type="text" maxlength="20" v-model="searchQuery">
            <button class="btn-view fr" @click="searchNews">检 索</button>
          </div>
        </div>
      </div>
    </div>
    <div class="page-main clearfix" v-if="data != ''">
      <!-- 版面预览 -->
      <div class="fl">
        <div class="pic-box">
          <img :src="data[dataIndex].bm_img" id="Bantu" width="408px" border="0" usemap="#newbook"
            style="opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); top: 16px; z-index: 9;">
          <canvas id="coorCanvas" width="408px" height="590px"
            style="position: absolute;top: 15px;left:50%;transform: translateX(-50%); opacity: 1; z-index: 10; pointer-events: none;"></canvas>
          <map name="newbook">
            <area v-for="area in data[dataIndex].news" :key="area.id" class="paperarea" @click="openNews(area)"
              @mouseover="handleMouseOver(area)" @mouseout="handleMouseOut()" :coords="area.coordinate" shape="rect"
              :title="area.new_name">
          </map>
          <!-- <div class="pic-info clearfix">
            <span class="pic-info-summary fl">{{ data[dataIndex].bm_name }}</span>
            <div class="pic-info-ctrls clearfix fr">
              <a class="pic-info-ctrl pic-info-ctrl-prev" title="阅读上一版" @click.prevent="openNext('top')"
                href="#">上一版</a>
              <a class="pic-info-ctrl pic-info-ctrl-next" title="阅读下一版" @click.prevent="openNext('bottom')"
                href="#">下一版</a>
            </div>
          </div> -->
        </div>
        <!-- <div class="main-news" v-if="showInfo" style="width: 410px;margin-top: 20px">
          <h2 class="main-news-title">本版列表新闻</h2>
          <div class="main-news-main">
            <ul class="news-list">
              <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name">
                <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
                  :title="news.new_name">{{
                    news.new_name
                  }}</a>
              </li>
            </ul>
          </div>
        </div> -->
      </div>


      <!-- 主体 -->
      <div class="main-box">
        <!-- <div class="main-header clearfix">
          <ul class="main-header-nav fr clearfix"></ul>
        </div> -->
        <!-- <div class="main-tools clearfix">
          <span class="main-tools-date fl">{{ datetime }}</span>
          <div class="main-tools-ctrls fr">
            <a class="main-tools-ctrl main-tools-ctrl-index" @click.prevent="goHome()" title="回到数字报首页"
              href="#">数字报首页</a>
          </div>
        </div> -->
        <!-- <div v-if="showInfo" class="swiper-box clearfix" style="position:relative;height: 35px;">
          <div class="swiper-container">
            <div v-for="(item, index) in data" class="swiper-slide">
              <a href="#" @click.prevent="openBm(index)">{{ item.bm_name }}</a>
            </div>
          </div>
        </div> -->
        <div v-if="!showInfo">
          <div class="main-news">
            <div class="main-news-main">
              <ul class="news-list">
                <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name"
                  :class="{ 'news-item-active': hoveredArea && hoveredArea.id === news.id }"
                  @mouseover="handleMouseOver(news)" @mouseout="handleMouseOut()">
                  <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
                    :title="news.new_name">{{
                      news.new_name
                    }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="showInfo" class="main-content-wrapper" id="news_wrapper">
          <!-- <div class="main-content-header clearfix">
            <div class="article-ctrls fl">
              <a class="article-ctrl article-ctrl-prev" @click.prevent="openNextNews('top')" href="#">上一篇</a>
              <a class="article-ctrl article-ctrl-next" @click.prevent="openNextNews('bottom')" href="#">下一篇</a>
            </div>
            <ul class="font-ctrls fr" id="toptool">
              <li class="font-ctrl font-ctrl-plus" @click="addFontSize('da')">
                放大<i class="font-ctrl-icon font-ctrl-icon-plus"></i>
              </li>
              <li class="font-ctrl font-ctrl-sub" @click="addFontSize('xiao')">
                缩小<i class="font-ctrl-icon font-ctrl-icon-sub"></i>
              </li>
              <li class="font-ctrl font-ctrl-default" @click="addFontSize('mo')">
                默认<i class="font-ctrl-icon font-ctrl-icon-default"></i>
              </li>
            </ul>
          </div> -->
          <div style="font-size: 16px;">{{ data[dataIndex].bm_name }}</div>
          <div style="height: 1px;background-color:#d4d4d4;width: 100%;margin: 10px 0;"></div>
          <div class="main-content">
            <h1 style="text-align: center;">
              {{ targetInfo.new_name }}
            </h1>
            <h3 style="text-align: center;">
              {{ targetInfo.subtitle }}
            </h3>
            <h2 style="text-align: center;" class="summary"></h2>
            <p class="datesource">{{ targetInfo.reporter }}</p>
            <br>
            <div class="info">
              <div>
              </div>
              <div :class="'font' + fontSize" v-html="targetInfo.content"></div>
            </div>
          </div>

        </div>
        <!-- <div v-if="!showInfo" class="main-layout clearfix">
          <div class="layout-catalogue fl">
            <h2 class="layout-catalogue-title">版面目录</h2>
            <div class="layout-catalogue-main">
              <ul class="layout-catalogue-list">
                <li class="layout-catalogue-item" v-for="(item, index) in data" :key="item.bm_name">
                  <a href="#" :title="item.title" @click.prevent="openBm(index)">{{ item.bm_name }}</a>
                  <a class="pdf" target="_blank" :href="item.bm_pdf"
                    :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a>
                </li>
              </ul>
            </div>
          </div>
          <div class="layout-calendar fr" id="calendar">
            <div class="calendar-header clearfix">
              <h4 class="fl">按日期查找</h4>
              <div class="date-toggle fr clearfix">
                <div class="date-toggle-item year-toggle fl">
                  <i class="icon-toggle icon-toggle-prev"></i>
                  <select class="date-select" style="margin: 0px 3px"></select>
                  <i class="icon-toggle icon-toggle-next"></i>
                </div>
                <div class="date-toggle-item month-toggle fl">
                  <i class="icon-toggle icon-toggle-prev"></i>
                  <select class="date-select" style="margin: 0px 3px"></select>
                  <i class="icon-toggle icon-toggle-next"></i>
                </div>
              </div>
            </div>
            <ul class="calendar-week"></ul>
            <div class="calendar-main"></div>
            <div class="calendar-footer clearfix">
              <input class="date-input" id="input_year" type="text" maxlength="4" style="margin-right: 5px">
              <span>年</span>
              <input class="date-input" id="input_month" type="text" maxlength="2" style="margin:0px 5px">
              <span>月</span>
              <input class="date-input" id="input_day" type="text" maxlength="2" style="margin:0px 5px">
              <span>日</span>
              <button class="btn-view fr" id="submit_btn">查 看</button>
            </div>
          </div>
          <div class="layout-calendar fr" id="search">
            <div class="calendar-footer clearfix">
              <input class="date-input" id="input_search" type="text" maxlength="20" v-model="searchQuery">
              <button class="btn-view fr" @click="searchNews">检 索</button>
            </div>
          </div>
        </div> -->

        <!-- <div class="main-news" v-if="!showInfo">
          <h2 class="main-news-title">本版列表新闻</h2>
          <div class="main-news-main">
            <ul class="news-list">
              <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name">
                <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
                  :title="news.new_name">{{
                    news.new_name
                  }}</a>
              </li>
            </ul>
          </div>
        </div> -->
      </div>
    </div>
    <!-- <div class="footer"></div> -->
  </div>
</template>

<script>
import axios from 'axios';
import $ from 'jquery';

export default {
  data() {
    return {
      iconPdf: "/dist/public/static/icon_pdf.png",
      data: '',
      dataIndex: 0,
      showInfo: false,
      targetInfo: {},
      fontSize: 14,
      datetime: '',
      typeList: [],
      typeId: 0,
      hoveredArea: null,
      imageScale: 1,
      mouseIndex: 0,
      hideMenuTimer: null,
    };
  },
  mounted() {
    var index = sessionStorage.getItem("index");
    this.dataIndex = index ? index : 0;
    this.getCurrentDateMaxDay();
    console.log(this.$route.query.id)
    if (typeof (this.$route.query.id) != 'undefined') {
      this.getInfo(this.$route.query.id);
    }
    if (this.$route.query.date) {
      //$('#activeDate').val(this.$route.query.date);
      var time = new Date(this.$route.query.date);
      var initYear = time.getFullYear();
      var initMonth = String(time.getMonth() + 1).padStart(2, '0');
      var initDay = String(time.getDate()).padStart(2, '0');
      sessionStorage.setItem("year", initYear);
      sessionStorage.setItem("month", initMonth);
      sessionStorage.setItem("day", initDay);
    }
    //document.title =this.data.list[this.dataIndex].editionName;
    // var newInfo = sessionStorage.getItem("newInfo");
    // if (newInfo) {
    //   this.showInfo = true;
    //   this.targetInfo = JSON.parse(newInfo);
    // }
    // $('input[name="activeDate"]').val(newTime.time);
    //获取当前日期

  },
  methods: {
    mouseLeft(index) {
      this.clearHideMenuTimer();
      this.mouseIndex = index;
    },
    startHideMenuTimer() {
      this.clearHideMenuTimer();
      this.hideMenuTimer = setTimeout(() => {
        this.mouseIndex = 0;
      }, 1000);
    },
    clearHideMenuTimer() {
      if (this.hideMenuTimer) {
        clearTimeout(this.hideMenuTimer);
      }
    },
    handleMouseOver(area) {
      this.hoveredArea = area;
      const canvas = document.getElementById('coorCanvas');
      if (canvas && canvas.getContext) {
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const coords = area.coordinate.split(',').map(c => Number(c) * this.imageScale);
        if (coords.length === 4) {
          const [x1, y1, x2, y2] = coords;
          const width = x2 - x1;
          const height = y2 - y1;
          ctx.fillStyle = 'rgb(69,173,226,0.3)';
          ctx.fillRect(x1, y1, width, height);
        }
      }
    },
    handleMouseOut() {
      this.hoveredArea = null;
      const canvas = document.getElementById('coorCanvas');
      if (canvas && canvas.getContext) {
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    },
    openType(item) {
      console.log(item);
      this.typeId = item.id;
      this.getCurrentDateMaxDay();
      sessionStorage.setItem("typeId", item.id);
      sessionStorage.removeItem("DateIndex");
      sessionStorage.removeItem("newInfo");
      sessionStorage.removeItem("DateList");
      window.location.reload();
    },
    openNextNews(type) {
      if (type == 'top') {
        var id = parseInt(this.targetInfo.id) - 1;
      } else {
        var id = parseInt(this.targetInfo.id) + 1;
      }
      console.log(id);
      const newsItem = this.data[this.dataIndex].news.find(news => news.id == id);
      if (newsItem) {
        // 处理找到的新闻项
        console.log(newsItem);
        this.targetInfo = newsItem;
        sessionStorage.setItem("newInfo", JSON.stringify(newsItem));
      } else {
        if (type == 'top') {
          alert('已经是第一篇了！');
        } else {
          alert('已经是最后一篇了！');
        }
      }
    },
    openNext(type) {
      console.log(this.dataIndex);
      if (type == 'top') {
        if (this.dataIndex <= 0) {
          alert('已经是第一版了！');
          return;
        }
        this.dataIndex = this.dataIndex <= 0 ? 0 : parseInt(this.dataIndex) - 1;
      } else {
        if (this.dataIndex >= (this.data.length - 1)) {
          alert('已经是最后一版了！');
          return;
        }
        this.dataIndex = this.dataIndex >= (this.data.length - 1) ? (this.data.length - 1) : parseInt(this.dataIndex) + 1;
      }
      sessionStorage.setItem("index", parseInt(this.dataIndex));
      sessionStorage.removeItem("newInfo");
      this.showInfo = false;
      window.location.reload();
    },
    addFontSize(type) {

      if (type == 'da') {
        if (this.fontSize == 29) {
          return;
        }
        this.fontSize += 3;
      } else if (type == 'xiao') {
        if (this.fontSize == 14) {
          return;
        }
        this.fontSize -= 3;
      } else {
        this.fontSize = 14;
      }
    },
    getTypeList() {
      axios.post("https://jinrigushitwo.gushitv.com/api/dzb/type/index")
        .then(response => {
          console.log(response);
          this.typeList = response.data.data;
          var typeId = sessionStorage.getItem("typeId");
          if (typeId) {
            this.typeId = typeId;
          } else {
            this.typeId = response.data.data[0].id;
          }
          this.getCurrentDateMaxDay();
        })
        .catch(error => console.error('Error loading the JSON file:', error))
    },
    getInfo(item) {
      axios.post("https://jinrigushitwo.gushitv.com/api/h5/news/find", { id: item })
        .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)
          this.targetInfo = info;
          sessionStorage.setItem("newInfo", JSON.stringify(info));
          this.showInfo = true;
        })
        .catch(error => console.error('Error loading the JSON file:', error))
    },
    openBm(d) {
      this.dataIndex = d;
      sessionStorage.setItem("index", d);
      sessionStorage.removeItem("newInfo");
      this.showInfo = false;
      //document.title = '固始电子报-' + this.data[d].bm_name;
      let url = window.location.href;
      url = url.replace(/&id=\d+/, '');
      url = url.replace(/\?id=\d+/, '');
      window.location.href = url;
      setTimeout(() => {
        window.location.reload();
      }, 100)
      //var img=this.data.list[d].imageSrc;
      //$('#BantuTop').attr("src",img)
      //BantuTop
    },
    getCurrentDateFormatted(d) {
      const date = new Date(d);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，需要加1
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    },
    getCurrentDateMaxDay() {
      var activeDate = $('input[name="activeDate"]').val();
      var querySatus = '';
      var storageTimeYear = sessionStorage.getItem("year");
      var storageTimeMonth = sessionStorage.getItem("month");
      var storageTimeDay = sessionStorage.getItem("day");
      if (storageTimeYear && storageTimeMonth && storageTimeDay) {
        activeDate = storageTimeYear + "-" + this.getMd(storageTimeMonth);
      }
      console.log(this.$route.query.date);
      if (typeof (this.$route.query.date) != 'undefined') {
        activeDate = this.$route.query.date;
        //activeDate = activeDate.substring(0, 7); //
      }
      if (typeof (this.$route.query.status) != 'undefined') {
        querySatus = this.$route.query.status;
      }
      console.log(activeDate);
      axios.post("https://jinrigushitwo.gushitv.com/api/dzb/date/index", { date: activeDate, status: querySatus })
        .then(response => {
          console.log(response);
          if (response.data.data.length == 0) {
            alert('本月没有数据');
            sessionStorage.removeItem("typeId");
            sessionStorage.removeItem("DateIndex");
            sessionStorage.removeItem("newInfo");
            sessionStorage.removeItem("DateList");
            window.location.href = "https://jinrigushitwo.gushitv.com/";
            return;
          }
          // 使用导入的数据
          var resIndex = response.data.data.length - 1;
          console.log('********', resIndex);
          sessionStorage.setItem('DateList', JSON.stringify(response.data.data));

          sessionStorage.setItem('DateIndex', resIndex);
          $('input[name="activeDate"]').val(response.data.data[resIndex].datetime);
          //this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
          //document.title = '《今日固始》电子版-' + this.datetime;
          // if(storageTimeMonth == '' || typeof (storageTimeMonth)=='undefined'){
          //   this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
          //   document.title = '《今日固始》电子版-' + this.datetime;
          // }else{
          //   document.title = '《今日固始》电子版-' +storageTimeYear + "年" + this.getMd(storageTimeMonth)+"月"+this.getMd(storageTimeDay)+"日";
          // }

          if (typeof (this.$route.query.date) != 'undefined') {
            var time = new Date(this.$route.query.date);
            var initYear = time.getFullYear();
            var initMonth = String(time.getMonth() + 1).padStart(2, '0');
            var initDay = String(time.getDate()).padStart(2, '0');
            document.title = '《今日固始》电子版-' + initYear + "年" + initMonth + "月" + initDay + "日";
          } else {
            this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
            document.title = '《今日固始》电子版-' + this.datetime;
          }

          this.getBm();
        })
        .catch(error => console.error('Error loading the JSON file:', error))
    },
    getMd(num) {
      return ('0' + num).slice(-2);
    },
    getBm() {

      var seList = sessionStorage.getItem('DateList')
      console.log('********', seList);
      var list = JSON.parse(seList);
      console.log('********', this.$route.query.date);
      var storageTimeYear = sessionStorage.getItem("year");
      var storageTimeMonth = sessionStorage.getItem("month");
      var storageTimeDay = sessionStorage.getItem("day");
      if (typeof (this.$route.query.date) != 'undefined') {
        const targetData = list.find(item => item.datetime == this.$route.query.date);
        console.log(targetData)
        if (typeof (targetData) == 'undefined') {
          alert('当日没有报纸！');
          sessionStorage.removeItem("typeId");
          sessionStorage.removeItem("DateIndex");
          sessionStorage.removeItem("newInfo");
          sessionStorage.removeItem("DateList");
          sessionStorage.removeItem("year");
          sessionStorage.removeItem("month");
          sessionStorage.removeItem("day");
          window.location.href = "https://jinrigushitwo.gushitv.com/";
          return;
        }
        var id = targetData.id;
      } else {
        if (storageTimeYear && storageTimeMonth && storageTimeDay) {
          var activeDate = storageTimeYear + "-" + storageTimeMonth + '-' + storageTimeDay;
          console.log(activeDate)
          const targetData = list.find(item => item.datetime == activeDate);
          console.log(targetData)
          var id = targetData.id;
        } else {
          var index = sessionStorage.getItem('DateIndex');
          var id = list[index].id;
        }
      }
      axios.post("https://jinrigushitwo.gushitv.com/api/dzb/bm/index", { date_id: id })
        .then(response => {
          console.log(response);
          this.data = response.data.data;
          this.$nextTick(() => {
            this.setupImageScaling();
          });

          this.loadScripts([
            '/dist/public/static/js/jquery.min.js',
            '/dist/public/static/js/jquery-ui.js',
            '/dist/public/static/js/jquery.datepicker.js',
            '/dist/public/static/js/jquery.rwdImageMaps.min.js',
            '/dist/public/static/js/Canvas_range.js',
            '/dist/public/static/js/common.js',
            '/dist/public/static/js/index.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());
    },
    setupImageScaling() {
      const img = document.getElementById('Bantu');
      if (img) {
        const calculateScale = () => {
          if (img.naturalWidth > 0) {
            this.imageScale = img.width / img.naturalWidth;
          }
        };

        if (img.complete) {
          calculateScale();
        } else {
          img.onload = calculateScale;
        }
      }
    },
    openNews(area) {
      //var info = this.data[this.dataIndex].news;
      //var targetInfo = info.find(item => item.id === area.id);
      //this.targetInfo = targetInfo;
      //sessionStorage.setItem("newInfo", JSON.stringify(targetInfo));
      //this.getInfo(area.id);
      //this.showInfo = true;
      // 实现日期搜索逻辑
      //this.showInfo = true;
      let url = window.location.href;
      //console.log(url)
      if (url.indexOf("?") === -1) {
        url += "?id=" + area.id;
      } else {
        // 检查是否已经包含了相同的参数
        if (url.indexOf("id=") === -1) {
          //修改ID后面的参数
          url += "&id=" + area.id;
        } else {

          // 如果已经包含了相同的参数，我们不做任何操作
          url = url.replace(/id=\d+/, 'id=' + area.id);
        }
      }
      window.location.href = url;
      console.log(url)
      setTimeout(() => {
        window.location.reload();
      }, 100)
    },

    goHome() {
      sessionStorage.removeItem("year");
      sessionStorage.removeItem("month");
      sessionStorage.removeItem("day");
      sessionStorage.removeItem("index");
      sessionStorage.removeItem("newInfo");
      this.showInfo = false;
      let url = window.location.href;
      url = url.replace(/&id=\d+/, '');
      url = url.replace(/\?id=\d+/, '');
      window.location.href = url;
      setTimeout(() => {
        window.location.reload();
      }, 100)
    },
  }
};
</script>

<style src="/public/static/css/jquery-ui.css"></style>
<style src="/public/static/css/reset.min.css"></style>
<style src="/public/static/css/style.css"></style>
<style scoped>
/* 在这里添加样式 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  overflow: hidden
}

.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;
}

.paperarea {
  cursor: pointer;

}

.type_text {
  margin-right: 20px;
  cursor: pointer;
  text-decoration: underline;
}

.type_text:hover {
  color: red;
}

.type_text_act {
  color: red;
}

.news-item-active {
  background-color: #f0f0f0;
  color: red;
}
</style>
