<template>
    <div id="turnpage" class="turnpage">
		<div v-for="(item,index) in imagesList" :key="index"
			:style="` background:url(${item}) no-repeat 100% 100%; background-size:100% 100%;height:100px;`">
		</div>
    </div>

  </template>
  
  <script>
  import turn from '@/utils/turn.js'; 
  import image1 from '@/assets/1.png';
  import image2 from '@/assets/2.png';
  import image3 from '@/assets/3.png';
  import image4 from '@/assets/4.png';
  import image5 from '@/assets/5.png';
  import image6 from '@/assets/6.png';
  import image7 from '@/assets/7.png';
  import image8 from '@/assets/8.png';
  import image9 from '@/assets/9.png';
  import image10 from '@/assets/10.png';
  import image11 from '@/assets/11.png';
  import image12 from '@/assets/12.png';
  import image13 from '@/assets/13.png';
  import image14 from '@/assets/14.png';
  import image15 from '@/assets/15.png';
  import image16 from '@/assets/16.png';
  import image17 from '@/assets/17.png';
  import image18 from '@/assets/18.png';
  import image0 from '@/assets/封面.png';
  import image19 from '@/assets/尾页.png';

  import { ipcApiRoute } from "@/api/main";
  import { ipc } from '@/utils/ipcRenderer';
  
  export default {
		name: 'Home',
		data() {
			return {
        // 图片切换时间间隔
        pictureTime:'10000', 
        autoTurnTimeout:null,
				imagesList: [image0, image19, image1, image2, image3, image4, image5, image6, image7, image8, image9, image10, image11, image12, image13, image14, image15, image16, image17, image18]
			}
		},
		mounted() {
			const self = this
      ipc.invoke(ipcApiRoute.getCurrentDirectoryConfig, "config.json")
        .then((result) => {
          self.config = JSON.parse(result);
          console.log("配置文件内容: " ,self.config);
          self.pictureTime = self.config.pictureTime;
          // 调试模式,定时加载配置文件
          if (self.config.isDebug == true) {
            self.updateConfig();
          }
        });

			setTimeout(function() {
				self.onTurn();
			}, 1000)
		},
		methods: {
			onTurn() {
				this.$nextTick(() => {
					$('#turnpage').turn({
						acceleration: true, //启用硬件加速,移动端有效
						display: 'double', //显示：single=单页，double=双页，默认双页
						duration: 800, // 翻页撒开鼠标，页面的延迟
						page: 1, // 默认显示第几页					
						gradients: true, // 折叠处的光泽渐变，主要体现翻页的立体感、真实感
						autoCenter: true, //
						turnCorners: 'bl,br', // 设置可翻页的页角(都试过了，乱写 4个角都能出发卷起)， bl,br   tl,tr   bl,tr 
						height: 1080, //页面高度
						width: 1920 //翻书范围宽度，总宽度
					}).bind('turned', (event, page, view) => {
            if(page === $('#turnpage').turn('pages')){
              this.setAutoTurnFirstPage(); // 翻到第一页后，重新设置定时器
            }else{
              // 重新设置翻页定时器
              this.resetAutoTurn();  
              console.log("重置定时翻页");
            }
            
          });
          // 显示第二页
          // $('#turnpage').turn('next');
          this.setAutoTurn();  
          console.log("定时翻页");
				});
			},
      setAutoTurnFirstPage(){
        clearTimeout(this.autoTurnTimeout);
        this.autoTurnTimeout = setTimeout(() => {
          $('#turnpage').turn('page',1);
          this.setAutoTurn(); // 重新设置定时器
        }, this.pictureTime); 
      },
      setAutoTurn(){
        this.autoTurnTimeout = setTimeout(() => {
          $('#turnpage').turn('next');
          this.setAutoTurn(); // 重新设置定时器
        }, this.pictureTime); 
      },
      resetAutoTurn(){
        clearTimeout(this.autoTurnTimeout);
        this.setAutoTurn();
      },

      // 更新配置文件
      updateConfig() {
        const self = this;
        ipc.invoke(ipcApiRoute.getCurrentDirectoryConfig, "config.json")
          .then((result) => {
            this.config = JSON.parse(result);
          });
        setTimeout(() => {
          self.updateConfig();
        }, 1000);
      }
		}
	}
  </script>
  