<!-- 搜‘根据需要更改’，需要根据实际项目更改的已经列出来了 -->
<!-- 重要事项：
	1.由于阅读页截取整行的需要，请确保文本格式和本插件中的text变量所示一致，即：！！！每一行的高度要一致！！！
	  如果要加内容，例如每一章开头加上章节名:'<h1>章节名</h1>',请确保所加的内容是单行高度的整数倍！！
	2.‘仅用于计算’的样式必须和阅读页样式一致，不然显示会有问题,
	3.字体必须是偶数，否则1.5倍行距的时候会无法截取到整行
 -->
<template>
	<view style="height: 100%;">
		<!-- 菜单层包含返回按钮的上半部分1 -->
		<view class="menu-top" >
			<view class="back">
				<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 仅用于计算（结构和样式请和阅读页一致）1 -->
		<view class="container hidden">
			<view class="chapter">章节名</view>
			<view id="content" class="content">
				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
					<view class="book-inner" id="preChapter"
						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
						<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.content"></p>
					</view>
				</view>
			</view>
			<view class="bottom-bar">显示电量、页码</view>
		</view>

		<view class="container hidden">
			<view class="chapter">章节名</view>
			<view class="content">
				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
					<view class="book-inner" id="curChapter"
						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
						<p v-for="(item, index) in curChapter.text" :key="index" v-html="item.content">
						</p>
					</view>
				</view>
			</view>
			<view class="bottom-bar">显示电量、页码</view>
		</view>

		<view class="container hidden">
			<view class="chapter">章节名</view>
			<view class="content">
				<view class="inner-box" :style="{ height: `${innerHeight}px` }">
					<view id="nextChapter"
						:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
						<p class="book-inner" v-for="(item, index) in nextChapter.text" :key="index"
							v-html="item.content"></p>
					</view>
				</view>
			</view>
			<view class="bottom-bar">显示电量、页码</view>
		</view>

		<!-- 垂直翻页 -->
		<!-- @click="showMenu" -->	
		
		<!-- 横向翻页 -->
		<view class="across" >
			<!-- 阅读页（结构和样式请和仅用于计算元素一致） -->
			<view class="chantong" style="display: none;">
				<!-- 上一页 -->
				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
					:style="{
					zIndex: turnType == 0 && pageBackRef.before ? 100: 102,
					transform: turnType == 0 && pageBackRef.before ? 'translate(0, 0)' : `translate${prePage.pageTranslate[turnType]}`,
					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
				}">
					<!-- 章节名 -->
					<view class="chapter">{{ prePage.chapterName }}</view>

					<!-- 外层class="content"用于计算阅读部分的高度 -->
					<view class="content">
						<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
							<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
							<view class="book-inner">
								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
									:class="highlight === item.paragraph ? 'highlight' : ''"
									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
								</p>
							</view>
						</view>
						<view
							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
							v-else>
							付费章节
							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
						</view>
					</view>
					<view class="bottom-bar1">
						<!-- 时间 -->
						<view>{{ systemTimeStr }}</view>
						<!-- 页码 -->
						<view>{{ prePage.pageNum + 1 }}/{{ prePage.totalPage }}</view>
						<!-- 电量 -->
						<view>
							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
						</view>
					</view>
				</view>

				<!-- 本页 -->
				<view ref="curPageRef" class="container mypages"
					:class="{ container0: background === 1, container1: background === 2 }" :style="{
					zIndex: 101,
					transform: `translate${curPage.pageTranslate[turnType]}`,
					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
				}" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" @touchcancel="touchcancel">
					<!-- 章节名 -->
					<view class="chapter">{{ curPage.chapterName }}
						<uni-icons v-if="newchapterImgList && newchapterImgList.length > 0" id="showImgs"
							@click="showImgHandle" color="#6aa84f" class="showImgs" type="images" size="20"></uni-icons>
					</view>
					<view class="content">
						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
							<view class="book-inner">
								<!-- <pre>
							{{curPage.text}}
							</pre> -->
								<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
								</p>
							</view>
						</view>
						<view
							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
							v-else>
							付费章节
							<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
								@touchend.stop="buyBook">去购买</view>
						</view>
					</view>
					<view class="bottom-bar1">
						<!-- 时间 -->
						<view>{{ systemTimeStr }}</view>
						<!-- 页码 -->
						<view>{{ curPage.pageNum + 1 }}/{{ curPage.totalPage }}</view>
						<!-- 电量 -->
						<view>
							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
						</view>
					</view>
				</view>

				<!-- 下一页-->
				<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
					:style="{
					zIndex: 100,
					transform: `translate${nextPage.pageTranslate[turnType]}`,
					transition: `transform ${showAnimation ? turnPageTime : 0}s`,
					boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
				}">
					<!-- 章节名 -->
					<view class="chapter">{{ nextPage.chapterName }}</view>
					<view class="content">
						<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="nextPage.canRead">
							<view class="book-inner">
								<p v-for="(item, index) in nextPage.text" v-html="item.list" :key="index"
									:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
									:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
								</p>

							</view>
						</view>
						<view
							style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
							v-else>
							付费章节
							<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
						</view>
					</view>
					<view class="bottom-bar1">
						<!-- 时间 -->
						<view>{{ systemTimeStr }}</view>
						<!-- 页码 -->
						<view>{{ nextPage.pageNum + 1 }}/{{ nextPage.totalPage }}</view>
						<!-- 电量 -->
						<view>
							<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
						</view>
					</view>
				</view>
			</view>
			<!-- 仿真翻页 -->
			<view v-if="isSimulation" class="flipbook-viewport" 
			:rect="rect" 
			:change:rect="updateRenderData"	
			:readerSet = "readerSet"
			:change:readerSet="updateReaderSet"
			:musicItem="musicItem"
			:change:musicItem="updateMusic"
			:oldReadSpeed="oldReadSpeed"
			:change:oldReadSpeed="updateReadPercent"
			:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
			 @touchend="turnjs.onClick"
			>
			<!-- <view class="container across"  @touchend="openEnd" @touchstart="openStart"> -->
				<view class="container across"  >
					<view class="flipbook" id="flipbook" >
						<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; color: #666; ">->点击两侧开启阅读<-</p> </div></div>						
						<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
							<div class="chapter">{{ curPage.chapterName }}</div>
							<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
								:class="{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
								:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
							</p>							
						</div> -->
					</view>
				</view>
			</view>			
			<!-- 模拟页面背景 -->
			<view class v-if='turnType == 0 && !pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
					width: `${pageBackRef.width}`,right: `${pageBackRef.right}`  }]" class="pageback_container">
				<view class="pageback"></view>
			</view>
			<view class v-if='turnType == 0 && pageBackRef.before' :style="[{ transition: `${pageBackRef.transition}`,
					width: `${pageBackRef.width}`,left: `${pageBackRef.left}`  }]" class="pageback_container">
				<view class="pageback"></view>
			</view>
		</view>

		<!-- 听书按钮 -->
		<view class="listenbook" v-if="musicManuShow">
			<view class="listenitem" @click="listenHandle">听</view>
		</view>
		<!-- 暂停按钮 -->
		<view class="audio_menu" v-if="isAudioMenu">
			<view class="pause audioSymbol" v-if="!isPause" @click="audioPause()">
				<u-icon name="pause" color="#fff" size="28"></u-icon>
			</view>
			<view class="right audioSymbol" v-else @click="audioPause()">
				<u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
			</view>
			<view class="audioSymbol" @click="offAudio">
				<u-icon name="close" color="#fff" size="28"></u-icon>
			</view>
		</view>

		<!-- 菜单层 -->
		<view class="menu" :style="{ height: `100%`, width: `${windowWidth}px` }" v-if="menuShow" @touchend="closeMenu">
			<!-- 菜单层包含返回按钮的上半部分 -->
			<view class="menu-top" :style="{ height: `${statusBarHeight + 40}px`, top: itemShow ? 0 : `-100%` }"
				@touchend.stop>
				<view :style="{ height: `${statusBarHeight}px` }"></view>
				<view class="head">
					<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 菜单主体 -->
			<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }" @touchend.stop>
				<!-- 用于显示章节进度 -->
				<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}</view>
				<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>

				<!-- 章节进度条 -->
				<view class="progress-box">
					<text style="" @click="goPreChapter">上一章</text>
					<view
						style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
						<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
							:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
					</view>
					<text @click="goNextChapter">下一章</text>
				</view>
				<view class="items-box">
					<view class="item-box" @click="openDirectory">
						<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
						<text style="font-size: 13px;">目录</text>
					</view>
					<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
						<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
						<text style="font-size: 13px;">夜间</text>
					</view>
					<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
						<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
						<text style="font-size: 13px;">日间</text>
					</view>
					<view class="item-box" @click="openSetting">
						<text class="iconfont" style="font-size: 25px;">A</text>
						<text style="font-size: 13px;">设置</text>
					</view>
				</view>
			</view>

			<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }" @touchend.stop>
				<view class="item">
					<view class="item-name">字号</view>
					<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
					<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
					<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
					<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
				</view>
				<view class="item">
					<view class="item-name">排版</view>
					<view class="type-setting" :class="{ active: lineHeight === 4 }" @click="changeLineHeight(4)">
						<view class="line" :class="{ lineActive: lineHeight === 4 }" v-for="i in 5" :key="i"></view>
					</view>
					<view class="type-setting" :class="{ active: lineHeight === 5 }" @click="changeLineHeight(5)">
						<view class="line" :class="{ lineActive: lineHeight === 5 }" v-for="i in 4" :key="i"></view>
					</view>
					<view class="type-setting" :class="{ active: lineHeight === 6 }" @click="changeLineHeight(6)">
						<view class="line" :class="{ lineActive: lineHeight === 6 }" v-for="i in 3" :key="i"></view>
					</view>
				</view>
				<view class="item">
					<view class="item-name">背景</view>
					<view class="icon" style="" :class="{ active: background === 1 }" @click="changeBackground(1)">
					</view>
					<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
						@click="changeBackground(2)"></view>
				</view>
			</view>
		</view>
		<!-- 目录层 -->
		<u-popup class="directory" mode="left" v-if="directoryShowBefore" :show="directoryShowBefore"  @close="directoryShowBefore=false">
			<view class="tanchu"  style="padding-right: 10px; width: 500rpx;">
				<view class="bookname">{{ bookName }}</view>
				<!--  :size="40"——每一栏高度为40px  :scrollHeight="windowHeight - 60"——书名的高度为60px -->
				<virtual-list :items="directoryList" :size="40" :remain="16" :active="curChapter.chapterIndex"
					:scrollHeight="windowHeight - 60">
					<template v-slot="{ item, active }">
						<view class="directory-listItem" :class="{ active: item.index == active }"
							@click="goToChapter(item)">{{ item.name }}</view>
					</template>
				</virtual-list>
			</view>
		</u-popup>
		<!-- 图片弹窗 -->
		<u-popup :show="imgsShow" :round="10" @close="imgsShow=false">
			<view class="tanchu" v-if="newchapterImgList">
				<text class="chapterImgTitle">当前章节共 {{newchapterImgList.length}} 张图片</text>
				<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="toRight">
					<view v-for="(item,index) in newchapterImgList" class="scroll-view-item_H">
						<view class="imgBox">
							<view style="height:90%" @click="clickImg(newchapterImgList,index)">
								<img :src="item" alt="" height="100%">
							</view>
							<text style="font-size: 24rpx; color: #666;">第 {{index + 1}} 张</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-popup :show="setShow" :round="10" @close="setShow = false">
			<view class="setMenu">
				<u-grid :border="false" col="3" @click="clickSet">
					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="30"></u-icon>
						<text class="grid-text" style="color: #666;">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
				<view class="menu">

					<!-- 菜单主体 -->
					<view class="menu-bottom" :style="{ bottom: itemShow ? 0 : '-100%' }">
						<!-- 用于显示章节进度 -->
						<view class="show-chapter" v-if="progressTouched">{{ directoryList[chapterProgress].name }}
						</view>
						<view class="show-chapter" v-else>{{ curChapter.chapterName }}</view>

						<!-- 章节进度条 -->
						<view class="progress-box">
							<text style="" @click="goPreChapter">上一章</text>
							<view
								style="flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px;">
								<slider :value="curChapter.chapterIndex" activeColor="#000" :block-size="20"
									:max="directoryList.length - 1" @changing="slideChanging" @change="slideChange" />
							</view>
							<text @click="goNextChapter">下一章</text>
						</view>
						<view class="items-box">
							<view class="item-box" @click="openDirectory">
								<text class="iconfont icon-mulu" style="font-size: 25px;"></text>
								<text style="font-size: 13px;">目录</text>
							</view>
							<view class="item-box" v-if="background === 2" @click="changeBackground(1)">
								<text class="iconfont icon-yejianmoshi" style="font-size: 25px;">&#xe63e;</text>
								<text style="font-size: 13px;">夜间</text>
							</view>
							<view class="item-box" v-if="background === 1" @click="changeBackground(2)">
								<text class="iconfont icon-rijianmoshi" style="font-size: 25px;"></text>
								<text style="font-size: 13px;">日间</text>
							</view>
							<view class="item-box" @click="openSetting">
								<text class="iconfont" style="font-size: 25px;">A</text>
								<text style="font-size: 13px;">设置</text>
							</view>
						</view>
					</view>

					<view class="setting" :style="{ bottom: settingShow ? 0 : `-100%` }">
						<view class="item">
							<view class="item-name">字号</view>
							<view class="icon" @click="bigSize" v-if="fontSize < maxFontSize">A+</view>
							<view class="icon" style="color: #666; border: #666 solid 1px;" v-else>A+</view>
							<view class="icon" @click="smallSize" v-if="fontSize > minFontSize">A-</view>
							<view class="icon" style="color: #666;border: #666 solid 1px;" v-else>A-</view>
						</view>
						<view class="item">
							<view class="item-name">排版</view>
							<!-- 这个行高没有必要存在，不符合阅读条件 -->
							<!-- <view class="type-setting" :class="{ active: lineHeight === 1 }"
								@click="changeLineHeight(1)">
								<view class="line" :class="{ lineActive: lineHeight === 1 }" v-for="i in 5" :key="i">
								</view>
							</view> -->
							<view class="type-setting" :class="{ active: lineHeight === 1.5 }"
								@click="changeLineHeight(1.5)">
								<view class="line" :class="{ lineActive: lineHeight === 1.5 }" v-for="i in 4" :key="i">
								</view>
							</view>
							<view class="type-setting" :class="{ active: lineHeight === 2 }"
								@click="changeLineHeight(2)">
								<view class="line" :class="{ lineActive: lineHeight === 2 }" v-for="i in 3" :key="i">
								</view>
							</view>
						</view>
						<view class="item">
							<view class="item-name">背景</view>
							<view class="icon" style="" :class="{ active: background === 1 }"
								@click="changeBackground(1)">
							</view>
							<view class="icon" style="background-color: #000;" :class="{ active: background === 2 }"
								@click="changeBackground(2)"></view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import battery from '../../components/battery/battery.vue'
	import virtualList from '../../components/virtualList/virtualList.vue'
	// 引入翻页效果动画
	import $ from 'jquery'

	import {
		dateToStr
	} from '../../utils/utils.js'
	import {
		mapState
	} from 'vuex';
	import $http from '../../config/requestConfig';
import { nextTick } from "vue";

	let copyBookText = []
	let preText = []
	let nextText = []
	let imglist = []

	// var music = uni.createInnerAudioContext();
	export default {
		components: {
			battery,
			virtualList
		},
		data() {
			return {
				baseList: [{
						name: 'photo',
						title: '章节图片'
					},
					{
						name: 'list-dot',
						title: '目 录'
					},
					{
						name: 'play-circle',
						title: '听 书'
					}
				],
				imgsShow: false,
				nothingShow: false,
				// 本章图片列表
				chapterImgList: [],
				newchapterImgList: [],
				preChapterTotal: null,
				nextChapterTotal: null,
				// preBookText = []
				oldReadSpeed: { // 本地初始阅读进度
					precent: null,
					updateReadId: null,
					readPage:0
				},
				scrollTop1: 0,
				bookName: '我是书名',
				bookFengMian:'', // 书籍封面
				bookId: 1,
				bookId_mark: '',
				history: { //本书历史记录
					chapterIndex: 0,
					progress: 0
				},

				directoryList: [], //目录列表
				currentPage: 0, //当前页
				read: 0,

				innerHeight: 0, //截取至整行的最大高度

				preChapter: { //上一章数据
					ready: false, //是否准备完毕
					chapterIndex: '',
					chapterName: '', //章节名称
					text: '',
					totalPage: '',
					canRead: true
				},

				curChapter: { //本一章数据
					chapterIndex: '',
					chapterName: '',
					text: '',
					totalPage: '',
					canRead: true
				},

				nextChapter: { //下一章数据
					ready: false, //是否准备完毕
					chapterIndex: '',
					chapterName: '',
					text: '',
					totalPage: '',
					canRead: true
				},

				tmpChapter: { //暂存章节内容
					text: [],
					canRead: true
				},

				cover: { //封面的状态
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
				},

				prePage: { //上一页数据
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: 1,
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true,
					isPre: false
				},

				curPage: { //本页数据
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: 1,
					totalPage: 1,
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true,
				},

				nextPage: { //下一页数据
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: '',
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true
				},

				verticalData: {
					ready: false, //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: '',
					pageTranslate: ['', '', ''], //页面位移，三个数对应三种翻页方式
					canRead: true
				},

				next: false, //用户是否正在翻下一页
				pre: false, //用户是否正在翻上一页

				waitForNext: false, //是否正在等待下一页准备完毕后跳转
				waitForPre: false, //是否正在等待上一页准备完毕后跳转
				waitForNextChapter: false, //是否正在等待下一章准备完毕后跳转
				waitForPreChapter: false, //是否正在等待上一章准备完毕后跳转

				showAnimation: false, //是否开启动画
				showShadow: false, //是否显示页面阴影

				isVertical: false, // 是否开启垂直阅读
				down: false, // 用于scroll事件请求数据判断

				windowWidth: 0, //可用屏幕宽度
				windowHeight: 0, //可用屏幕高度
				contentHeight: 0, //阅读区域高度

				scrollTop: 0, // 垂直阅读 scrolltop

				platform: '', //设备
				batteryState: '', //电池状态
				batteryLevel: 100, //电量
				systemTime: '', //系统时间
				systemTimeStr: '', //系统时间字符串
				statusBarHeight: 0, //状态栏高度
				pixelRatio: '', //设备像素比

				touchStartX: 0, // 触屏起始点x
				touchX: 0, // 瞬时触屏点x
				delta: 0, // 手指瞬时位移

				isTouch: false, // 是否处于触屏状态
				curPageTranslate: 0, // 本页的移动位置
				touchStartY: 0, // 触屏起始点y
				touchY: 0, // 瞬时触屏点y
				sliderValue: 0, // scroll事件赋值

				menuShow: false, //菜单栏box是否渲染
				itemShow: false, // 菜单栏动画控制
				settingShow: false, //设置栏动画控制
				directoryShow: false, //目录动画控制
				directoryShowBefore: false, // 目录渲染
				turnPageTime: .5, //翻页动画时间

				biaodian: ['，', ':', '、', ';', '。', '.','？','》','”',')','"'], //匹配的标点
				maxFontSize: 30, //最大字体大小，px
				minFontSize: 14, //最小字体大小，px
				turnType: 4, //翻页方式
				NumCol: '', // 一章多少行
				colSize: '', // 一行多少字
				fontSize: '', //字体大小，
				simplified: '', //是否简体
				lineHeight: '', //行高，注意是fontSize的倍数
				background: '', //背景
				colorList: ['#000', '#666'], //与背景对应的字体颜色
				highlight: "null", // 字体高亮
				fhighlight: false, // 左右的高亮
				chapterProgress: 0, //‘章节进度条’的参数
				progressTouched: false, //是否正在点击‘章节进度条’
				highlightTimer: '', // 高亮定时器名字
				domList: [], // dom列表
				domIndex: 0, // dom下标
				music: null, // 创建audio
				musicManuShow: false, // 听书按钮是否显示
				isPause: false, // 是否暂停
				isAudioMenu: false, // 是否展示听书菜单
				oldType: null,
				detail: {
					title: "",
					data: [],
					freeChapterCount: 0,
					isBuy: 0,
					isVip: 0,
					chapterNum:null, // 阅读章节数
				},
				isVerticalHua: false,
				speedTrue: false, //判断是否更新进度
				speedData: {
					bookId: 0,
					chapter_id: 0,
					chapter_name: '',
					precent: '',
					content_id: 0
				},
				updateReadId: 0,
				newData: [],
				pageBackRef: {
					transition: "unset",
					left: 0,
					right: 0,
					width: 0,
					before: false
				},
				topChange: 0,
				scroll_end: false,
				musicPlaying: false, // 正在播放音频
				// 仿真翻页参数
				width: uni.getSystemInfoSync().windowWidth,
				height: '800px',
				text: 'hello',
				isSimulation: true, // 仿真翻页模式				
				SimulationTextObj : {    // 仿真翻页内容
				'SimulationText' : [],
				'fontSize' : '',
				'lineHeight':'',
				'oldReadPage':0
				},				
				setShow: false, // 设置显示？
				clientlast: null, //开始位置
				touchNum: 0, //点击次数
				touchTime: null, //定时器清除				
				musicItem:{
					// 听书相关内容
					musicIndexDom:0,
					highlight: 'null',
					musicPlaying:false,
					page:0
				},
				readerSet:{
					fontSize:'',  // 字体大小，
					lineHeight:'' ,// 行高，注意是fontSize的倍数
					page:0,	
					background:''
				}
			}
		},

		onLoad(option) {
			this.bookId_mark = option.Id
			this.getSystemInfo()
			this.bookMessage()
			this.setStorage()
		},
		onUnload() {

			// #ifdef APP-PLUS
			// 退出全屏
			plus.navigator.setFullscreen(false)
			// #endif

			this.setStorage()
		},
		onReady() {
			// console.log('------------------------------')			
			// 单页禁止测滑返回
			// #ifdef APP-PLUS
			let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
			currentWebview.setStyle({
				popGesture: 'none'
			})
			// #endif
		},
		onHide() {
			this.setStorage()
		},
		mounted() {
			this.initPage()
		},
		computed: {
			progress() { //章节的阅读进度
				if (this.curChapter.totalPage === 1) {
					return 0
				}
				return this.currentPage / (this.curChapter.totalPage - 1)
			},
			...mapState(['userInfo']),
			rect() {
				return {					
					width: this.width,
					height: this.height
				}

			}
			
		},	
		// watch: {
		// 	    changeBackground: {    // 深度监听
		// 	        handler(newName, oldName) {
		// 	            console.log(newName)
		// 	        },
		// 	        immediate: true,
		// 	        deep: true
		// 	    }
		// 	},	
		methods: {
			_changeReaderSeting(){				
				this.readerSet.fontSize = this.fontSize,  //字体大小，
				this.readerSet.lineHeight = this.lineHeight //行高，注意是fontSize的倍数
				
			},
			changeMusicItem(){
					this.musicItem.highlight = this.highlight,
					this.musicItem.musicIndexDom = this.domIndex,
					this.musicItem.musicPlaying = this.musicPlaying				
			},
			openStart(e) {
				//记录位置
				this.clientlast = e.changedTouches[0];
			},
			openEnd(e) {					
				this.touchNum++
				if (this.touchNum == 0) {} else {
					if (this.touchNum > 1) {
						clearTimeout(this.touchTime)
						//单击事件
						this.touchTime = setTimeout(() => {
							this.touchNum = 0
						}, 250)
						console.log('双击')
						this.setShow = true
						// this.createAudio()
					} else {
						clearTimeout(this.touchTime)
						this.touchTime = setTimeout(() => {
							//双击或则多次点击事件
							this.touchNum = 0
						}, 250)
						//console.log('单击')
					}
				
				}
			},
			clickImg(item, index) {
				// 点击图片
				let imgarr = this.newchapterImgList.map(item => item)
				// console.log(imgarr, 'imgarr')
				this.imgsShow = false
				uni.previewImage({
					current: index,
					urls: imgarr
				})
			},
			clickSet(name) {
				// 点击图片	
				if (name == 0) {
					// 章节图片
					this.imgsShow = true
				} else if (name == 1) {
					// 目录
					//this.openDirectory()					
					this.directoryShowBefore = true
					this.directoryShow = true
					this.$nextTick(function() {
						console.log(4545,this.directoryShow)
						})
				} else if (name == 2) {
					// 听书
					this.listenHandle()
				}

				this.setShow = false
				// this.$refs.uToast.success(`点击了第${name}个`)			
				// console.log(name,'imgarr')

			},
			toRight() {
				this.nothingShow = true
			},
			showImgHandle() {
				this.imgsShow = true
			},
			bookMessage() {
				this.$http
					.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
					.then(res => {
						this.bookName = res.book.name,
						this.bookFengMian = res.book.images,
						this.detail.freeChapterCount = res.book.freeChapterCount,
						this.detail.isBuy = res.book.isBuy,
						this.detail.isVip =  res.book.isVip,
						this.detail.chapterNum = res.book.chapterNum // 阅读章节数
						//console.log('获取电子书详情', res)
					});


			},
			counlSystemInfo() {
				let that = this;
				uni.getSystemInfo({
					success: async function(res) {
						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
						let screenWidth = res.screenWidth;
						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
							.lineHeight)) //一屏总行 30为panding值
						console.log('一屏总行', that.NumCol)
						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
						await that.forGet(that.colSize - 1, that.NumCol)
					}
				})
			},
			mpcounlSystemInfo() {
				let that = this;
				uni.getSystemInfo({
					success: async function(res) {
						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
						let screenWidth = res.screenWidth;
						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
							.lineHeight)) - 1 //一屏总行 30为panding值
						console.log('一屏总行', that.NumCol)
						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
						await that.mpforGet(that.colSize - 1, that.NumCol)
					}
				})
			},
			nextmpcounlSystemInfo() {
				let that = this;
				uni.getSystemInfo({
					success: async function(res) {
						let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
						let screenWidth = res.screenWidth;
						that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
							.lineHeight)) - 1 //一屏总行 30为panding值
						console.log('一屏总行', that.NumCol)
						that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
						await that.nextmpforGet(that.colSize - 1, that.NumCol)
					}
				})
			},
			// 拆分数据
			forGet(colSize, NumCol) {
				let that = this
				let arr = [] //数组每一项代表一行	
				// console.log(copyBookText,'拆分前')
				let isbiaodian = false
				this.chapterImgList = []
				copyBookText.map((res, index) => {
					res.content = '' + res.content
					// console.log(res.picAndWord)
					if (res.content.length > colSize - 2) {
						//colSize - 2  段落首行空格
						// 判断是否下一行以标点开始
						let nextString = res.content.substr(colSize - 2, 1)
						let haveBiao = 0
						for (var i = 0; i < this.biaodian.length; i++) {
							if (nextString == this.biaodian[i]) {
								haveBiao = 1
							}
						}
						//console.log(haveBiao, nextString, 'isbiaodian')
						arr.push({
							'paragraph': index,
							'list': res.content.substr(0, colSize - 2 - haveBiao),
							'level': 0,
							class: 'jushou'
						})
						let text = res.content.substr(colSize - 2 - haveBiao)
						that.aginForget(text, arr, colSize, index)

					} else {
						arr.push({
							'paragraph': index,
							list: res.content.substr(0, colSize - 2),
							'level': 0,
							class: 'jushou'
						})
					}
					let picAndWord = res.otherContent
					// let reg = new RegExp('(?<=(img src="))[^"]*?(?=")/gi)')
					//let RegEx = /(?<=(img src="))[^"]*?(?=")/gims
					// let imgArr = picAndWord.match(reg)
					let imgArr = picAndWord
					// let imgArr = picAndWord.match(/src*?\/g)

					this.chapterImgList[index] = imgArr

				})
				// 过滤图片数据
				let arr3 = []
				this.chapterImgList.map((item, index) => {

					if (item != null && item != '') {
						// console.log(item,'item')
						arr3.push(item)
					}
				})
				this.newchapterImgList = arr3
				// console.log(this.newchapterImgList, 'newchapterImgList')
				copyBookText = arr
				// console.log(this.SimulationText,'SimulationText')
				this.getSizePage(NumCol)
			},
			mpforGet(colSize, NumCol) {
				let that = this
				let arr = [] //数组每一项代表一行	
				// console.log(copyBookText,'拆分前')
				let isbiaodian = false
				preText.map((res, index) => {
					res.content = '' + res.content
					if (res.content.length > colSize - 2) {
						// 判断是否下一行以标点开始
						let nextString = res.content.substr(colSize - 2, 1)
						let haveBiao = 0
						for (var i = 0; i < this.biaodian.length; i++) {
							if (nextString == this.biaodian[i]) {
								haveBiao = 1
							}
						}
						//console.log(haveBiao, nextString, 'isbiaodian')
						arr.push({
							'paragraph': index,
							'list': res.content.substr(0, colSize - 2 - haveBiao),
							'level': 0,
							class: 'jushou'
						})
						let text = res.content.substr(colSize - 2 - haveBiao)
						that.aginForget(text, arr, colSize, index)

					} else {
						arr.push({
							'paragraph': index,
							list: res.content.substr(0, colSize - 2),
							'level': 0,
							class: 'jushou'
						})
					}
				})
				preText = arr
				// console.log(copyBookText,'copyBookText')				
			},
			nextmpforGet(colSize, NumCol) {
				let that = this
				let arr = [] //数组每一项代表一行	
				// console.log(copyBookText,'拆分前')
				let isbiaodian = false
				nextText.map((res, index) => {
					res.content = '' + res.content
					if (res.content.length > colSize - 2) {
						// 判断是否下一行以标点开始
						let nextString = res.content.substr(colSize - 2, 1)
						let haveBiao = 0
						for (var i = 0; i < this.biaodian.length; i++) {
							if (nextString == this.biaodian[i]) {
								haveBiao = 1
							}
						}
						//console.log(haveBiao, nextString, 'isbiaodian')
						arr.push({
							'paragraph': index,
							'list': res.content.substr(0, colSize - 2 - haveBiao),
							'level': 0,
							class: 'jushou'
						})
						let text = res.content.substr(colSize - 2 - haveBiao)
						that.aginForget(text, arr, colSize, index)

					} else {
						arr.push({
							'paragraph': index,
							list: res.content.substr(0, colSize - 2),
							'level': 0,
							class: 'jushou'
						})
					}
				})
				nextText = arr
				// console.log(copyBookText,'copyBookText')
				// this.getSizePage(NumCol)
			},
			//获取后面的字符，再去计算能放几行
			aginForget(text, arr, colSize, index) {
				let that = this;
				let strBR = "</br>"
				if (text.length > colSize) {
					let nextString = text.substr(colSize, 1)
					let haveBiao = 0
					for (var i = 0; i < this.biaodian.length; i++) {
						if (nextString == this.biaodian[i]) {
							haveBiao = 1
						}
					}
					arr.push({
						'paragraph': index,
						'list': text.substr(0, colSize - haveBiao),
						'level': 0,
						class: ''
					})

					let newText = text.substr(colSize - haveBiao)
					that.aginForget(newText, arr, colSize, index)
				} else {
					arr.push({
						'paragraph': index,
						'list': text.substr(0, colSize),
						'level': 0,
						class: ''
					})
					// arr.push(strBR)					
				}
			},
			tmpforGet(colSize, NumCol) {
				let that = this
				let arr = [] //数组每一项代表一行	
				// console.log(copyBookText,'拆分前')
				let isbiaodian = false
				this.tmpChapter.text.map((res, index) => {
					res.content = '' + res.content
					if (res.content.length > colSize - 2) {
						// 判断是否下一行以标点开始
						let nextString = res.content.substr(colSize - 2, 1)
						let haveBiao = 0
						for (var i = 0; i < this.biaodian.length; i++) {
							if (nextString == this.biaodian[i]) {
								haveBiao = 1
							}
						}
						//console.log(haveBiao, nextString, 'isbiaodian')
						arr.push({
							'paragraph': index,
							'list': res.content.substr(0, colSize - 2 - haveBiao),
							'level': 0,
							class: 'jushou'
						})
						let text = res.content.substr(colSize - 2 - haveBiao)
						that.aginForget(text, arr, colSize, index)

					} else {
						arr.push({
							'paragraph': index,
							list: res.content.substr(0, colSize - 2),
							'level': 0,
							class: 'jushou'
						})
					}
				})
				this.tmpChapter.text = arr
				// console.log(copyBookText,'copyBookText')
				this.getSizePage(NumCol)
			},
			// 计算章节页数
			getSizePage(NumCol) {
				let that = this;
				let arr = [],
					newArr = []
				copyBookText = copyBookText.filter((item, index) => {

					if (item == '' || item == '  ' || item == '   ') {

					} else {
						return item
					}
				})
				for (let i = 0; i < copyBookText.length; i++) {
					newArr.push(copyBookText[i])
					if (newArr.length < NumCol) {

					} else {
						arr.push(newArr)
						newArr = []
					}
				}
				arr.push(newArr)
				copyBookText = arr // 每一页显示的内容				
				this.SimulationTextObj = { 
				SimulationText : arr,
				fontSize : this.fontSize,
				lineHeight : this.lineHeight,
				oldReadPage: 0,
				background:this.background
				}
				// this.hasSimulationText = true
				console.log(this.SimulationText, 'SimulationText')
			},

			setStorage() {
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					history = []
				}
				let have = false
				history.forEach((value) => {
					if (value.bookId === this.bookId) {
						have = true
						value.chapterIndex = this.curChapter.chapterIndex
						value.progress = this.progress
					}
				})
				console.log(history, '缓存')
				if (!have) {
					// 设备内没有当前的缓存数据时
					history.push({
						bookId: this.bookId,
						chapterIndex: this.curChapter.chapterIndex,
						progress: this.progress
					})
					//this.updateReadRateUl()   // 更新进度
				}				
					// 没有阅读过
					// 将进度存到数据库
					this.saveReadRateUl()
					console.log('执行save')
				
				// oldReadSpeed:{      // 本地初始阅读进度
				//    chapterIndex: null,
				// 	updateReadId: null  
				// },				
				if ((this.oldReadSpeed.precent / 10) < this.progress) {

					this.speedData.precent = this.progress
					this.speedData.bookId = this.bookId_mark;
					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
					//console.log('符合更新条件')
					// 阅读进度大于原进度时
					this.updateReadRateUl()
				}
				uni.setStorageSync('history', history)
			},

			/**
			 * 返回上一页面
			 **/
			back() {
				uni.navigateBack()
			},

			/**
			 * 获取设备信息
			 **/
			getSystemInfo() {
				const {
					windowWidth,
					windowHeight,
					statusBarHeight,
					platform,
					pixelRatio
				} = uni.getSystemInfoSync()
				//获取一些必要的设备参数
				this.statusBarHeight = statusBarHeight
				this.windowWidth = windowWidth
				this.windowHeight = windowHeight
				this.pixelRatio = pixelRatio
				this.platform = platform
				// #ifdef APP-PLUS
				// 全屏
				plus.navigator.setFullscreen(true)
				// 取消ios左滑返回
				let page = this.$mp.page.$getAppWebview()
				page.setStyle({
					popGesture: 'none'
				})

				if (this.platform === 'ios') {
					// 获取ios电量
					let UIDevice = plus.ios.import("UIDevice")
					let dev = UIDevice.currentDevice()
					if (!dev.isBatteryMonitoringEnabled()) {
						dev.setBatteryMonitoringEnabled(true)
					}
					setInterval(() => {
						this.batteryState = dev.batteryState()
						this.batteryLevel = dev.batteryLevel() * 100
					}, 1000)

				} else {
					// 获取安卓电量
					let main = plus.android.runtimeMainActivity();
					let Intent = plus.android.importClass('android.content.Intent');
					let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
						onReceive: (context, intent) => {
							let action = intent.getAction();
							if (action == Intent.ACTION_BATTERY_CHANGED) {
								this.batteryState = intent.getIntExtra("status", 0); //电池状态
								this.batteryLevel = intent.getIntExtra("level", 0); //电量
							}
						}
					});
					let IntentFilter = plus.android.importClass('android.content.IntentFilter');
					let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
					main.registerReceiver(recevier, filter);
				}

				// #endif
				// 设置时间
				let date = new Date();
				this.systemTime = Date.parse(date);
				this.systemTimeStr = dateToStr(this.systemTime);
				setInterval(() => {
					this.systemTime += 60000;
					this.systemTimeStr = dateToStr(this.systemTime);
				}, 60000)


				// 获取字体、排版等信息

				//可能缓存在前端可能从后端拿，如果是异步注意同步处理
				this.fontSize = uni.getStorageSync('fontSize')
				if (typeof this.fontSize !== 'number') {
					this.fontSize = 18
				}
				this.simplified = uni.getStorageSync('simplified')
				if (typeof this.simplified !== 'number') {
					this.simplified = 1
				}
				this.lineHeight = uni.getStorageSync('lineHeight')
				if (typeof this.lineHeight !== 'number') {
					this.lineHeight = 1.5
				}
				this.background = uni.getStorageSync('background')
				if (typeof this.background !== 'number') {
					this.background = 1
				}
				// this.readerSet.background = this.background
				
				this.turnType = uni.getStorageSync('turnType')
				if (this.turnType == 2) {
					this.isVertical = true;
				}
				if (this.turnType == 3) {
					this.isVerticalHua = true;
				}
				if (typeof this.turnType !== 'number') {
					this.turnType = 0
				}
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					history = []
				}
				history.forEach((value) => {
					if (value.bookId === this.bookId) {
						this.history = value
					}
				})
				this.$nextTick(()=>{
					this._changeReaderSeting()
				})
				/*****************************************/
				/*****************************************/
				/*****************************************/
				
			},

			/**
			 * 获取数据并计算页面
			 **/
			async initPage() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.cover.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				await this.calcHeight()
				await this.getDirectoryList()
				await this.getReadRateUl()

				if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
					this.history.chapterIndex = 0
				}
				await this.getThreeChapter(this.history.chapterIndex)
				// this.counlSystemInfo()
				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
				this.oldReadSpeed.readPage = page
				this.goToPage(page)
				this.SimulationTextObj.SimulationText = []
				this.SimulationTextObj = {
				SimulationText : copyBookText,
				fontSize : this.fontSize,
				lineHeight : this.lineHeight,
				oldReadPage: this.oldReadSpeed.readPage,
				background:this.background
				}
				uni.hideLoading()
				
			},

			/**
			 * 计算innerHeight，用于截取至整行
			 **/
			calcHeight() {
				if (this.contentHeight) {
					let lineHeight = this.fontSize * this.lineHeight;
					// #ifdef APP-PLUS || MP-WEIXIN
					lineHeight = Math.floor(lineHeight * this.pixelRatio) / this.pixelRatio
					// #endif
					let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize) / 2)) /
						lineHeight)
					this.innerHeight = lineNum * lineHeight
				} else {
					return new Promise((resolve, reject) => {
						this.$nextTick(() => {
							const query = uni.createSelectorQuery().in(this);
							query.select('#content').boundingClientRect(data => {
								let height = data.height;
								this.contentHeight = height;
								let lineHeight = this.fontSize * this.lineHeight;

								// #ifdef APP-PLUS || MP-WEIXIN
								lineHeight = Math.floor(lineHeight * this.pixelRatio) / this
									.pixelRatio
								// #endif
								let lineNum = Math.floor((height + Math.floor((lineHeight - this
									.fontSize) / 2)) / lineHeight)
								this.innerHeight = lineNum * lineHeight
								resolve()
							}).exec();
						})

					})
				}

			},

			/**
			 * 计算本章页数
			 **/
			calcCurChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#curChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP-WEIXIN
							height = Math.round(height * this.pixelRatio) / this.pixelRatio
							// #endif
							// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
							this.curChapter.totalPage = copyBookText.length
							this.curChapter.ready = true //章节准备完毕
							resolve()
						}).exec();
					}, 100)

				})
			},
			/**
			 * 顶部 计算上一章 （如果有）
			 **/
			scrolltoupper(e) {
				if (this.isAudioMenu == false && e.detail.direction == "top" && e.type == "scrolltoupper" && !this.down) {
					if (this.curChapter.chapterIndex > 0) {
						uni.showLoading({
							title: '请稍等...'
						})
						setTimeout(() => {
							this.getThreeChapter(this.curChapter.chapterIndex - 1)
							uni.hideLoading()
						}, 300)
					} else {
						uni.showToast({
							icon: 'none',
							title: '已经在最开头了'
						})
					}
				}
			},
			/**
			 * 底部 加载下一章 （如果有）
			 **/
			async scrolltolower(e) {
				if (e.detail.direction == "bottom" && e.type == "scrolltolower") {

					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
						uni.showLoading({
							title: '请稍等...'
						})
						setTimeout(() => {
							this.getThreeChapter(this.curChapter.chapterIndex + 1)
							this.scrollTop = 0
							uni.hideLoading()
							this.down = true
						}, 300)
						setTimeout(() => {
							this.clearDown()
						}, 500)
					} else {
						uni.showToast({
							icon: 'none',
							title: '已加载全部1'
						})
					}
				}
			},
			/**
			 * 还原 this.down
			 **/
			clearDown() {
				setTimeout(() => {
					this.down = false
				}, 300)
			},
			/**
			 * 听书事件
			 **/
			listenHandle() {
				// this.changeTurnType(2)
				const query = uni.createSelectorQuery().in(this);
				// console.log(query)
				query.selectAll('.book-inner').boundingClientRect(data => {
					// console.log('this.domList',this.domList);
					//console.log('data',data);					
					data = data.filter((item, index) => {
						return item.id == ""
					})
					if (this.domList.length > 0) {
						console.log('读取到数据，继续执行');
					} else {
						console.log('读取到的数据为空，进行赋值');
						this.domList = data;
						
					}
					this.getNowReadIndex()
					// this.$nextTick(()=>{
					// 	this.createAudio()
					// })					
				}).exec();
			},

			getNowReadIndex() {
				let progress = this.progress //记录阅读进度用于调整字体后跳转
				// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				let page = 0
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					page = 0
				} else {
					page = Math.floor((this.curChapter.totalPage - 1) * progress)
				}
				// console.log(this.curChapter.totalPage, 'curChapter')
				// 通过page 判断当前读到了哪里
				console.log(page, '当前页')

				let nowRead = copyBookText[page][0].list
				console.log(nowRead, '顶部第一句话')
				//let nowReadIndex = 0
				//console.log(page,'page')
				if (page == 0) {
					// return this.scrollTop = 0
					this.domIndex = 0
					this.createAudio()
					this.musicManuShow = false
					this.isAudioMenu = true					
				} else {
					
					this.verticalData.text.forEach((item, itemIndex) => {
						// console.log(copyBookText[page][0][0],'copyBookText')
						//console.log(item.content,'item')				
						if (item.content.indexOf(nowRead) != -1) {
							// 找到了
							console.log(item.number, '找到了')							
							this.domIndex = itemIndex
							this.createAudio()
							this.musicManuShow = false
							this.isAudioMenu = true							
							return
						}
					})
					
				}
			},

			// 创建音频
			createAudio() {
				console.log('读到的位置', this.domIndex);
				this.music = uni.createInnerAudioContext()
				this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
				// console.log(this.music.src,'this.music.src')				
				// console.log(this.verticalData.text, '文本')
				// 找到符合条件的dom
				console.log('domList', this.domList)
				// 给对应dom高亮				
				this.highlight = this.domIndex
				this.fhighlight = true
				console.log('highlight', this.highlight);
				console.log('domIndex', this.domIndex);
				// 判断是否有src
				if (this.music.src != null) {
					setTimeout(() => {
						this.music.play(); //执行播放
						this.musicPlaying = true
						this.musicItem.musicPlaying = true
						this.changeMusicItem()
					}, 150)
				}else{
					console.log('没找到')
					// 没有音频
						uni.showToast({
							title: '未找到音频',
							icon: 'none',
							duration: 2000
						})
						this.offAudio()				
					
				}
				// 音频播放结束
				this.music.onEnded(() => {
					this.musicPlaying = false
					if (this.domIndex == this.verticalData.text.length - 1) {
						console.log('全部音频播放完毕');
						// this.musicPlaying = false
						// this.musicItem.musicPlaying = false
						// this.musicManuShow = true
						//this.isAudioMenu = true		
						this.offAudio()
					} else {
						console.log('音频播放结束2');
						console.log(this.domIndex,'------------')
						this.addDomIndex()
						
					}					
				});
			},
			// 加载下一条音频
			addDomIndex() {
				
				this.domIndex += 1
				console.log(this.domIndex, '下一条domIndex')	
				
				// setTimeout(() => {
				// console.log(this.curPage.text, '最大值')					
					this.createAudio()	
					
					let paragraphindex = 0					
					this.curPage.text.map((item, index) => {
						if (index == this.curPage.text.length - 1) { 
							paragraphindex = item.paragraph
							return
						}
					})
					//return 
					if (this.domIndex > this.curPage.text[this.curPage.text.length - 1].paragraph) { // 是否跨页 是的话就翻页
						
						console.log(this.currentPage,'this.currentPage')
						this.musicItem ={
							page:this.currentPage + 1,
							musicIndexDom: this.domIndex,
							musicPlaying:true
						}
						this.goNextPage()
						
					}
				// },5000)
				

			},
			// 暂停事件
			audioPause() {
				this.isPause = !this.isPause
				if (this.isPause) {
					this.music.pause()					
					this.musicPlaying = false
					this.musicItem.musicPlaying = false
				} else {
					this.music.play()
					this.musicPlaying = true
					this.musicItem.musicPlaying = true
				}
			},
			//  关闭听书
			offAudio() {
				this.music.stop();
				// this.domIndex = 0;
				this.highlight = "null";
				this.fhighlight = false
				this.isAudioMenu = false;
				this.isPause = false;
				this.music = null;
				this.musicPlaying = false
				this.changeMusicItem()
			},

			/**
			 * 计算上一章页数,并翻页（如果有）
			 **/
			calcPreChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#preChapter').boundingClientRect(data => {
							let height = data.height;
							// let height = copyBookText.height;
							// #ifdef APP-PLUS || MP-WEIXIN
							height = Math.round(height * this.pixelRatio) / this.pixelRatio
							// #endif						
							// this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1
							this.preChapter.totalPage = this.preChapterTotal
							this.preChapter.ready = true //章节准备完毕
							if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
								uni.hideLoading() //把loading关掉
								this.waitForPre = false;
								//页面准备完毕
								this.goPrePage()
							}
							if (this.waitForPreChapter) {
								uni.hideLoading()
								this.waitForPreChapter = false
								this.goPreChapter()
							}
							resolve()
						}).exec();

					}, 100)

				})

			},

			/**
			 * 计算下一章页数,并翻页（如果有）
			 **/
			calcNextChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#nextChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP-WEIXIN
							height = Math.round(height * this.pixelRatio) / this.pixelRatio
							// #endif
							//this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
							this.nextChapter.totalPage = this.nextChapterTotal
							this.nextChapter.ready = true //章节准备完毕
							if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
								uni.hideLoading() //把loading关掉
								this.waitForNext = false;
								//页面准备完毕
								this.goNextPage()
							}
							if (this.waitForNextChapter) {
								uni.hideLoading()
								this.waitForNextChapter = false
								this.goNextChapter()
							}
							resolve()
						}).exec();
					}, 100)

				})

			},

			/**
			 * 触摸开始
			 **/
			touchStart(e) {
				this.showAnimation = false
				this.isTouch = true
				this.touchX = e.touches[0].clientX;
				this.touchStartX = e.touches[0].clientX;
				this.touchY = e.touches[0].clientY;
				this.touchStartY = e.touches[0].clientY;
				// console.log(touchStartY, '触摸开始')

				if (this.turnType === 0) {
					// this.$refs.pageBackRef.$el.style.transition = 'unset'
					// this.$refs.pageBackRef.$el.style.right = 0
					// this.$refs.pageBackRef.$el.style.width = 0
					this.pageBackRef.transition = 'unset'
					this.pageBackRef.right = 0
					this.pageBackRef.left = 0
					this.pageBackRef.width = 0
					this.pageBackRef.before = true
				}
			},

			/**
			 * 触摸
			 **/
			touchMove(e) {
				this.showShadow = true;
				let delta = 0

				if (this.turnType === 0 || this.turnType === 1) { // 翻页方式为‘覆盖’ 或 ‘左右平移’
					delta = e.touches[0].clientX - this.touchStartX;

					this.pageBackRef.before = delta > 0 ? true : false
					if (this.turnType === 0 && !this.pageBackRef.before) {
						// this.$refs.pageBackRef.$el.style.right = `${-delta}px`
						// this.$refs.pageBackRef.$el.style.width = `${-delta * 0.5}px`
						this.pageBackRef.right = `${-delta}px`
						this.pageBackRef.width = `${-delta * 0.5}px`
					} else if (this.turnType === 0 && this.pageBackRef.before) {
						this.pageBackRef.left = `${delta}px`
						this.pageBackRef.width = `${-delta * 0.5}px`
					}
					if (delta > this.windowWidth) {
						delta = this.windowWidth
					}
					if (delta < -this.windowWidth) {
						delta = -this.windowWidth
					}


					this.delta = e.touches[0].clientX - this.touchX;
					this.touchX = e.touches[0].clientX;

				} else { //翻页方式为‘上下平移’
					delta = e.touches[0].clientY - this.touchStartY;

					// 限制边界
					if (delta > this.windowHeight) {
						delta = this.windowHeight
					}
					if (delta < -this.windowHeight) {
						delta = -this.windowHeight
					}

					this.delta = e.touches[0].clientY - this.touchY;
					this.touchY = e.touches[0].clientY;
					// console.log(this.delta, 'delta')					
				}
				if (this.next && this.nextPage.ready) { //首次翻下一页之后
					if (this.nextPage.isEnd) {
						return
					}
					// 限制边界
					if (delta > 0) {
						delta = 0
					}

					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth+delta}px,0)`,
						`(0,${-this.windowHeight+delta}px)`
					]

					this.curPage.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`
					]

					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth+delta}px,0)`,
						`(0,${this.windowHeight+delta}px)`
					]
				}
				if (!this.pre && !this.next && delta < 0) { //首次翻下一页
					this.next = true
					if (this.nextPage.ready) { //页面准备好了
						if (this.nextPage.isEnd) {

							uni.showToast({
								title: '跳转推荐页',
								icon: 'none'
							})
							/*****************************************/
							/*****************************************/
							/*****************************************/


						} else {
							this.prePage.pageTranslate = [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(${delta}px,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]

							this.nextPage.pageTranslate = [
								`(0,0)`,
								`(${this.windowWidth+delta}px,0)`,
								`(0,${this.windowHeight+delta}px)`
							]
						}
					} else if (this.nextChapter.ready) { //下一章已经准备好了
						this.nextPage = {
							ready: this.nextChapter.ready,
							chapterName: this.nextChapter.chapterName,
							text: copyBookText,
							pageNum: 0,
							totalPage: this.nextChapter.totalPage,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							],
							canRead: this.nextChapter.canRead
						}
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(${delta}px,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]

						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				if (this.pre && this.prePage.ready) { //首次翻上一页之后

					// 限制边界
					if (delta < 0) {
						delta = 0
					}

					if (this.prePage.isCover) { //上一页是封面
						this.cover.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]

					} else {
						this.prePage.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]

						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				if (!this.prePage.isCover) {

					if (!this.pre && !this.next && delta > 0) { //首次翻上一页
						this.pre = true
						if (this.prePage.ready) { //页面准备好了
							if (this.prePage.isCover) { //上一页是封面
								this.cover.pageTranslate = [
									`(${-this.windowWidth+delta}px,0)`,
									`(${-this.windowWidth+delta}px,0)`,
									`(0,${-this.windowHeight+delta}px)`
								]
								this.curPage.pageTranslate = [
									`(0,0)`,
									`(${delta}px,0)`,
									`(0,${delta}px)`
								]

							} else {
								this.prePage.pageTranslate = [
									`(${-this.windowWidth+delta}px,0)`,
									`(${-this.windowWidth+delta}px,0)`,
									`(0,${-this.windowHeight+delta}px)`
								]
								this.curPage.pageTranslate = [
									`(0,0)`,
									`(${delta}px,0)`,
									`(0,${delta}px)`
								]

								this.nextPage.pageTranslate = [
									`(0,0)`,
									`(${this.windowWidth+delta}px,0)`,
									`(0,${this.windowHeight+delta}px)`
								]
							}
						} else if (this.preChapter.ready) { //上一章已经准备好了							
							this.prePage = {
								ready: this.preChapter.ready,
								chapterName: this.preChapter.chapterName,
								text: copyBookText,
								pageNum: this.preChapter.totalPage - 1,
								totalPage: this.preChapter.totalPage,
								pageTranslate: [
									`(${-this.windowWidth}px,0)`,
									`(${-this.windowWidth}px,0)`,
									`(0,${-this.windowHeight}px)`
								],
								canRead: this.preChapter.canRead
							}
							this.prePage.pageTranslate = [
								`(${-this.windowWidth+delta}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(0,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]

							this.nextPage.pageTranslate = [
								`(0,0)`,
								`(${this.windowWidth+delta}px,0)`,
								`(0,${this.windowHeight+delta}px)`,
							]
						}
					}
				}


			},

			/**
			 * 触摸结束
			 **/
			touchEnd(e) {
				console.log(e, 'e')
				this.isTouch = false
				this.showAnimation = true
				this.showShadow = false
				let delta = 0
				let that = this
				if (this.turnType === 0 || this.turnType === 1) {
					delta = e.changedTouches[0].clientX - this.touchStartX;
				} else {
					delta = e.changedTouches[0].clientY - this.touchStartY;
					this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
					console.log(this.page, 'page')
					//this.getNowReadIndex()
				}

				if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
					if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
						if (!this.prePage.isCover) {
							this.goPrePage()
						}
					} else if (e.changedTouches[0].clientX > this.windowWidth / 3 * 2) { //点击屏幕右1/3为下一页
						//if(e.changedTouches[0].clientY > 100){ // 显示弹窗
						e.changedTouches[0].clientY > 100 ? this.goNextPage() : ''
						//}
					} else if (e.changedTouches[0].clientX <= this.windowWidth / 3 * 2 && e.changedTouches[0].clientX >=
						this
						.windowWidth / 3) { //点击屏幕中间1/3为呼出菜单
						this.showMenu()
					}
				} else {
					if (this.next && this.delta <= 0) { //下一页
						this.goNextPage()
					} else if (this.next && this.delta > 0) { //取消翻页
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]

						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]

						if (this.turnType == 0) {
							this.pageBackRef.transition = 'right .5s ease'
							this.pageBackRef.right = 0
							this.pageBackRef.width = 0
						}
					} else if (this.pre && this.delta >= 0) { //上一页
						this.goPrePage()
					} else if (this.pre && this.delta < 0) { //取消翻页
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]

						if (this.turnType == 0) {
							this.pageBackRef.transition = 'left .5s ease'
							this.pageBackRef.left = 0
							this.pageBackRef.width = 0
						}
					}
				}
				this.next = false
				this.pre = false
				// setTimeout(()=>{
				// 	this.pageBackRef.width = '0px'
				// },450)
			},

			/**
			 * 取消触摸
			 **/
			touchcancel() {

				//取消翻页,重置页面
				this.showAnimation = false
				this.showShadow = false
				this.prePage.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.curPage.pageTranslate = [
					`(0,0)`,
					`(0,0)`,
					`(0,0)`
				]
				this.nextPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				this.cover.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.next = false
				this.pre = false

			},

			/**
			 * 呼出菜单
			 **/
			showMenu() {
				// #ifdef APP-PLUS
				plus.navigator.setFullscreen(false);
				// #endif
				this.menuShow = true;
				if (this.music == null && !this.isVerticalHua) {
					this.musicManuShow = true;
				} else {
					this.musicManuShow = false;
				}
				setTimeout(() => {
					this.itemShow = true
				}, 100)
			},

			/**
			 * 关闭菜单
			 **/
			closeMenu() {
				// #ifdef APP-PLUS
				plus.navigator.setFullscreen(true);
				// #endif
				this.itemShow = false
				this.settingShow = false
				this.directoryShow = false
				setTimeout(() => {
					this.directoryShowBefore = false
					this.menuShow = false
					this.musicManuShow = false;
				}, 300)
			},

			/**
			 * 关闭菜单栏，呼出设置栏
			 **/
			openSetting() {

				this.itemShow = false
				setTimeout(() => {
					this.settingShow = true
				}, 300)
			},

			/**
			 * 关闭菜单栏，呼出目录栏
			 **/
			openDirectory() {
				// #ifdef APP-PLUS
				plus.navigator.setFullscreen(true);
				// #endif
				this.itemShow = false
				this.directoryShowBefore = true
				setTimeout(() => {
					this.directoryShow = true
					console.log(this.directoryShow)
				}, 300)
				
			},

			/**
			 * 拖动进度条
			 **/
			slideChanging(e) {
				this.progressTouched = true
				this.chapterProgress = e.detail.value
			},

			/**
			 * 结束拖动进度条
			 **/
			async slideChange(e) {

				this.chapterProgress = e.detail.value
				uni.showLoading({
					title: '加载中'
				})
				await this.getThreeChapter(e.detail.value)
				this.counlSystemInfo()
				this.progressTouched = false
				this.goToPage(0)
				uni.hideLoading()

			},

			/**
			 * 上一页,页面轮换
			 **/
			goPrePage() {
				if (this.prePage.isCover) { //如果是首页
					this.cover.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
					return
				}
				if (!this.prePage.ready && !this.preChapter.ready) {
					this.waitForPre = true
					uni.showLoading({
						title: '正在准备上一章',
						mask: true
					})
					return
				}
				let showChapter = false
				this.currentPage -= 1
				if (this.currentPage === -1) { //翻至上一章了
					showChapter = true
					this.currentPage = this.preChapter.totalPage - 1
					this.chapterRotate('pre')
				}
				console.log(copyBookText, 'goPrePage////////////////////////////////')
				let cur = [].concat(this.curPage.pageTranslate)
				let pre = [].concat(this.prePage.pageTranslate)
				this.goToPage(this.currentPage)
				//  当前scrollTop的值
				//、 this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
				// console.log(this.scrollTop,'翻页后的scrollTop')
				// this.getDomIndex()

				this.prePage.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.curPage.pageTranslate = pre
				this.nextPage.pageTranslate = cur
				if (this.turnType === 0) {

					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
					// this.$refs.pageBackRef.$el.style.width = `100px`
					this.pageBackRef.before = true
					this.pageBackRef.transition = 'left .5s ease'
					this.pageBackRef.left = `${this.windowWidth}px`
					this.pageBackRef.right = 0
					this.pageBackRef.width = `100px`
				}

				setTimeout(() => {
					if (showChapter) {
						uni.showToast({
							title: this.curChapter.chapterName,
							icon: 'none'
						})
					}
					this.showAnimation = true
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth}px,0)`,
						`(0,${-this.windowHeight}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
				}, 50)
			},


			/**
			 * 下一页,页面轮换
			 **/
			goNextPage() {
				if (this.nextPage.isEnd) { //如果翻至本书末尾
					alery('到头了')
					uni.showToast({
						title: '跳转推荐页',
						icon: 'none'
					})
					/*****************************************/
					/*****************************************/
					/*****************************************/
					return
				}
				// if (!this.nextPage.ready && !this.nextChapter.ready) {
				// 	this.waitForNext = true
				// 	uni.showLoading({
				// 		title: '正在准备下一章',
				// 		mask: true
				// 	})
				// 	return
				// }
				this.currentPage += 1
				let showChapter = false
				console.log(this.currentPage, this.curChapter.totalPage)
				if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
					return 
					showChapter = true
					this.currentPage = 0
					this.chapterRotate('next')
					this.speedData.bookId = this.bookId_mark;
					this.speedData.chapter_id = this.directoryList[this.curChapter.chapterIndex].id;
					this.speedData.chapter_name = this.directoryList[this.curChapter.chapterIndex].name;
					this.speedData.precent = this.curChapter.chapterIndex;
					this.speedData.content_id = this.directoryList[this.curChapter.chapterIndex].chapterId;
					if (this.speedTrue) {
						this.updateReadRateUl()
					} else {
						this.saveReadRateUl()
					}

				}
				let cur = [].concat(this.curPage.pageTranslate)
				let next = [].concat(this.nextPage.pageTranslate)				
				this.goToPage(this.currentPage)
				//  当前scrollTop的值
				// this.scrollTop = Number(this.currentPage * (this.windowHeight - 100 ))
				// console.log(this.scrollTop,'翻页后的scrollTop')

				this.prePage.pageTranslate = cur
				this.curPage.pageTranslate = next
				this.nextPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]

				if (this.turnType === 0) {
					// this.$refs.pageBackRef.$el.style.transition = 'right .5s ease .15s'
					// this.$refs.pageBackRef.$el.style.right = `${this.windowWidth}px`
					// this.$refs.pageBackRef.$el.style.width = `100px`
					this.pageBackRef.before = false
					this.pageBackRef.transition = 'right .5s ease .15s'
					this.pageBackRef.right = `${this.windowWidth}px`
					this.pageBackRef.left = 0
					this.pageBackRef.width = `100px`
				}
				setTimeout(() => {
					if (showChapter) {
						uni.showToast({
							title: this.curChapter.chapterName,
							icon: 'none'
						})
					}
					this.showAnimation = false // 关闭动画
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth}px,0)`,
						`(0,${-this.windowHeight}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]

				}, 100)
			},

			/**
			 * 章节轮换
			 **/
			async chapterRotate(type) {
				/*
					1:在切换上下章时调用请求数据方
					2:调用截取数据方法 this.counlSystemInfo()
				*/
				if (type === 'next') {
					this.preChapter = Object.assign({}, this.curChapter)
					this.curChapter = Object.assign({}, this.nextChapter)
					console.log(this.curChapter.chapterIndex, 'chapterIndex')
					copyBookText = this.curChapter.text;

					this.counlSystemInfo()
					console.log(copyBookText, 1111111111)
					if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
						this.nextChapter = {
							ready: false,
							chapterIndex: this.curChapter.chapterIndex + 1,
							chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
						}
						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
						this.$set(this.nextChapter, 'text', this.tmpChapter.text)
						this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
						this.calcNextChapter()
					} else {
						this.nextChapter = {
							ready: true,
							isEnd: true
						}
					}
					this.getThreeChapter(this.curChapter.chapterIndex)

				}
				if (type === 'pre') {
					this.nextChapter = Object.assign({}, this.curChapter)
					this.curChapter = Object.assign({}, this.preChapter)
					copyBookText = this.curChapter.text;
					this.counlSystemInfo()
					console.log(copyBookText, '跳转到上一章')
					// this.preChapter.text = 
					if (this.curChapter.chapterIndex !== 0) {
						this.preChapter = {
							ready: false,
							chapterIndex: this.curChapter.chapterIndex - 1,
							chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
						}
						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
						this.$set(this.preChapter, 'text', this.tmpChapter.text)
						this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
						this.calcPreChapter()
					} else {
						this.preChapter = {
							ready: true,
							isCover: true
						}

					}
					this.getThreeChapter(this.curChapter.chapterIndex)
				}
			},


			/**
			 * 跳转下一章
			 **/
			goNextChapter() {
				if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
					uni.showToast({
						title: '已经是最后一章了',
						icon: 'none'
					})
					return
				}
				if (this.waitForNext || this.waitForPre) {
					return
				}

				if (this.isVertical) {
					if (this.curChapter.chapterIndex < (this.directoryList.length - 1)) {
						uni.showLoading({
							title: '请稍等...'
						})
						setTimeout(() => {
							this.getThreeChapter(this.curChapter.chapterIndex + 1)
							// this.SimulationTextObj = {
							// SimulationText : copyBookText,
							// fontSize : this.fontSize,
							// lineHeight : this.lineHeight,
							// oldReadPage: 0
							// // background:this.background
							// }
							uni.hideLoading()
							this.down = true
							this.clearDown()
						}, 300)
						
					} else {
						uni.showToast({
							icon: 'none',
							title: '已加载全部'
						})
					}
				} else {
					if (this.nextChapter.ready) {
						this.chapterRotate('next')
						this.goToPage(0)
					} else {
						uni.showLoading({
							title: '正在准备下一章'
						})
						this.waitForNextChapter = true
					}

				}

			},

			/**
			 * 跳转上一章
			 **/
			goPreChapter(page) {
				if (this.curChapter.chapterIndex === 0) {
					uni.showToast({
						title: '这是第一章',
						icon: 'none'
					})
					return
				}
				if (this.isVertical) {
					if (this.curChapter.chapterIndex > 0) {
						uni.showLoading({
							title: '请稍等...'
						})
						setTimeout(() => {
							this.getThreeChapter(this.curChapter.chapterIndex - 1)
							// this.counlSystemInfo()
							console.log(copyBookText, '翻页后//////////////')
							uni.hideLoading()
						}, 300)
					} else {
						uni.showToast({
							icon: 'none',
							title: '已经在最开头了'
						})
					}
				} else {
					if (this.waitForNext || this.waitForPre) {
						return
					}
					if (this.preChapter.ready) {
						this.chapterRotate('pre')
						this.goToPage(0)

					} else {
						uni.showLoading({
							title: '正在准备上一章'
						})
						this.waitForPreChapter = true
					}
				}
			},


			/**
			 * 根据页码跳转
			 **/
			goToPage(page) {
				this.currentPage = page
				this.showAnimation = false
				console.log(page, '======>')				
				// console.log(copyBookText[page],'当前页')
				this.$nextTick(function() {
					this.curPage = {
						ready: this.curChapter.ready,
						chapterName: this.curChapter.chapterName,
						text: copyBookText[page],
						pageNum: this.currentPage,
						totalPage: this.curChapter.totalPage,
						pageTranslate: [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						],
						canRead: this.curChapter.canRead
					}
				})
				// console.log(copyBookText[page][0],'顶部第一句话')
				// let nowRead = copyBookText[page][0]
				// let nowReadIndex = 0-----------------------
				// this.domIndex = nowReadIndex
				this.setStorage() // 设置缓存
				if (this.currentPage === 0) {
					if (this.preChapter.ready && this.preChapter.isCover) { //翻至封面了
						this.prePage = {
							ready: true,
							isCover: true,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							]
						}
					} else {
						this.prePage = {
							ready: this.preChapter.ready,
							chapterName: this.preChapter.chapterName,
							// text: this.preChapter.text,
							text: this.preChapter.text.map(function(obj, index) {
								return obj.picAndWord
							}),
							pageNum: this.preChapter.totalPage - 1,
							totalPage: this.preChapter.totalPage,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							],
							canRead: this.preChapter.canRead
						}
					}
				} else {
					this.prePage = {
						ready: true,
						chapterName: this.curChapter.chapterName,
						text: copyBookText[page - 1],
						pageNum: this.currentPage - 1,
						totalPage: this.curChapter.totalPage,
						pageTranslate: [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						],
						canRead: this.curChapter.canRead
					}
				}
				if (this.currentPage > this.curChapter.totalPage - 1) {
					if (this.nextChapter.ready && this.nextChapter.isEnd) { //翻至最后一章了
						this.nextPage = {
							ready: true,
							isEnd: true,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							]
						}
					} else {
						this.nextPage = {
							ready: this.nextChapter.ready,
							chapterName: this.nextChapter.chapterName,
							text: this.nextChapter.text.map(function(obj, index) {
								return obj.picAndWord
							}),
							pageNum: 0,
							totalPage: this.nextChapter.totalPage,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							],
							canRead: this.nextChapter.canRead
						}
					}

				} else {
					this.nextPage = {
						ready: true,
						chapterName: this.curChapter.chapterName,
						text: copyBookText[page + 1],
						pageNum: this.currentPage + 1,
						totalPage: this.curChapter.totalPage,
						pageTranslate: [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						],
						canRead: this.curChapter.canRead
					}

					console.log(this.domIndex, 'domIndex')

				}
			},


			/**
			 * 跳转到指定章节
			 **/
			async goToChapter(index) {
				this.progressTouched = false
				this.closeMenu()
				uni.showLoading({
					title: '加载中'
				})
				await this.getThreeChapter(index.id)
				//this.SimulationTextObj.SimulationText = []
				this.SimulationTextObj = {
				SimulationText : copyBookText,
				fontSize : this.fontSize,
				lineHeight : this.lineHeight,
				oldReadPage: 0,
				background:this.background
				}
				//this.counlSystemInfo()
				this.goToPage(0)
				this.scrollTop = 0
				// this.domIndex = 1
				uni.hideLoading()
				// setTimeout(() => {
				// 	this.$router.go(0)
				// }, 500)
			},

			/**
			 * 加大字体
			 **/
			async bigSize() {
				let progress = this.progress //记录阅读进度用于调整字体后跳转
				this.fontSize += 2
				uni.setStorageSync('fontSize', this.fontSize)
				this.calcHeight()
				copyBookText = this.curChapter.text;				
				this.counlSystemInfo()
				await this.calcCurChapter()				
				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				this.readerSet = {
					fontSize : this.fontSize,
					page : page
				}
				this.oldReadSpeed.readPage = page
				this.goToPage(page)
				if (this.preChapter.ready && !this.preChapter.isCover) {
					this.preChapter.ready = false
					await this.calcPreChapter()
				}
				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
					this.nextChapter.ready = false
					await this.calcNextChapter()
				}				
			},

			/**
			 * 缩小字体
			 **/
			async smallSize() {
				let progress = this.progress
				this.fontSize -= 2
				uni.setStorageSync('fontSize', this.fontSize)
				this.calcHeight()
				copyBookText = this.curChapter.text;				
				this.counlSystemInfo()
				await this.calcCurChapter()
				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				this.readerSet = {
					fontSize : this.fontSize,
					page : page
				}
				this.oldReadSpeed.readPage = page
				this.goToPage(page)
				if (this.preChapter.ready && !this.preChapter.isCover) {
					this.preChapter.ready = false
					await this.calcPreChapter()
				}
				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
					this.nextChapter.ready = false
					await this.calcNextChapter()
				}
				
			},

			/**
			 * 改变行距
			 **/
			async changeLineHeight(lineHeight) {
				let progress = this.progress
				if (lineHeight === this.lineHeight) {
					return
				} else {
					this.lineHeight = lineHeight;
					uni.showToast({
						title:lineHeight,
						duration:2000
					})
					uni.setStorageSync('lineHeight', this.lineHeight)
					this.calcHeight()
					copyBookText = this.curChapter.text;					
					this.counlSystemInfo()
					await this.calcCurChapter()
					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
					this.readerSet = {
						lineHeight : this.lineHeight,
						page : page
					}
					this.oldReadSpeed.readPage = page
					this.goToPage(page)
					if (this.preChapter.ready && !this.preChapter.isCover) {
						this.preChapter.ready = false
						await this.calcPreChapter()
					}
					if (this.nextChapter.ready && !this.nextChapter.isEnd) {
						this.nextChapter.ready = false
						await this.calcNextChapter()
					}
				}
				
			},


			/**
			 * 改变翻页方式
			 **/
			changeTurnType(turnType) {
				if (turnType === this.turnType) {
					return
				} else {
					this.showAnimation = false
					this.turnType = turnType;
					uni.setStorageSync('turnType', this.turnType)
				}
				if (turnType == 4) {
					// 逼真翻页方式
					this.isSimulation = true
				} else {
					this.isSimulation = false
				}
				if (turnType == 3) {
					this.isVerticalHua = true
					// 如果正在播放音频 则暂停掉
					if (this.musicPlaying) {
						//console.log('正在播放音频')
						this.music.pause()
						this.highlight = "null";
						this.isAudioMenu = false

					}
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '当前阅读模式下，无听书功能，如想体验听书功能，请切换其他模式，并且阅读进度与其他模式不共享。',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					})
				} else {
					this.isVerticalHua = false
				}
			},

			/**
			 * 改变背景
			 **/
			changeBackground(background) {
				if (background === this.background) {
					return
				} else {
					
					this.background = background;
					uni.setStorageSync('background', this.background)
					// this.readerSet.background = background  // 修改阅读器背景
					this.SimulationTextObj.background = this.background
					this.SimulationTextObj.oldReadPage = this.curPage.pageNum			
					console.log('改变页面背景',this.curPage.pageNum)
					// this.SimulationTextObj = {
					// 	SimulationText : this.SimulationTextObj.SimulationText,
					// 	fontSize : this.SimulationText.fontSize,
					// 	lineHeight : this.SimulationText.lineHeight,
					// 	background: this.background,
					// 	page: this.oldReadSpeed.readPage
					// }				
				}
			},

			/**
			 * 获取目录
			 **/
			getDirectoryList(showLoading) {

				if (showLoading) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				return this.$http
					.post('book/book/getBookCatalogue', {
						'bookid': this.bookId_mark
					})
					.then(res => {
						let vipnum = 0
						if (this.detail.isBuy == 1) {
							vipnum = 1
						}
						for (let i in res.bookCatalogue) {
							this.directoryList.push({
								"id": i,
								"chapterId": res.bookCatalogue[i].chapterId,
								"name": res.bookCatalogue[i].chapterName,
							})
						}
					})
					.catch(() => {
						// 此处是网络连接失败的逻辑
						uni.hideLoading()
						return new Promise((resolve, reject) => {
							uni.showModal({
								title: '连接失败',
								content: '请检查您的网络状态',
								confirmText: '重试',
								success: async (res) => {
									if (res.confirm) {
										//用户点击了重试
										await this.getDirectoryList(true)
										resolve()
									} else if (res.cancel) {
										//用户点击取消
										this.back()
									}
								}
							})
						})
					})

				// /*****************************************/
				// /*****************************************/
				// /*****************************************/
			},


			/**
			 * 获取一章数据
			 **/
			getOneChapter(chapterId, showLoading) {
				if (showLoading) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				// 检查是否已经购买	
				// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0	
						// book/bookchaptercontent/appBooksChapterContent?bookid=89&id=4039&userId=10176
				return this.$http
					.post('book/bookchaptercontent/appBooksChapterContent', {
						'userId': this.userInfo.id,
						'bookid': this.bookId_mark,
						'chapterid': chapterId
					})
					.then(res => {						
						this.tmpChapter.text = res.bookCatalogue
						// console.log(this.tmpChapter.text,'tmpChapter')
						
					})
					.catch(() => {						
						// 此处是网络连接失败的逻辑						
						uni.hideLoading()						
						return new Promise((resolve, reject) => {
							uni.showModal({
								title: '连接失败',
								content: '请检查您的网络状态',
								confirmText: '重试',
								success: async (res) => {
									if (res.confirm) {
										//用户点击了重试
										await this.getOneChapter(chapterId, true)
										resolve()
									} else if (res.cancel) {
										//用户点击取消
										this.back()
									}
								}
							})
						})						
					})				
				/*****************************************/
				/*****************************************/
				/*****************************************/
			},


			/**
			 * 获取三章数据
			 **/
			async getThreeChapter(index) {
				await this.getOneChapter(this.directoryList[Number(index)].chapterId)
				this.curChapter = {
					chapterIndex: Number(index),
					chapterName: this.directoryList[Number(index)].name,
					text: this.tmpChapter.text,
					canRead: this.tmpChapter.canRead
				}
				this.verticalData = {
					chapterIndex: Number(index),
					chapterName: this.directoryList[Number(index)].name,
					text: this.tmpChapter.text,
					canRead: this.tmpChapter.canRead
				}
				copyBookText = this.curChapter.text;
				this.counlSystemInfo()
				this.domIndex = 0;
				if (this.curChapter.chapterIndex !== 0) {
					await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
					//this.mpcounlSystemInfo
					this.preChapter = {
						chapterIndex: Number(index) - 1,
						chapterName: this.directoryList[Number(index) - 1].name,
						text: this.tmpChapter.text,
						canRead: this.tmpChapter.canRead
					}
					preText = this.tmpChapter.text
					this.mpcounlSystemInfo()
					this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1
					// console.log(this.preChapterTotal,'上一章内容页数')			
					// 处理数据

					// 
				} else {
					this.preChapter = {
						ready: true,
						isCover: true
					}
				}

				if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {

					await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
					this.nextChapter = {
						chapterIndex: Number(index) + 1,
						chapterName: this.directoryList[Number(index) + 1].name,
						text: this.tmpChapter.text,
						canRead: this.tmpChapter.canRead
					}
					nextText = this.tmpChapter.text
					this.nextmpcounlSystemInfo()
					this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1
					// console.log(this.nextChapterTotal,'下一章内容页数')
				} else {
					this.nextChapter = {
						ready: true,
						isEnd: true
					}
				}
				await this.calcCurChapter()
				await this.calcPreChapter()
				await this.calcNextChapter()
			},
			/*
			获取进度
			*/
			getReadRateUl() {
				let data = {
					bookId: this.bookId_mark,
					userId: this.userInfo.id,
				}

				$http.request({
					url: "book/bookreadrate/getReadRate",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log("获取", res)
					if (res.readRate === null) {
						this.speedTrue = false
					} else {
						this.speedTrue = true;
						this.curChapter.chapterIndex = res.readRate.chapterId
						this.updateReadId = res.readRate.id
						this.oldReadSpeed.precent = res.readRate.precent
						this.oldReadSpeed.updateReadId = res.readRate.id						
						this.getThreeChapter(this.curChapter.chapterIndex)
					}
				})
			},

			/*
			保存更新进度
			*/
			saveReadRateUl() {
				console.log("保存数据", this.speedData)
				let data = {
					bookId: this.speedData.bookId,
					chapterId: this.speedData.chapter_id,
					chapterName: this.speedData.chapter_name,
					precent: this.progress,
					contentId: this.speedData.content_id,
					userId: this.userInfo.id,
				}

				$http.request({
					url: "book/bookreadrate/save",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log("保存成功", res)
				})
			},
			/*
				更新进度
				*/
			updateReadRateUl() {
				console.log("更新数据", this.speedData)
				let data = {
					bookId: this.speedData.bookId,
					chapterId: this.speedData.chapter_id,
					chapterName: this.speedData.chapter_name,
					precent: this.speedData.precent,
					contentId: this.speedData.content_id,
					userId: this.userInfo.id,
					id: this.updateReadId
				}

				$http.request({
					url: "book/bookreadrate/update",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log("更新", res)
				})
			},
			/**
			 * 购买书籍接口
			 **/
			buyBook() {
				//在回调中调用this.initPage()刷新本页1
				uni.showToast({
					title: '跳转至购买页面，如果未登陆则跳转登陆',
					icon: 'none'
				})
			},
			// 接收renderjs发回的数据
			onViewClick(options) {
			     console.log('renderjsCall回调');
			     console.log(options);
				  if(options.chapterid == 'next'){ // 下一章
				  this.goNextChapter()
				  }else if(options.chapterid == 'prev'){ // 上一章
				  this.goPreChapter()
				  }else if(options.curpage>0){
					   this.goNextPage()
					 // console.log(options.curpage)
				  }else if(options.curpage<0){
					  this.goPrePage()
				  }
				  // }else{ // 单纯的跳页
					 //  this.page = options.curpage
					 //  this.goToPage(this.page)
				  // }
			    },
				showMenuCall(options){
					this.setShow = true
				}
			
		},
		beforeDestroy() {
			if (this.musicPlaying) {
				this.music.pause()
			}
		},
		onHide() {
			if (this.musicPlaying) {
				this.music.pause()
			}
		},			
	}
</script>
<script lang="renderjs" module="turnjs">
	import '@/utils/jquery.min.1.7.js';
	import turn from '@/utils/turn.js';
	export default {
		data() {
			return {
				width: '',
				height: '',
				SimulationText: [],
				length:0,
				hasContent: false,
				curPage:1,	
				touchNum: 0, //点击次数
				touchTime: null, //定时器清除
				lastPage:false,
				musicIndexDom:0,
				highlight:'null',
				musicPlaying:false,
				fontSize:'',
				lineHeight:'',
				containerStyle: '',
				devName:false,
				letterSpacing:1,
			}
		},
		mounted() {	
			this.onTurn();
			this.isAndroid()
			console.log(this.devName,'devName')
		},
		methods: {
			isAndroid() {  //判断是否为安卓手机
			   var u = navigator.userAgent;
			   var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
			   this.devName = isAndroid
			 },
			updateReaderSet(newVal, oldVal){
				// 阅读器设置更新					
				$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
			console.log(newVal,'阅读器设置更新')	
			if(newVal.page > 0 && newVal.fontSize !== this.fontSize || newVal.page > 0 && newVal.lineHeight !== this.lineHeight){
				$("#flipbook").turn('page',newVal.page+1)
			}
			// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
			// $(".myPage p").css({backgroundColor:this.containerStyle})
			},			
			updateMusic(newVal, oldVal){ //听书
				this.highlight = newVal.highlight
				this.musicIndexDom = newVal.musicIndexDom
				this.musicPlaying = newVal.musicPlaying
				console.log(newVal,'听书配置项有变化')
				// let page = 1
				// page = $("#flipbook").turn('page')
				if(newVal.musicPlaying){
					// 开启听书
					console.log(newVal.page,'newVal.page')
					if(newVal.page > 0){ // 翻页
						console.log('翻页翻页', newVal.page+2)						
						$("#flipbook").turn('page', newVal.page+3)												
					}
					$("#flipbook .paragraph").css({color:"#333"})
					$("#flipbook .paragraph"+newVal.musicIndexDom).css({color:"#e5d6a0"})
										
				}
				else{
					// 关闭听书
					$("#flipbook .paragraph").css({color:"#333"})
				}
			},			
			updateReadPercent(newVal, oldVal){
				// 获取阅读进度
				this.curPage = newVal.readPage
				// console.log('获取到了阅读的进度page',newVal,this.curPage)-
				//$("#flipbook").turn('page', this.curPage+1)
			},
			updateRenderData(newVal, oldVal) {
				let {
					width,					
					height					
				} = newVal;
				this.width = width;
				this.height = height;		
				
			},
			updateSimulationText(newVal, oldVal) {
				$("#flipbook").turn('pages',1)     // 内容变化时，保留1页1
				$("#flipbook").turn('pages',newVal.SimulationText.length)
				// this.onTurn();				
				// this.SimulationText = newVal
				console.log('更新数组', newVal)
				this.fontSize = newVal.fontSize
				this.lineHeight = newVal.lineHeight
				newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
				//$(".myPage p").css({backgroundColor:this.containerStyle})
				this.devName ? this.letterSpacing = 2 : this.letterSpacing = 1
				console.log(this.letterSpacing,'-----------------------------')
				for (var i=0; i<newVal.SimulationText.length;i++) {
					var tagHtml = "";
					var conntentHtml = "";	
					for (var j=0; j<newVal.SimulationText[i].length; j++) {
						var classname = ''
						var styleconteent = ''
						newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : 'notshouhang'
						newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = "'text-indent:2em ;font-size:"+newVal.fontSize+"px;  color: #5d5d5d;   line-height:"+newVal.lineHeight*newVal.fontSize+"px;'": styleconteent = "'font-size:"+newVal.fontSize+"px ; display:inline;line-height:"+newVal.lineHeight*newVal.fontSize+"px;  color: #5d5d5d;'"
						conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[i][j].list + "</p>"
					}
					var page1 = i+1
					var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
					var tagHtml = "<div style='padding:0 10px;letter-spacing:"+ this.letterSpacing +"px;  position:relative;  background-color:"+this.containerStyle+"; height:inherit'>"+ conntentHtml +"<div style='text-align:center; color:#777 ; position: absolute;bottom: 5px; left: 0;text-align: center; width: 100%;' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
					// $("#flipbook").append(tagHtml);
					if (!$("#flipbook").turn('hasPage', i+2)) {
					        // Create an element for this page.
					        var element = $('<div />').html('');
					        // Add the page
					        $("#flipbook").turn('addPage', element, i+2);
					        element.html(tagHtml);
					}
				}
				// 如果有阅读缓存
				if(newVal.oldReadPage>0){
					// alert('读取历史阅读进度')
					$("#flipbook").turn('page', newVal.oldReadPage+1)
				}else{
					$("#flipbook").turn('page', 2)
				}
				
			},			
			onClick(event, ownerInstance) {
				if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
					//console.log('点击了左侧')
					if($("#flipbook").turn('page') == 1){ //第一页
					// console.log('切换到下一章节')
						//console.log('第一页了')
						ownerInstance.callMethod('onViewClick', {
							curpage: 0,
							chapterid : 'prev'
						})						
					}else{
						// 不是第一页
					$("#flipbook").turn("previous")
					ownerInstance.callMethod('onViewClick', {
						curpage: -1,
						chapterid : ''
					})
					}
				}else if (event.changedTouches[0].clientX > this.width / 3 * 2) { //点击屏幕右1/3为下一页
					//	console.log('点击了右侧')								
					if($("#flipbook").turn('page') == $("#flipbook").turn('pages')){ //最后一页
						// console.log('切换到下一章节')
						// console.log('最后一页了')
						ownerInstance.callMethod('onViewClick', {
							curpage: 0,
							chapterid : 'next'
						})						
					}else{
						// 不是最后一页						
						$("#flipbook").turn("next")	
						ownerInstance.callMethod('onViewClick', {
							curpage: 1,
							chapterid: '',
						})
						
					}
					} else{
						// console.log('点击了中间')
						// 双击
						this.touchNum++
						if (this.touchNum == 0) {} else {
							if (this.touchNum > 1) {
								clearTimeout(this.touchTime)
								//单击事件
								this.touchTime = setTimeout(() => {
									this.touchNum = 0
								}, 250)
								// console.log('双击')
								ownerInstance.callMethod('showMenuCall', {
									menuShow:true
								})								
							} else {
								clearTimeout(this.touchTime)
								this.touchTime = setTimeout(() => {
									//双击或多次点击事件
									this.touchNum = 0
								}, 250)
								//console.log('单击')
							}
						
						}
						// end
						
					}	
				
				},				
			onTurn() {
				$("#flipbook").turn({
					autoCenter: true,
					display: 'single',
					height: this.height,
					width: this.width,
					elevation: 50,
					duration:500,
					gradients: true,
					when: {
							turning: function(event, page, pageObject) {
								// 翻页时
							// this.curPage = page
							// console.log(event, page, pageObject,this.curPage)
						},	}
				});				
			}
			
		}		
	}
</script>
<style>
	/* .container1{background-color: #000;} */
	.notshouhang:after {
	display: inline-block;
	width: 100%;
	content: '';
}
	.buts{width: 100%; display:flex; }
	.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
</style>
<style lang="scss" scoped>	
	@import url("@/pages/yRead/iconfont.css");
	// turnjs
	/// .shouhang{text-indent: 2em;color: red;}
	.flipbook-viewport{overflow:hidden;width:100%;height:100%;
		.container{display: flex;justify-content: center;align-items: center;margin: 0 auto;}.flipbook ::v-deep .page{background-color: white;background-repeat: no-repeat;background-size: 100% 100%;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);img {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;}}.shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;}
	}
	// end
	.page-wrapper{background-color: #fff;}
	#flipbook {
		view {
			p {
				padding: 0 10px;
			}
		}
	}

	.menu-top {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		overflow: hidden;
		background-color: #fff;
		// transition: top .3s;
		display: flex;
		align-items: center;
		height: 66rpx;
		// .head {
		// 	position: relative;
		// 	display: flex;
		// 	height: 40px;
		// 	width: 100%; margin-top:0rpx;
		// 	line-height: 10px;
		// 	color: #fff;
		// }

		.back {
			width: 100%;

			// background-color: #333;
			.backiconfont {
				margin-top: 1px;
			}
		}
	}

	.setMenu {
		text-align: center;
		padding: 20px 10px
	}

	.showImgs {
		float: right;
		padding-right: 3px;
		margin-right: 10px;
		width: 30px;
		font-size: 15px;
		border: 1px solid #6aa84f;
		height: 30px;
		line-height: 30px;
		/* color: red; */
		border-radius: 15px;
	}


	.chapterImgTitle {
		display: block;
		;
		color: #636363;
		text-align: center;
		font-size: 30rpx;
		margin: 10px 0;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			//height: 300rpx;
			//line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}

		.imgBox {
			height: 500rpx;
			overflow: hidden;
			padding: 10px;
			// img{height: 300rpx !important; width: unset;}
		}
	}

	.scroll-Y {
		height: 600px;
	}

	page {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.hidden {
		opacity: 0;
	}

	.action {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;

		.item {
			flex: 1;
			height: 100%;
		}
	}

	.nothingShow {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin: 10px 0;
		text-align: center;
	}

	.listenitem {
		width: 150rpx;
		height: 150rpx;
		color: #fff;
		background-color: #636363;
		border-radius: 50%;
		text-align: center;
		line-height: 150rpx;
		font-size: 30px;
		font-weight: 700;
		position: fixed;
		right: 30rpx;
		bottom: 280rpx;
		z-index: 9999;
	}

	.audio_menu {
		width: 200rpx;
		height: 100rpx;
		position: fixed;
		bottom: 280rpx;
		background-color: #636363;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 50rpx;

		.audioSymbol {
			padding: 0 20rpx;
		}
	}

	.verticalbox {
		position: fixed;
		top: 20rpx;
		left: 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 0px 20px;
		height: 100%;
		width: 100%;
		background-color: #fff;
		overflow: hidden;

		.chapter {
			font-size: 14px;
			color: $minor-text-color;
			height: 30px;
			width: 100%;
			line-height: 30px;
		}

		.bottom-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: $minor-text-color;
			height: 30px;
			width: 100%;
		}

		.content {
			flex: 1 1 auto;

			.inner-box {
				.book-inner {}


			}
		}
	}

	.highlight {
		color: #e5d6a0 !important;
		// padding: 10rpx 20rpx;
		// border-radius: 10rpx;
		// background-color: #cbcbcb;
	}

	.fhighlight {}

	.container {
		position: fixed;
		top: 64rpx;
		left: 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 0;
		height: 96%;
		width: 100%;
		background-color: #f7faf9;
		overflow: hidden;

		.chapter {
			font-size: 14px;
			color: $minor-text-color;
			height: 30px;
			width: 100%;
			line-height: 30px;
			padding-left: 48rpx;
		}

		.bottom-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: $minor-text-color;
			height: 30px;
			width: 100%;
		}

		.bottom-bar1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: $minor-text-color;
			height: 55px;
			width: 324px;
		}

		.content {
			flex: 1 1 auto;
			overflow: hidden;

			.inner-box {
				overflow: hidden;

				.book-inner {
					// display:block;
					// text-indent:32rpx;
				}

			}
		}

	}

	.container0 {
		background-color: #f7faf9;
		background-size: 100% 100%;
		position: fixed;
	}

	.container1 {
		background-color: #000;
	}
.directory {
			position: fixed;
			top: 0;
			display: flex;
			flex-flow: column;
			width: 600rpx;
			height: 100%; padding-right: 10rpx;
			transition: left .1s;

			.bookname {
				padding: 90rpx 0 70rpx 20rpx;
				height: 60rpx;
				font-size: 40rpx;
				font-weight: bold;
			}

			.directory-listItem {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				height: 90rpx;
				font-size: 35rpx;
				border-bottom: #eee solid 1rpx;
			}

			.active {
				color: red
			}
		}
	.menu {
		// position: fixed;
		// top: 0;
		// left: 0;
		// z-index: 300;
		// width: 100%;
		// transition: all .3s;
		.menu-bottom {
			position: absolute;
			left: 0;
			width: 100%;
			background-color: #333;
			transition: bottom .3s;
			color: #fff;

			.show-chapter {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%, -110%);
				padding: 5px 10px;
				line-height: 20px;
				border-radius: 10rpx;
				font-size: 13px;
				background-color: #333;
			}

			.progress-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px;
				height: 50px;
				width: 100%;
				font-size: 15px;
			}

			.items-box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 80px;
				width: 100%;

				.item-box {
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;
					height: 100%;
				}
			}
		}

		.setting {
			// position: absolute;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 10px 20px;
			width: 100%;
			// color: #fff;
			// background-color: #333;
			transition: bottom .3s;

			.item {
				display: flex;
				align-items: center;
				height: 70px;

				.item-name {
					padding: 10px;
					color: #333;
					font-size: 12px;
				}

				.icon {
					margin-right: 10px;
					padding: 5px 20px;
					font-size: 15px;
					height: 32px;
					line-height: 20px;
					width: auto;
					text-align: center;
					border-radius: 20px;
					border: #333 solid 1px;
				}

				.type-setting {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					margin-right: 10px;
					padding: 5px;
					height: 30px;
					width: 30px;
					border-radius: 5px;
					border: #333 solid 1px;

					.line {
						width: 100%;
						border-bottom: #333 solid 1px;
					}

					.lineActive {
						width: 100%;
						border-bottom: #FF9900 solid 1px;
					}
				}

				.active {
					color: #FF9900;
					border: #FF9900 solid 1px;
				}
			}
		}
	}

	.cover {
		image {
			height: 400rpx;
			width: 300rpx;
			background-color: #eee;
		}
	}

	.pageback_container {
		z-index: 103;
		position: fixed;
		right: 2%;
		top: 66rpx;
		height: 96%;
		max-width: 50vw;
		// box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
		filter: drop-shadow(5px 0px 8px rgba(0, 0, 0, 0.3));

		.pageback {
			clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to right, #fcfcfc 0, #141414 90%);
			background-size: 350% 100%;
		}
	}

	.page-section-spacing {
		margin-top: 60rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.scroll-view-item {
		height: 300rpx;
	}

	.backiconfont {
		width: 20px;
		margin-left: 10px;
		margin-top: 10px;
		height: 20px;
		background-color: rgba(255, 255, 255, .8);
		border-radius: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
	}

	.jushou {
		text-indent: 2em;
	}

	.item_wrap {
		flex-wrap: wrap;
	}
</style>
