<template>
	<view class="page">
		<!-- 仅计算用 -->
		<cus-page id="preChapter" class="hidden" :content="preChapter.content" :fontSize="fontSize"
			:lineHeight="lineHeight"></cus-page>
		<cus-page id="curChapter" class="hidden" :content="curChapter.content" :fontSize="fontSize"
			:lineHeight="lineHeight"></cus-page>
		<cus-page id="nextChapter" class="hidden" :content="nextChapter.content" :fontSize="fontSize"
			:lineHeight="lineHeight"></cus-page>

		<!-- 上一页 -->
		<cus-page v-if="prePage.ready" :zIndex="102" :bgColor="bgColor" :transform="prePage.pageTransform[turnType]"
			:showAnimation="showAnimation" :showShadow="showShadow" :turnType="turnType"
			:chapterName="prePage.chapterName" :innerHeight="innerHeight" :content="prePage.content"
			:fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor" :pageNum="prePage.pageNum"
			:systemTimeStr="systemTimeStr" :totalPage="prePage.totalPage" :clipPath="prePage.clipPath"
			:bgStyle="prePage.bgStyle" :subBgStyle="prePage.subBgStyle">
		</cus-page>

		<!-- 本页 -->
		<cus-page :isTouch="true" :zIndex="101" :bgColor="bgColor" :transform="curPage.pageTransform[turnType]"
			:showAnimation="showAnimation" :showShadow="showShadow" :turnType="turnType"
			:chapterName="curPage.chapterName" :innerHeight="innerHeight" :content="curPage.content"
			:fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor" :pageNum="curPage.pageNum"
			:systemTimeStr="systemTimeStr" :totalPage="curPage.totalPage" :clipPath="curPage.clipPath"
			:bgStyle="curPage.bgStyle" :subBgStyle="curPage.subBgStyle" @touch-start="touchStart"
			@touch-move="touchMove" @touch-end="touchEnd" @touch-cancel="touchCancel">
		</cus-page>

		<!-- 下一页 -->
		<cus-page ref="curChapter" v-if="nextPage.ready" :zIndex="100" :bgColor="bgColor"
			:transform="nextPage.pageTransform[turnType]" :showAnimation="showAnimation" :showShadow="showShadow"
			:turnType="turnType" :chapterName="nextPage.chapterName" :innerHeight="innerHeight"
			:content="nextPage.content" :fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor"
			:pageNum="nextPage.pageNum" :systemTimeStr="systemTimeStr" :totalPage="nextPage.totalPage">
		</cus-page>

		<!-- 点击屏幕弹出 -->
		<content-setting ref="contentSetting" :bgColor="bgColor" :textColor="textColor" :isDark="isDark"
			:fontSize="fontSize" :bgColorList="bgColorList" :textColorList="textColorList" :turnTypeList="turnTypeList"
			:colorType="colorType" :turnType="turnType" :chapterData="chapterData"
			:chapterIndex="curChapter.chapterIndex" @updateProps="updateProps" @updatePage="updatePage"
			@updateCatalog="updateCatalog" @whenHide="hideMenu" @moreHandle="moreHandle" @listenHandle="listenHandle">
		</content-setting>

		<!-- 悬浮窗 -->
		<cus-audio-play ref="audioPlay" :bookId="id" :bookName="title" :chapterName="curChapter.chapterName"
			:content="curChapter.content" :styleBottom="120" @show="getAudioPlayShow"></cus-audio-play>
	</view>
</template>

<script>
	import contentSetting from './contentSetting.vue'
	import {
		mapGetters,
		mapMutations,
		mapActions
	}
	from 'vuex'
	export default {
		components: {
			contentSetting,
		},
		data() {
			return {
				id:"5f9c97aa52f7032983c485e4",
				title: '开局就杀皇帝',
				chapterData: [],
				preChapter: { //上一章数据
					ready: false, //是否准备完毕
					chapterIndex: 0,
					chapterName: '',
					content: '',
					totalPage: 1,
				},

				curChapter: { //本一章数据
					chapterIndex: 0,
					chapterName: '',
					content: '',
					totalPage: 1,
				},

				nextChapter: { //下一章数据
					ready: false, //是否准备完毕
					chapterIndex: 0,
					chapterName: '',
					content: '',
					totalPage: 1,
				},

				prePage: { //上一页数据
					ready: false, //是否准备完毕
					chapterName: '',
					content: '',
					pageNum: 0,
					totalPage: 1,
					pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
					clipPath: '', // 仿真翻页
					bgStyle: {},
					subBgStyle: {},
				},

				curPage: { //本页数据
					ready: false, //是否准备完毕
					chapterName: '',
					content: '',
					pageNum: 0,
					totalPage: 1,
					pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
					clipPath: '', // 仿真翻页
					subBgStyle: {},
				},

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

				showAnimation: false, //是否开启动画
				showShadow: false, //是否显示页面阴影
				aimdistance: 50, // 滑动翻页的最小距离

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

				systemTimeStr: '', //系统时间字符串

				touchStartX: 0, // 触屏起始点x
				touchStartY: 0, // 触屏起始点y
				deltaX: 0, // 手指瞬时位移
				deltaY: 0, // 手指瞬时位移

				bgColorList: ['#CCE8CF', '#CCBF95', '#E1C7CA', '#3C3734'], //背景色列表
				textColorList: ['#352C1D', '#352C1D', '#FFFFFF', '#352C1D'], //字体色列表
				turnTypeList: ['覆盖', '平移', '仿真', '上下'],
				maxFontSize: 30, //最大字体大小，px
				minFontSize: 14, //最小字体大小，px
				turnType: 0, //翻页方式 覆盖0，平移1，仿真2，上下3
				fontSize: 16, //字体大小，
				simplified: 1, //是否简体
				lineHeight: 1.5, //行高，注意是fontSize的倍数
				isDark: false, // 是否夜间模式
				colorType: 0,
				history: { //本书历史记录
					chapterIndex: 0,
					progress: 0
				},

				bgColor: '', // 背景色
				textColor: '', // 字体色
				over: 40,
				turnDirect: 0, //向左向下-1 向右向上1 
			}
		},
		computed: {
			...mapGetters({
				curSource: 'get_curSource',
				readHistorys: 'get_readHistorys',
				setting: 'get_setting'
			}),
			//截取至整行的最大高度
			innerHeight() {
				let lineHeight = this.fontSize * this.lineHeight
				let lineNum = Math.floor(this.contentHeight / lineHeight)
				return lineNum * lineHeight
			},
		},
		onLoad() {
			// this.id = option.id
			// this.title = option.title
			this.getSystemInfo()
			this.setPageInfo()
			this.initPage()
		},
		onUnload() {
			uni.hideLoading()

			// 浏览记录
			let t_progress = Math.floor((this.curPage.pageNum + 1) / this.curPage.totalPage * 100) / 100
			let idx = this.readHistorys.findIndex(item => item._id === this.id)
			if (idx > -1) {
				let params = {
					...this.readHistorys[idx],
					index: this.curPage.chapterIndex,
					progress: t_progress || 0,
					readChapter: this.chapterData[this.curPage.chapterIndex].title,
					readHistory: true
				}
				this.updateReadHistory(params)
			}
		},
		methods: {
			...mapMutations(['set_setting']),
			...mapActions(['updateReadHistory']),
			async initPage() {
				uni.hideLoading()
				uni.showLoading({
					mask: true,
					title: '章节准备中'
				})
				this.getChapterInfo()
				await this.getChapterList()
				await this.getThreeChapter(this.history.chapterIndex)
				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
				this.goToPage(page)
				uni.hideLoading()
			},
			getChapterInfo() {
				let res = this.readHistorys.filter(item => item._id === this.id)
				if (res && res.length) {
					this.history = {
						chapterIndex: res[0].index,
						progress: res[0].progress
					}
				}
			},
			// 获取设备信息
			getSystemInfo() {
				let sysInfo = uni.getSystemInfoSync()
				this.windowWidth = sysInfo.windowWidth
				this.windowHeight = sysInfo.windowHeight
				this.statusBarHeight = sysInfo.statusBarHeight

				// 设置时间
				// this.systemTimeStr = this.$formatTimestamp('', 'hh:mm')
				// setInterval(() => {
				// 	this.systemTimeStr = this.$formatTimestamp('', 'hh:mm')
				// }, 60000)
			},
			// 计算页面布局信息
			setPageInfo() {
				this.contentHeight = this.windowHeight - 30 - 30 - 10 - this.statusBarHeight

				let t_setting = this.setting
				this.turnType = t_setting.hasOwnProperty('turnType') ? t_setting.turnType : this.turnType
				this.fontSize = t_setting.hasOwnProperty('fontSize') ? t_setting.fontSize : this.fontSize
				this.simplified = t_setting.hasOwnProperty('simplified') ? t_setting.simplified : this.simplified
				this.lineHeight = t_setting.hasOwnProperty('lineHeight') ? t_setting.lineHeight : this.lineHeight
				this.isDark = t_setting.hasOwnProperty('isDark') ? t_setting.isDark : this.isDark
				this.colorType = t_setting.hasOwnProperty('colorType') ? t_setting.colorType : this.colorType
				this.$nextTick(function() {
					this.$refs.contentSetting.changeBackground(this.colorType, this.isDark)
				})
			},
			// 获取章节列表
			async getChapterList() {
				let res = await this.$store.dispatch('getChapterList', this.id)
				if (res) {
					this.chapterData = res
				}
			},
			// 获取章节内容
			async getBookContent(idx, attrName) {
				let params = this.chapterData[idx]
				let res = await this.$store.dispatch('getBookContent', params)
				if (res) {
					// console.log(this.chapterData[idx]);
					this[attrName] = {
						chapterIndex: idx,
						chapterName: this.chapterData[idx].title,
						content: res,
					}
					await this.calcChapter(attrName)
				}
			},
			// 计算章节页数
			calcChapter(attrName) {
				const self = this
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this)
					this.$nextTick(function() {
						query.select(`#${attrName} .book-inner`).boundingClientRect(data => {
							if (data.height) {
								let totalPage = Math.ceil(data.height / self.innerHeight)
								self[attrName].totalPage = totalPage || 1
								self[attrName].ready = true //章节准备完毕
								resolve(true)
							} else {
								resolve(false)
							}
						}).exec()
					})
				})
			},
			// 获取三章内容
			async getThreeChapter(idx) {
				await this.getBookContent(idx, 'curChapter') // 获取当前章节的内容
				if (idx > 0) {
					await this.getBookContent(idx - 1, 'preChapter') // 获取上一个章节的内容
				} else {
					this.preChapter = {
						ready: true,
						isOver: true
					}
				}
				if (idx < this.chapterData.length - 1) {
					await this.getBookContent(idx + 1, 'nextChapter') // 获取下一个章节的内容
				} else {
					this.nextChapter = {
						ready: true,
						isOver: true
					}
				}
			},
			// 根据页码跳转
			goToPage(page) {
				let winW = this.windowWidth,
					winH = this.windowHeight

				this.showAnimation = false
				this.curPage = {
					...this.curChapter,
					pageNum: page < this.curChapter.totalPage - 1 ? page : this.curChapter.totalPage - 1,
					pageTransform: [
						`translate(0,0)`,
						`translate(0,0)`,
						`translate(0,0)`,
						`translate(0,0)`
					],
					clipPath: '', // 仿真翻页
					bgStyle: {},
					subBgStyle: {},
				}

				let perCommon = {
					pageTransform: [
						`translate(${-winW}px,0)`,
						`translate(${-winW}px,0)`,
						`translate(${-winW}px,0)`,
						`translate(0,${-winH}px)`
					],
					clipPath: '', // 仿真翻页
					bgStyle: {},
					subBgStyle: {},
				}
				// 翻到章节的第一页并且没有上一章
				if (page === 0 && this.preChapter.isOver) {
					this.prePage = {
						ready: true,
						isOver: true,
						...perCommon
					}
				}
				// 翻到章节的第一页并且有上一章
				else if (page === 0 && !this.preChapter.isOver) {
					this.prePage = {
						...this.preChapter,
						pageNum: this.preChapter.totalPage - 1,
						...perCommon
					}
				}
				//还有上一页
				else {
					this.prePage = {
						...this.curChapter,
						pageNum: page - 1,
						...perCommon
					}
				}

				let nextCommon = {
					pageTransform: [
						`translate(0,0)`,
						`translate(${winW}px,0)`,
						`translate(0,0)`,
						`translate(0,0)`
					],
				}
				// 翻到章节的最后一页并且没有下一章
				if (page >= this.curChapter.totalPage - 1 && this.nextChapter.isOver) {
					this.nextPage = {
						ready: true,
						isOver: true,
						...nextCommon
					}
				}
				// 翻到章节的最后一页并且有下一章
				else if (page >= this.curChapter.totalPage - 1 && !this.nextChapter.isOver) {
					this.nextPage = {
						...this.nextChapter,
						pageNum: 0,
						...nextCommon
					}
				}
				//还有下一页
				else {
					this.nextPage = {
						...this.curPage,
						pageNum: page + 1,
						...nextCommon
					}
				}
			},
			// 章节轮换
			async chapterRotate(type) {
				uni.showLoading({
					mask: true,
					title: '章节准备中'
				})
				let curIndex = 0
				switch (type) {
					// 上一章
					case 'pre':
						this.nextChapter = JSON.parse(JSON.stringify(this.curChapter))
						this.curChapter = JSON.parse(JSON.stringify(this.preChapter))
						curIndex = this.curChapter.chapterIndex
						if (curIndex > 0) {
							await this.getBookContent(curIndex - 1, 'preChapter') // 获取上一个章节的内容
						} else {
							this.preChapter = {
								ready: true,
								isOver: true
							}
						}
						break
						// 下一章
					case 'next':
						this.preChapter = JSON.parse(JSON.stringify(this.curChapter))
						this.curChapter = JSON.parse(JSON.stringify(this.nextChapter))
						curIndex = this.curChapter.chapterIndex
						if (curIndex < this.chapterData.length - 1) {
							await this.getBookContent(curIndex + 1, 'nextChapter') // 获取下一个章节的内容
						} else {
							this.nextChapter = {
								ready: true,
								isOver: true
							}
						}
						break
				}
				uni.hideLoading()
			},
			// 去上一页
			// num: 页码
			async goPrePage(num) {
				let winW = this.windowWidth
				let winH = this.windowHeight

				if (num === -1) {
					if (this.preChapter.ready && this.preChapter.isOver) {
						return
					}
					await this.chapterRotate('pre')
					num = this.curChapter.totalPage - 1
				}

				let pre = [].concat(this.prePage.pageTransform)
				let cur = [].concat(this.curPage.pageTransform)
				let tClipPath = this.prePage.clipPath
				let tBgStyle = JSON.parse(JSON.stringify(this.prePage.bgStyle))
				let tSubBgStyle = JSON.parse(JSON.stringify(this.prePage.subBgStyle))
				this.goToPage(num)
				this.prePage.pageTransform = [
					`translate(${-winW}px,0)`,
					`translate(${-winW}px,0)`,
					`translate(${-winW}px,0)`,
					`translate(0,${-winH}px)`
				]
				this.curPage.pageTransform = pre
				this.nextPage.pageTransform = cur

				if (this.turnType === 2) {
					this.curPage.clipPath = tClipPath
					this.curPage.bgStyle = tBgStyle
					this.curPage.subBgStyle = tSubBgStyle
				}

				setTimeout(() => {
					this.pageReset('pre')
				}, 50)
			},
			// 去下一页
			// num: 页码
			async goNextPage(num) {
				let winW = this.windowWidth
				let winH = this.windowHeight

				if (num === this.curPage.totalPage) {
					if (this.nextChapter.ready && this.nextChapter.isOver) {
						return
					}
					await this.chapterRotate('next')
					num = 0
				}
				let cur = [].concat(this.curPage.pageTransform)
				let next = [].concat(this.nextPage.pageTransform)
				let tClipPath = this.curPage.clipPath
				let tBgStyle = JSON.parse(JSON.stringify(this.curPage.bgStyle))
				let tSubBgStyle = JSON.parse(JSON.stringify(this.curPage.subBgStyle))
				this.goToPage(num)
				this.prePage.pageTransform = cur
				this.curPage.pageTransform = next
				this.nextPage.pageTransform = [
					`translate(0,0)`,
					`translate(${winW}px,0)`,
					`translate(0,0)`,
					'translate(0,0)'
				]

				if (this.turnType === 2) {
					this.prePage.clipPath = tClipPath
					this.prePage.bgStyle = tBgStyle
					this.prePage.subBgStyle = tSubBgStyle
				}

				setTimeout(() => {
					this.pageReset('next')
				}, 50)
			},
			touchStart(touche) {
				this.showAnimation = false
				this.touchStartX = touche.clientX;
				this.touchStartY = touche.clientY;
			},
			touchMove(touche) {
				this.showShadow = true;
				let deltaX = touche.clientX - this.touchStartX
				let deltaY = touche.clientY - this.touchStartY
				let winW = this.windowWidth
				let winH = this.windowHeight

				// 限制边界
				if (this.turnType !== 2) {
					deltaX = Math.abs(deltaX) < winW ? deltaX : deltaX / Math.abs(deltaX) * winW
					deltaY = Math.abs(deltaY) < winH ? deltaY : deltaY / Math.abs(deltaY) * winH
				}
				let delta = this.getTouche(deltaX, deltaY)
				if (Math.abs(delta) < 5) {
					return
				}
				if (this.turnDirect === 0) {
					this.turnDirect = delta / Math.abs(delta)
				}
				let attrName = this.turnDirect > 0 ? 'prePage' : 'nextPage'
				if (this[attrName].ready && this[attrName].isOver) { //翻至封面了
					this.deltaX = 0
					this.deltaY = 0
					return
				}
				this.deltaX = deltaX;
				this.deltaY = deltaY;
				let over = this.over
				if (this.turnDirect < 0) {
					// console.log('向下翻页');
					// 向下翻页
					if (this.turnType === 2) {
						let absDeltaY = Math.abs(deltaY)
						let symbolY = deltaY / absDeltaY
						let posX1 = winW + deltaX - (symbolY === 1 ? absDeltaY : 0)
						let posX2 = winW + deltaX - (symbolY === 1 ? 0 : absDeltaY)
						if (posX1 <= 0 || posX2 <= 0) {
							return
						}
						let rotateZ = ((Math.atan2(winH * 0.5, absDeltaY) * 180 / Math.PI))
						rotateZ = (90 - rotateZ).toFixed(0)
						let blurDis = 1 - ((posX1 + posX2) / (winW * 2))
						blurDis = blurDis < 0.4 ? 0.4 : blurDis
						this.curPage.clipPath =
							`polygon(0px 0px, ${posX1}px 0px, ${posX2}px ${winH}px, 0px ${winH}px)`
						this.curPage.bgStyle = {
							filter: `drop-shadow(0px 0px ${40*blurDis}px rgba(0, 0, 0, 0.8))`,
							transform: `rotateY(180deg) rotateZ(${rotateZ*symbolY}deg)`,
							transformOrigin: `${winW + deltaX - absDeltaY*0.5}px 50%`,
							display: 'block'
						}
						this.curPage.subBgStyle = {
							clipPath: `polygon(${posX1}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX2}px ${winH+over}px)`,
							boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
						}
					}

					this.curPage.pageTransform = [
						`translate(${deltaX}px,0)`,
						`translate(${deltaX}px,0)`,
						`translate(0,0)`,
						`translate(0,${deltaY}px)`
					]
					this.nextPage.pageTransform = [
						`translate(0,0)`,
						`translate(${winW+deltaX}px,0)`,
						`translate(0,0)`,
						`translate(0,0)`
					]
				} else {
					// console.log('向上翻页');
					// 向上翻页
					if (this.turnType === 2) {
						let posX = touche.clientX
						if (posX <= 0) {
							return
						}
						let blurDis = 1 - (posX / winW)
						blurDis = blurDis < 0.4 ? 0.4 : blurDis
						this.prePage.clipPath =
							`polygon(0px 0px, ${posX}px 0px, ${posX}px ${winH}px, 0px ${winH}px)`
						this.prePage.bgStyle = {
							filter: `drop-shadow(0px 0px ${40*blurDis}px rgba(0, 0, 0, 0.8))`,
							transform: `rotateY(180deg) rotateZ(0deg)`,
							transformOrigin: `${posX}px 50%`,
							display: 'block'
						}
						this.prePage.subBgStyle = {
							clipPath: `polygon(${posX}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX}px ${winH+over}px)`,
							boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
						}
					}

					this.prePage.pageTransform = [
						`translate(${-winW+deltaX}px,0)`,
						`translate(${-winW+deltaX}px,0)`,
						`translate(0,0)`,
						`translate(0,${-winH+deltaY}px)`
					]
					this.curPage.pageTransform = [
						`translate(0,0)`,
						`translate(${deltaX}px,0)`,
						`translate(0,0)`,
						`translate(0,0)`
					]
				}
			},
			async touchEnd(touche) {
				let winW = this.windowWidth
				let winH = this.windowHeight
				let touchStart = this.getTouche(this.touchStartX, this.touchStartY)
				let client = this.getTouche(touche.clientX, touche.clientY)
				let delta = client - touchStart
				if (Math.abs(delta) < 0.8) { //部分手机点击屏幕时无法做到delta===0
					if (touche.clientX < winW / 3) { //点击屏幕左1/3为上一页
						this.showAnimation = true
						this.showShadow = false
						this.goPrePage(this.curPage.pageNum - 1)
					} else if (touche.clientX > winW / 3 * 2) { //点击屏幕右1/3为下一页
						this.showAnimation = true
						this.showShadow = false
						this.goNextPage(this.curPage.pageNum + 1)
					} else { //点击屏幕中间1/3为呼出菜单
						if (this.turnDirect === 0) {
							this.showMenu()
						}
					}
				} else {
					let symbol = delta / Math.abs(delta)
					// 如果小于最小允许翻页的距离
					if (Math.abs(delta) < this.aimdistance) {
						this.pageReset(symbol < 0 ? 'pre' : 'next')
						return
					}
					this.showShadow = false
					if (symbol < 0) {
						this.goNextPage(this.curPage.pageNum + 1)
					} else {
						this.goPrePage(this.curPage.pageNum - 1)
					}
				}
			},
			touchCancel(e) {
				this.pageReset()
			},
			pageReset(type = 'next') {
				let over = this.over
				// let type1 = this.turnDirect > 0 ? 'next' : 'pre'
				// console.log(type, type1);
				this.turnDirect = 0
				this.showAnimation = true
				this.showShadow = false
				//取消翻页,重置页面
				let winW = this.windowWidth,
					winH = this.windowHeight
				this.prePage.pageTransform = [
					`translate(${-winW}px,0)`,
					`translate(${-winW}px,0)`,
					`translate(${type==='next'?0:-winW}px,0)`,
					`translate(0,${-winH}px)`
				]
				this.curPage.pageTransform = [
					`translate(0,0)`,
					`translate(0,0)`,
					`translate(0,0)`,
					`translate(0,0)`
				]
				this.nextPage.pageTransform = [
					`translate(0,0)`,
					`translate(${winW}px,0)`,
					`translate(0,0)`,
					`translate(0,0)`
				]

				if (this.turnType === 2) {
					let posX = type === 'next' ? 0 : winW
					let prop = type === 'next' ? 'prePage' : 'curPage'
					this[prop].clipPath =
						`polygon(0px 0px, ${posX}px 0px, ${posX}px ${winH}px, 0px ${winH}px)`
					this[prop].bgStyle = {
						transform: `rotateY(180deg) rotateZ(0deg)`,
						transformOrigin: `${posX}px 50%`,
						display: 'block'
					}
					this[prop].subBgStyle = {
						clipPath: `polygon(${posX}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX}px ${winH+over}px)`,
						boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
					}
				}

				setTimeout(() => {
					this.prePage.pageTransform = [
						`translate(${-winW}px,0)`,
						`translate(${-winW}px,0)`,
						`translate(${-winW}px,0)`,
						`translate(0,${-winH}px)`
					]
				}, 100)
			},
			getTouche(x, y) {
				let result = 0
				switch (this.turnType) {
					// 覆盖
					case 0:
						result = x
						break
						// 平移
					case 1:
						result = x
						break
						// 仿真
					case 2:
						result = x
						break
						// 上下
					case 3:
						result = y
						break
				}
				return result
			},
			// 显示操作菜单
			showMenu() {
				this.$refs.curChapter.setFullscreen(false)
				this.$refs.contentSetting.show()
			},
			// 隐藏操作菜单
			hideMenu() {
				this.$refs.curChapter.setFullscreen(true)
			},
			updateProps(res) {
				res.forEach(item => {
					this[item[0]] = item[1]
					if (item.length === 2 || (item.length > 2 && !item[2])) {
						this.updateSetting(item[0])
					}
				})
			},
			async updatePage() {
				await this.calcChapter('preChapter')
				await this.calcChapter('curChapter')
				await this.calcChapter('nextChapter')
				this.goToPage(this.curPage.pageNum)
			},
			updateSetting(prop) {
				let t_setting = Object.assign({}, this.setting || {})
				t_setting[prop] = this[prop]
				this.set_setting(t_setting)
			},
			updateCatalog(index) {
				let idx = this.readHistorys.findIndex(item => item._id = this.id)
				if (idx > -1) {
					let params = {
						...this.readHistorys[idx],
						index: index,
						progress: 0,
						readChapter: this.chapterData[index].title
					}
					this.updateReadHistory(params)
				}
				this.initPage()
			},
			moreHandle() {
				uni.redirectTo({
					url: '/pages/public/bookDetail?id=' + this.id
				})
			},
			listenHandle() {
				this.$refs.audioPlay.show()
			},
			getAudioPlayShow(data) {
				this.show = data
			},
		}
	}
</script>

<style lang="scss">
	.page {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.hidden {
		opacity: 0;
	}
</style>
