<template>
	<view class="novelReading_content">
		<!-- 	 -->
		<!-- @tap="handelShowStepUp" -->
		<view class="novelReading_body" :style="`background:${bodyReadingBg}`">
			<!--   @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher" @preload="preloadContent"-->
			<view class="novelReading_main_con">
				<yingbing-ReadPage style="height: 100%;" ref="yingbingReadPage" :footerShow="true"
					:page-type="charactersPageType" :font-size="newCharactersSize" :enableClick="true"
					:line-height="defaultCharactersLineHeight" :color="novelContentColor" :bg-color="bodyReadingBg"
					:slide="20" :enablePreload="false" @loadmore="loadmoreContent" @clickTo="handelShowStepUp"
					:clickOption="{width:200,height: 400,left:'auto',top:'auto'}" :topGap="0" :bottomGap="20"
					@change="currentChange" :readChapterFlag="readChapterFlag">
					<template slot="test">
						<view class="balance_con">
							<rich-text class="balance_con_rich_text"
								:style="`color:${novelContentColor};font-size:${newCharactersSize}px;`"
								:nodes="readChapterInfoObj.isContent"></rich-text>
							<view class="balance_recharge_option"></view>
							<view class="balance_recharge" :style="`background:${bodyReadingBg}`">
								<view class="balance_tips" :style="`color:${novelContentColor}`">
									<view v-if="readChapterInfoObj.chackpay == 2">
										<view v-if="token" class="insufficient_funds" sstyle="margin-bottom:8rpx;">
											书币余额不足</view>
										<view class="">
											<text>付费章节，需要购买。</text>
											<text>{{readChapterInfoObj.price}}</text>
											<text>书币</text>
										</view>
									</view>
									<view v-if="readChapterInfoObj.chackpay == 3">
										<text>付费章节，需要全本购买。</text>
										<text>{{readChapterInfoObj.allprice}}</text>
										<text>书币</text>
									</view>
								</view>
								<view class="balance_btn_all">
									<view v-if="!token" class="purchaseFull_popup_btn" @click="toPathLogin">新用户登录</view>
									<view v-else-if="readChapterInfoObj.chackpay == 2" class="purchaseFull_popup_btn"
										@click="balanceConfirm">去充值</view>
									<view v-else-if="readChapterInfoObj.chackpay == 3" class="purchaseFull_popup_btn"
										@click="handelPurchaseFull">需要全本购买
									</view>
								</view>
							</view>
						</view>
					</template>
				</yingbing-ReadPage>
			</view>
		</view>
		<view class="u_popup_all">
			<u-popup :show="navbarPopupShow" mode="top" :overlay="false" bgColor="transparent">
				<u-navbar :title="bookInfo.title" @rightClick="rightClick" :autoBack="true" :fixed="false"
					:bgColor="mainBodyBg" :titleStyle="{ color: navigationBarTitleTextColor }"
					:leftIconColor="navigationBarTitleTextBackColor" :shadow="true" :safeAreaInsetTop="true"
					:placeholder="true" />
			</u-popup>
			<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
					<view class="reading_schedule_body">
						<view class="_previous_chapter"
							:style="`color:${previousChapterBbuttonTextColor};background:${previousChapterBbuttonBg}`"
							@tap="upperNextChapter('upper')">
							上一章
						</view>
						<view class="_next_chapter"
							:style="`color:${nextChapterBbuttonTextColor};background:${nextChapterBbuttonBg}`"
							@tap.prevent="upperNextChapter('next')">下一章
						</view>
					</view>
					<view class="my_tabBar_Reading" :style="`background:${bodyReadingBg}`">
						<view class="tabBar_Reading_item">
							<view class="reading_item_icon" @tap="handelDirectoryPopup">
								<image class="is_images" :src="barPopupIcon[novelMainTypeColor].directory_icon"></image>
							</view>
							<view class="reading_item_name" :style="`color:${tabBarTextColor}`">目录</view>
						</view>
						<view class="tabBar_Reading_item">
							<view class="reading_item_icon" @tap="toBookshelf">
								<image class="is_images" :src="barPopupIcon[novelMainTypeColor].bookshelf_icon"></image>
							</view>
							<view class="reading_item_name" :style="`color:${tabBarTextColor}`">书城</view>
						</view>
						<view class="tabBar_Reading_item" @tap="handelSteUpPopup">
							<view class="reading_item_icon">
								<image class="is_images" :src="barPopupIcon[novelMainTypeColor].step_up_icon"></image>
							</view>
							<view class="reading_item_name" :style="`color:${tabBarTextColor}`">设置</view>
						</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5"
				:safeAreaInsetBottom="false">
				<view class="step_up_box" :style="`background:${bodyReadingBg}`">
					<view class="step_up_box_body">
						<view class="step_up_item">
							<view class="step_up_item_name" :style="`color:${dialogTextColor}`">背景</view>
							<view :class="[`step_up_item_bg`, novelMainTypeColor == 'F3EFE9' ? 'activeBlack' : '']"
								style="background: #f3efe9" @tap="changNovelMainType('F3EFE9')"></view>
							<view :class="[`step_up_item_bg`, novelMainTypeColor == 'CCD9E2' ? 'activeBlack' : '']"
								style="background: #ccd9e2" @tap="changNovelMainType('CCD9E2')"></view>
							<view :class="[`step_up_item_bg`, novelMainTypeColor == '333333' ? 'activeWhite' : '']"
								@tap="changNovelMainType('333333')">
								<image class="is_images" :src="setUpModeBlack" />
							</view>
						</view>
						<view class="step_up_item mt40rpx">
							<view class="step_up_item_name" :style="`color:${dialogTextColor}`">字号</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="reduceCharactersSize">
								A-</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="addCharactersSize">A+
							</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="handelCharactersSize">
								默认</view>
						</view>
						<!-- 	<view class="step_up_item mt40rpx">
							<view class="step_up_item_name" :style="`color:${dialogTextColor}`">翻页</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="handelPageType('real')">仿真</view>
							<view class="step_up_item_text_bg"
								:style="`color:${dialogTextColor};background:${dialogATextBg}`"
								@tap="handelPageType('cover')">平移
							</view>
						</view> -->
					</view>
					<view style="height: 140rpx" />
				</view>
			</u-popup>
			<!-- 	<u-popup :show="directoryPopupShow" @close="directoryPopupClose" mode="right" :safeAreaInsetTop="true">
				<view class="directory_popup_box">
					<scroll-view scroll-y="true" @scrolltoupper="directoryPopupUpper"
						@scrolltolower="directoryPopupLower" :show-scrollbar="false" class="directory_scroll_y">
						<view class="_popup_box_item" v-for="m in directoryList" :key="m.id" @tap="handelDirectoryItem">
							<view :class="['_item_name', readDirectoryActive == m.chapterorder ? 'active' : '']">
								{{ m.chaptername }}
							</view>
							<view v-if="m.isvip" class="_item_chapter_lock">
								<image class="is_images" src="/static/images/chapter_lock.png"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup> -->
		</view>
	</view>
</template>

<script>
	import setUpReadingColorAll from './setUpReadingColorAll.js';
	import bookshelf_333 from '@/static/images/novelReading/bookshelf_333.png';
	import directory_333 from '@/static/images/novelReading/directory_333.png';
	import step_up_333 from '@/static/images/novelReading/step_up_333.png';
	import bookshelf_ccd9e2 from '@/static/images/novelReading/bookshelf_ccd9e2.png';
	import step_up_ccd9e2 from '@/static/images/novelReading/step_up_ccd9e2.png';
	import directory_ccd9e2 from '@/static/images/novelReading/directory_ccd9e2.png';
	import bookshelf_f3efe from '@/static/images/novelReading/bookshelf_f3efe.png';
	import directory_f3efe9 from '@/static/images/novelReading/directory_f3efe9.png';
	import step_up_f3efe from '@/static/images/novelReading/step_up_f3efe.png';
	import set_up_mode_black from '@/static/images/novelReading/set_up_mode_black.png';
	import recharge_empty from '@/static/images/recharge_empty.png'
	import config from '@/config/index';
	import {
		isGetSystemInfo
	} from '@/utils/systemInfo.js';
	import {
		myGetStorage,
		mySetStorage
	} from '@/utils/storage/index.js';
	import myData from './data.js';
	import CommBookLeftRigth from '@/components/commBookLeftRigth/index.vue'
	export default {
		components: {
			CommBookLeftRigth
		},
		data() {
			return {
				token: '',
				novelMainTypeColor: '',
				setUpColorAll: {},
				navigationBarTitleTextColor: '',
				mainBodyBg: '',
				navigationBarTitleTextBackColor: '',
				previousChapterBbuttonBg: '',
				previousChapterBbuttonTextColor: '',
				nextChapterBbuttonBg: '',
				nextChapterBbuttonTextColor: '',
				// 内容背景
				bodyReadingBg: '',
				// 底部安全区
				// bottomSecureHeight: 0,
				readingPopupshow: false,
				stepUpPopupShow: false,
				purchaseFullShow: false,
				navbarPopupShow: false,
				// bar 的icon
				barPopupIcon: {},
				dialogTextColor: '',
				progressBg: '',
				progressActiveBg: '',
				setUpModeBlack: '',
				dialogATextBg: '',
				novelContentColor: '',
				// 目录信息
				booksDirectorySid: '2387',
				bookInfo: {},
				booksDirectoryPage: 1,
				newBooksDirectoryPage: [],
				directoryList: [],
				// directoryPopupHeight: 0,
				directoryPopupShow: false,
				// 小说信息
				novelReadingContentText: [],
				charactersPageType: 'real',
				defaultCharactersSize: 26,
				newCharactersSize: 26,
				defaultCharactersLineHeight: 20,
				readDirectoryActive: '',
				readChapterid: '',
				readChapterInfoObj: {},
				readChapterLastid: '',
				readChapterNextid: '',
				readChapterFlag: false,
			};
		},
		onLoad(options) {
			this.booksDirectorySid = options.sid;
			this.readChapterid = options.id;
			this.isGetUserRead();
		},
		onShow() {
			const token = myGetStorage('token');
			this.token = token;
			const bookSid = this.booksDirectorySid;
			const data = {
				sid: bookSid,
			}
			uni.$u.http.post('/bookdetails', data).then((res) => {
				uni.hideLoading();
				if (res.status == 1) {
					const info = res.data.info;
					const cover = info.cover.includes('http') ? info.cover : `${config.baseUrl}${info.cover}`;
					this.bookInfo = {
						...info,
						cover
					};
				}
			}).catch((err) => {
				uni.hideLoading();
			})
		},
		methods: {
			async isGetUserRead() {
				const booksDirectorySid = this.booksDirectorySid;
				const booksDirectoryPage = this.booksDirectoryPage;
				const readChapterid = this.readChapterid ? this.readChapterid : '';
				this.isGetReadChapter(readChapterid);
				// const newReadChapterInfoObj = await this.isGetBookInfo(readChapterid);
				// this.novelReadingContentText = [newReadChapterInfoObj];
				// this.readDirectoryActive = newReadChapterInfoObj.chapterorder;
				// this.readChapterLastid = newReadChapterInfoObj.lastid;
				// this.readChapterNextid = newReadChapterInfoObj.nextid;
				// this.$refs.yingbingReadPage.init({
				// 	contents: [newReadChapterInfoObj],
				// 	start: 0,
				// 	currentChapter: newReadChapterInfoObj.chapterorder
				// })
			},
			isGetBookInfo(chapterId) {
				return new Promise((resolve) => {
					const booksDirectorySid = this.booksDirectorySid;
					const novelReadingContentText = this.novelReadingContentText;
					uni.showLoading({
						title: '加载中...'
					});
					const data = {
						sid: booksDirectorySid,
					};
					if (chapterId) {
						data.id = chapterId;
					}
					uni.$u.http.post('/read', data).then((res) => {
						uni.hideLoading();
						if (res.status == 1) {
							const resData = res.data;
							const is_novel_content = resData.novel_content.replace(/<\/p>/g, '\n');
							const isContent = is_novel_content.replace(/<p>/g, '');
							const readChapterInfoObj = {
								...resData,
								content: isContent,
								isContent: isContent,
								isStart: resData.lastid == '' ? true : false,
								isEnd: resData.nextid == '' ? true : false,
								chapter: resData.chapterorder,
								title: resData.chaptername,
								isTitle: resData.title
								// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
							};
							// this.readChapterInfoObj = readChapterInfoObj;
							resolve(readChapterInfoObj);
						}
					}).catch((err) => {
						uni.hideLoading();
						console.log(err, '========');
					});
				})

			},
			async loadmoreContent(chapter, callback) {
				console.log(chapter, "loadmoreContent")
				const newNovelReadingContentText = this.novelReadingContentText;
				const newReadDirectoryActive = this.readDirectoryActive;
				const newReadChapterLastid = this.readChapterLastid;
				const newReadChapterNextid = this.readChapterNextid;
				const newReadChapterInfoObj = this.readChapterInfoObj;
				console.log(newReadChapterInfoObj, "loadmoreContent________________")
				let chapterId = '';
				if (chapter < newReadDirectoryActive) {
					chapterId = newReadChapterLastid;
				} else if (chapter > newReadDirectoryActive) {
					chapterId = newReadChapterNextid
				}
				const readChapterInfoObj = await this.isGetBookInfo(chapterId);
				let newReadInfoObj = {};
				if (readChapterInfoObj.chackpay == 1) {
					newReadInfoObj = {
						...readChapterInfoObj
					}
					callback('success', newReadInfoObj);
				}
				if (readChapterInfoObj.chackpay == 2 || readChapterInfoObj.chackpay == 3) {
					const custom = [`slot:test`];
					newReadInfoObj = {
						...readChapterInfoObj,
						custom,
						content: '',
					}
					callback('success', newReadInfoObj);
				}
				const flag = newNovelReadingContentText.some((m) => m.id == readChapterInfoObj.id);
				let listContents = newNovelReadingContentText;
				if (!flag) {
					if (chapter < newReadDirectoryActive) {
						listContents = [newReadInfoObj, ...newNovelReadingContentText];
					} else if (chapter > newReadDirectoryActive) {
						listContents = [...newNovelReadingContentText, newReadInfoObj];
					}
				}
				this.novelReadingContentText = listContents;
			},
			currentChange(pageInfo) {
				const novelReadingContentText = this.novelReadingContentText;
				const chapter = pageInfo.chapter;
				console.log(pageInfo, chapter, pageInfo.nextid, "currentChange")
				this.readDirectoryActive = chapter;
				novelReadingContentText.forEach((m) => {
					if (m.chapter == chapter) {
						this.readChapterLastid = m.lastid;
						this.readChapterNextid = m.nextid;
						this.readChapterInfoObj = m;
						if (m.isvip == 1) {
							this.readChapterFlag = true;
						}
					}
				})
			},
			upperNextChapter(type) {
				// const newNovelReadingContentText = this.novelReadingContentText;
				// const newReadDirectoryActive = this.readDirectoryActive;
				// const newReadChapterInfoObj = this.readChapterInfoObj;
				const newReadChapterLastid = this.readChapterLastid;
				const newReadChapterNextid = this.readChapterNextid;
				// console.log(newReadDirectoryActive, "=========")
				let chapterId = '';
				if (type == 'upper') {
					chapterId = newReadChapterLastid;
				} else if (type == 'next') {
					// if (newReadChapterInfoObj.isvip == 1) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '当前章节未解锁,暂不支持跳章节观看',
					// 	})
					// 	return;
					// }
					chapterId = newReadChapterNextid;
				}
				this.isGetReadChapter(chapterId);
			},
			isBooksObj(booksObj) {
				let newBooksObj = {}
				if (booksObj.chackpay == 1) {
					newBooksObj = {
						...booksObj
					}
				}
				if (booksObj.chackpay == 2 || booksObj.chackpay == 3) {
					const custom = [`slot:test`];
					newBooksObj = {
						...booksObj,
						custom,
						content: '',
					}
				}
				return newBooksObj;
			},
			async isGetReadChapter(chapterId, type) {
				let lastObj = {};
				let nextObj = {};
				let newReadInfoObj = {};
				const newNovelReadingContentText = this.novelReadingContentText;
				const resTemp = await this.isGetBookInfo(chapterId);
				if (resTemp.lastid) {
					const lastIdx = newNovelReadingContentText.findIndex((m) => m.lastid = resTemp.lastid);
					if (lastIdx != -1) {
						newReadInfoObj = newNovelReadingContentText[lastIdx];
					} else {
						const resLastObj = await this.isGetBookInfo(resTemp.lastid);
						lastObj = this.isBooksObj(resLastObj);
					}
				}
				if (resTemp.nextid) {
					const lastIdx = newNovelReadingContentText.findIndex((m) => m.nextid = resTemp.nextid);
					if (lastIdx != -1) {
						nextObj = newNovelReadingContentText[lastIdx];
					} else {
						const resNextObj = await this.isGetBookInfo(resTemp.nextid);
						nextObj = this.isBooksObj(resNextObj);
					}
				}
				newReadInfoObj = this.isBooksObj(resTemp);
				const flag = newNovelReadingContentText.some((m) => m.id == newReadInfoObj.id);
				let listContents = newNovelReadingContentText;
				if (!flag) {
					if (type == 'upper') {
						listContents = [newReadInfoObj, ...newNovelReadingContentText, ];
					} else if (type == 'next') {
						listContents = [...newNovelReadingContentText, newReadInfoObj];
					}
				}else {
					listContents = [lastObj, newReadInfoObj, nextObj]
				}
				this.novelReadingContentText = listContents;
				this.readChapterInfoObj = newReadInfoObj;
				this.$refs.yingbingReadPage.init({
					contents: [lastObj, newReadInfoObj, nextObj],
					start: 0,
					currentChapter: newReadInfoObj.chapter,
				})
				this.readDirectoryActive = newReadInfoObj.chapterorder;
				this.readChapterLastid = newReadInfoObj.lastid;
				this.readChapterNextid = newReadInfoObj.nextid;
			},
			handelDirectoryItem(row) {},
			handelShowStepUp() {
				this.readingPopupshow = !this.readingPopupshow;
				// this.navbarPopupShow = !this.navbarPopupShow;
				this.stepUpPopupShow = false;
			},
			handelDirectoryPopup() {
				// this.directoryPopupShow = true;
				const readChapterInfoObj = this.readChapterInfoObj;
				const readDirectoryActive = this.readDirectoryActive;
				uni.navigateTo({
					url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.isTitle}&c=${readDirectoryActive}`
				})
			},
			toPathLogin() {
				const readChapterInfoObj = this.readChapterInfoObj;
				const readDirectoryActive = this.readDirectoryActive;
				uni.navigateTo({
					url: `/pages/login/login?sid=${readChapterInfoObj.sid}&i=${readChapterInfoObj.id}&c=${readDirectoryActive}&to=1`
				})
			},
			// directoryPopupClose() {
			// 	this.directoryPopupShow = false;
			// },
			handelSteUpPopup() {
				this.stepUpPopupShow = true;
			},
			balanceConfirm() {
				uni.navigateTo({
					url: `/pages/voucherCenter/index`
				})
			},
			handelPurchaseFull() {
				const readChapterInfoObj = this.readChapterInfoObj;
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid: readChapterInfoObj.sid,
					id: readChapterInfoObj.id,
					allprice: readChapterInfoObj.allprice,
				};
				uni.$u.http.post('/buyall', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						if (res.data.status == 2) {
							console.log("购买失败")
						}
					}
				}).catch((err) => {
					uni.hideLoading();
				});
			},
			// 切换页面颜色
			changNovelMainType(type) {
				this.novelMainTypeColor = type;
				this.initPage(type);
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					novelMainTypeColor: type,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 字体减小
			reduceCharactersSize() {
				const newCharactersSize = this.newCharactersSize;
				this.newCharactersSize = newCharactersSize - 1;
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					charactersSize: newCharactersSize - 1,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 字体加大
			addCharactersSize() {
				const newCharactersSize = this.newCharactersSize;
				this.newCharactersSize = newCharactersSize + 1;
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					charactersSize: newCharactersSize + 1,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
			},
			// 恢复默认字体大小
			handelCharactersSize() {
				const defaultCharactersSize = this.defaultCharactersSize;
				this.newCharactersSize = defaultCharactersSize;
				const novelMainObj = myGetStorage('novelMainObj') || '{}';
				const obj = {
					...JSON.parse(novelMainObj),
					charactersSize: defaultCharactersSize,
				}
				mySetStorage('novelMainObj', JSON.stringify(obj));
				this.$refs.yingbingReadPage.refresh();
			},
			handelPageType(type) {
				this.charactersPageType = type;
			},
			// // 目录划到了最上边
			// directoryPopupUpper() {
			// 	const isBooksDirectoryPage = this.booksDirectoryPage;
			// 	const newBooksDirectoryPage = this.newBooksDirectoryPage;
			// 	if (isBooksDirectoryPage > 1 && newBooksDirectoryPage.indexOf(isBooksDirectoryPage) == -1) {
			// 		const booksDirectorySid = this.booksDirectorySid;
			// 		const booksDirectoryPage = isBooksDirectoryPage - 1;
			// 		this.booksDirectoryPage = booksDirectoryPage;
			// 		this.isGetDirectory(booksDirectorySid, booksDirectoryPage, 'upper');
			// 	}
			// },
			// // 目录划到了最下边
			// directoryPopupLower() {
			// 	const isBooksDirectoryPage = this.booksDirectoryPage;
			// 	const booksDirectorySid = this.booksDirectorySid;
			// 	const booksDirectoryPage = isBooksDirectoryPage + 1;
			// 	const newBooksDirectoryPage = [...this.newBooksDirectoryPage, booksDirectoryPage];
			// 	this.newBooksDirectoryPage = newBooksDirectoryPage;
			// 	this.booksDirectoryPage = booksDirectoryPage;
			// 	this.isGetDirectory(booksDirectorySid, booksDirectoryPage, 'lower');
			// },
			isGetDirectory(sid, page, type) {
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid,
					page
				};
				uni.$u.http.post('/getDirectory', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const directory = res.data.directory;
						let columnsLabel = '';
						if (type == 'upper') {
							this.directoryList = [...directory, ...this.directoryList];
						} else if (type == 'lower') {
							this.directoryList = [...this.directoryList, ...directory];
						} else {
							this.directoryList = directory;
						}
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, '========');
				});
			},
			initPage(novelMainTypeColor) {
				const mainBodyBg = setUpReadingColorAll[novelMainTypeColor].mainBodyBg;
				this.navigationBarTitleTextColor = setUpReadingColorAll[novelMainTypeColor].navigationBarTitleTextColor;
				this.mainBodyBg = mainBodyBg;
				this.bodyReadingBg = mainBodyBg;
				this.dialogTextColor = setUpReadingColorAll[novelMainTypeColor].dialogTextColor;
				this.progressBg = setUpReadingColorAll[novelMainTypeColor].progressBg;
				this.progressActiveBg = setUpReadingColorAll[novelMainTypeColor].progressActiveBg;
				this.setUpModeBlack = set_up_mode_black;
				this.dialogATextBg = setUpReadingColorAll[novelMainTypeColor].dialogATextBg;
				this.tabBarTextColor = setUpReadingColorAll[novelMainTypeColor].tabBarTextColor;
				this.novelContentColor = setUpReadingColorAll[novelMainTypeColor].novelContentColor;
				this.navigationBarTitleTextBackColor = setUpReadingColorAll[novelMainTypeColor]
					.navigationBarTitleTextBackColor;
				this.previousChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].previousChapterBbuttonBg;
				this.previousChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor]
					.previousChapterBbuttonTextColor;
				this.nextChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonBg;
				this.nextChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonTextColor;
			},
			rightClick() {
				uni.navigateBack();
			},
			toBookshelf() {
				uni.reLaunch({
					url: `/pages/bookCity/bookCity/index`
				})
			}
		},
		created() {
			const novelMainObj = myGetStorage('novelMainObj') || '{}';
			const novelMainTypeColor = JSON.parse(novelMainObj).novelMainTypeColor || 'F3EFE9';
			const {
				screenHeight = 0, statusBarHeight = 0, windowHeight = 0, devicePixelRatio, windowBottom, windowWidth,
					screenWidth
			} = isGetSystemInfo();
			// this.myData = myData;
			this.novelMainTypeColor = novelMainTypeColor;
			this.newCharactersSize = JSON.parse(novelMainObj).charactersSize || 26;
			this.setUpColorAll = setUpReadingColorAll;
			this.barPopupIcon = {
				'F3EFE9': {
					bookshelf_icon: bookshelf_f3efe,
					directory_icon: directory_f3efe9,
					step_up_icon: step_up_f3efe
				},
				'CCD9E2': {
					bookshelf_icon: bookshelf_ccd9e2,
					directory_icon: directory_ccd9e2,
					step_up_icon: step_up_ccd9e2
				},
				'333333': {
					bookshelf_icon: bookshelf_333,
					directory_icon: directory_333,
					step_up_icon: step_up_333
				}
			};
			this.initPage(novelMainTypeColor);
		},
	};
</script>

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

	.is_images {
		display: block;
		width: 100%;
		height: 100%;
	}

	.mt40rpx {
		margin-top: 40rpx;
	}


	/deep/.balance_con {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;


		.balance_con_rich_text {
			width: 100%;
			height: 80%;
			line-height: 2;
			overflow: hidden;
		}

		.balance_recharge_option {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 414px;
			height: 560rpx;
			background: rgba(243, 239, 233, 0.7);
			filter: blur(10px);
		}

		.balance_recharge {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			width: 100%;
			box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
			height: 360rpx;
			border-radius: 24rpx 24rpx 0 0;
			padding: 32rpx;
			box-sizing: border-box;

			.balance_tips {
				font-size: 30rpx;
			}

			.balance_btn_all {
				margin-top: 32rpx;

				.purchaseFull_popup_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 84rpx;
					font-size: 30rpx;
					color: #fff;
					background: linear-gradient(to top, #FBA676, #E95E32);
					border-radius: 24rpx;
				}
			}
		}
	}

	.novelReading_content /deep/.u-navbar {
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	}

	.novelReading_content /deep/.u-navbar__content__title {
		font-size: 30rpx;
	}

	.novelReading_content /deep/.u-navbar--fixed {
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
	}

	.novelReading_content /deep/.z-paging-content {
		position: relative;
	}

	.novelReading_content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.novelReading_body {
			flex: 1;
			width: 100%;

			.novelReading_main_con {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				// // padding: 32rpx 32rpx;
				// padding-bottom: constant(safe-area-inset-bottom);
				// /* 兼容 iOS 设备 */
				// padding-bottom: env(safe-area-inset-bottom);
				// /* 兼容 iPhone X 及以上设备 */
				// padding-top: var(--status-bar-height);
				// /* 兼容 iOS 设备 */
				// // padding-top:var(–status-bar-height);
				box-sizing: border-box;

				.novelReading_main {
					flex: 1;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					position: relative;

					.novelReading_characters_scroll {
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						box-sizing: border-box;

						.read_chapter {
							padding: 40rpx 0;
						}

						.novelReading_characters_main {
							width: 100%;
						}
					}
				}

				// .reading_schedule_box {
				// 	width: 100%;
				// 	height: 82rpx;
				// 	// padding: 40rpx;
				// 	// box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
				// 	border-radius: 40rpx;
				// 	box-sizing: border-box;
				// }
			}
		}

		.u_popup_all {
			flex: 0;
		}
	}

	.my_tabBar_Reading {
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #d6d2ce;
		// padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
		// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */

		.tabBar_Reading_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.reading_item_icon {
				width: 34rpx;
				height: 34rpx;
			}

			.reading_item_name {
				font-size: 30rpx;
				line-height: 1;
				margin-top: 10rpx;
			}
		}
	}

	.reading_schedule_box {
		width: 100%;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */

		.reading_schedule_body {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			background: transparent;

			._previous_chapter {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 192rpx;
				height: 82rpx;
				font-size: 34rpx;
				line-height: 1;
				border-radius: 12rpx;
			}

			._next_chapter {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 442rpx;
				height: 82rpx;
				font-size: 34rpx;
				line-height: 1;
				border-radius: 12rpx;
			}
		}
	}

	.step_up_box {
		width: 100%;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */

		.step_up_box_body {
			width: 100%;
			padding: 40rpx 24rpx;
			box-sizing: border-box;
			background: transparent;

			.step_up_item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.step_up_item_name {
					line-height: 1;
					font-size: 30rpx;
				}

				.step_up_item_bg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 188rpx;
					height: 74rpx;
					border-radius: 37rpx;
					box-sizing: border-box;
					border: 2rpx solid transparent;
				}

				.step_up_item_text_bg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 188rpx;
					height: 74rpx;
					border-radius: 37rpx;
					box-sizing: border-box;
				}

				.step_up_item_bg.activeBlack {
					border-color: #1a1a1a;
				}

				.step_up_item_bg.activeWhite {
					border-color: #fff;
				}
			}
		}
	}

	// .reading_schedule_slider::v-deep.uni-slider-handle-wrapper {
	// 	height: 60rpx;
	// 	border-radius: 30rpx;

	// 	.uni-slider-track {
	// 		border-radius: 30rpx;
	// 	}
	// }

	.directory_popup_box {
		position: relative;
		width: 560rpx;
		height: 100%;
		box-sizing: border-box;

		.directory_scroll_y {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容 iPhone X 及以上设备 */

			._popup_box_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 120rpx;
				border-bottom: 1rpx solid #f2f2f2;

				._item_name {
					font-size: 32rpx;
					color: #333333;
					line-height: 1;
				}

				._item_name.active {
					color: #ff728f;
				}

				._item_chapter_lock {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>