<template>
	<u-navbar :title="navbarTitle" @rightClick="rightClick" :autoBack="true" :fixed="true" :bgColor="mainBodyBg"
		:titleStyle="{'color':navigationBarTitleTextColor,}" :leftIconColor="navigationBarTitleTextBackColor"
		:shadow="true" :safeAreaInsetTop="true" :placeholder="true">
	</u-navbar>
	<view class="novelReading_content">
		<!-- :refresher-complete-scrollable="true" -->
		<!-- <z-paging ref="paging"  @onRefresh="onRefresh"
			:style="`background:${bodyReadingBg};height:${bodyReadingHeight}px;`" 
			v-model="novelReadingContentText"   @scrolltolower="scrolltolower" > -->

			<!-- 页面内容 -->
			<!-- :style="`height:${bodyReadingHeight}px;`" -->
		<!-- 	<view class="novelReading_body" @tap="handelShowStepUp">
				<view class="novelReading_main">
					<view class="novelReading_characters_main"
						:style="`color:${novelContentColor};font-size:${newCharactersSize}rpx;line-height:${defaultCharactersLineHeight}`"
						v-for="m in novelReadingContentText" :key="m.id" :id="`richText_${m.id}`">
						<rich-text :nodes="m.content" :ref="`richText_${m.id}`"></rich-text>
					</view>
				</view>
			</view>
		</z-paging> -->
		<u-popup :show="tabBarPopupShow" mode="bottom" :overlay="false" zIndex="6">
			<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">
						<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>
		</u-popup>
		<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent">
			<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
				<view style="height:140rpx" />
			</view>
		</u-popup>
		<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5">
			<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>
				<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"
					:style="`height:${directoryPopupHeight}px`" :show-scrollbar="false">
					<view class="_popup_box_item" v-for="m in myData" :key="m.id">
						<view :class="['_item_name', readDirectoryActive == m.id? 'active':''] ">
							{{m.sub}}
						</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>
	<!-- 
		<rich-text id="compute_rich_text" :nodes="computeRichText"
			:style="`color:${novelContentColor};font-size:${newCharactersSize}rpx;line-height:${defaultCharactersLineHeight}`"></rich-text>
		
	</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 {
		isGetSystemInfo
	} from '@/utils/systemInfo.js';
	import {
		myGetStorage,
		mySetStorage
	} from '@/utils/storage/index.js';
	import myData from './data.js'
	export default {
		data() {
			return {
				novelMainTypeColor: '',
				navbarTitle: '小说阅读页面',
				setUpColorAll: {},
				navigationBarTitleTextColor: '',
				mainBodyBg: '',
				navigationBarTitleTextBackColor: '',
				bodyReadingHeight: 0,
				scrollReadingHeight: 0,
				// 内容背景
				bodyReadingBg: '',
				// 底部安全区
				bottomSecureHeight: 0,
				tabBarPopupShow: false,
				readingPopupshow: false,
				stepUpPopupShow: false,
				directoryPopupShow: false,
				// bar 的icon
				barPopupIcon: {},
				dialogTextColor: '',
				progressBg: '',
				progressActiveBg: '',
				setUpModeBlack: '',
				dialogATextBg: '',
				novelContentColor: '',
				// 目录信息
				booksDirectorySid: '2387',
				booksDirectoryPage: 1,
				newBooksDirectoryPage: [],
				directoryList: [],
				directoryPopupHeight: 0,
				// 小说信息
				novelReadingContentText: [],
				defaultCharactersSize: 46,
				newCharactersSize: 46,
				defaultCharactersLineHeight: 2,
				readDirectoryActive: '',
				myData: [],
				novelSwiperCurrent: 0,
				computeRichText: '',
				isScrollTop: 0
			}
		},
		onLoad() {

		},
		onShow() {
			const booksDirectorySid = this.booksDirectorySid;
			const booksDirectoryPage = this.booksDirectoryPage;
			const newBooksDirectoryPage = [...this.newBooksDirectoryPage, booksDirectoryPage];
			this.newBooksDirectoryPage = newBooksDirectoryPage;
			this.isGetDirectory(booksDirectorySid, booksDirectoryPage);
			this.isGetUserRead()
		},
		methods: {
			isGetUserRead() {
				this.readDirectoryActive = '1';
				this.isGetBookInfo()
			},
			isGetBookInfo() {
				const readDirectoryActive = this.readDirectoryActive;
				const bodyReadingHeight = this.bodyReadingHeight;
				const novelReadingContentText = this.myData[readDirectoryActive];
				// this.computeRichText = novelReadingContentText.content
				this.$nextTick(() => {
					this.$refs.paging.complete([novelReadingContentText]);
				})
				
				// const query = uni.createSelectorQuery().in(this);
				// this.$nextTick(() => {
				// 	query.select(`#compute_rich_text`).boundingClientRect(data => {
				// 		console.log(data.height / bodyReadingHeight, "============")
				// 		const swiperItemHeightObj = [{
				// 			...novelReadingContentText,
				// 			swiperItemHeight: data.height,
				// 			swiperItemPage: parseInt(data.height / bodyReadingHeight)
				// 		}]
				// 		this.novelReadingContentText = [...this.novelReadingContentText, ...
				// 			swiperItemHeightObj
				// 		];
				// 		console.log(this.novelReadingContentText, "=========")
				// 	}).exec()
				// })
				// 
				// this.novelReadingContentText = [novelReadingContentText];
				// this.$nextTick(() => {query.select(`.novelReading_main #richText_${readDirectoryActive}`).boundingClientRect(
				// this.$nextTick(() => {
				// 	query.select(`#compute_rich_text`).boundingClientRect(
				// 		data => {
				// 			// const swiperItemHeightObj = {
				// 			// 	...this.swiperItemHeightObj,
				// 			// 	id: readDirectoryActive,
				// 			// 	swiperItemHeight: data.height,
				// 			// 	swiperItemPage: data.height / bodyReadingHeight
				// 			// }
				// 			// this.swiperItemHeightObj = {
				// 			// 	...swiperItemHeightObj
				// 			// };
				// 			console.log(data.height, "==========")
				// 			setTimeout(() => {
				// 				this.isScrollTop = parseInt(data.height) - 8632;
				// 				// this.isScrollTop = 0;
				// 				this.novelReadingContentText = [this.myData[0], ...this
				// 					.novelReadingContentText
				// 				];
				// 			}, 2000)
				// 		}).exec()
				// })
				// setTimeout(() => {
				// 	this.novelReadingContentText = [this.myData[0], ...this.novelReadingContentText];
				// }, 1000)
			},
			onRefresh() {
				console.log("refresherTouchendrefresherTouchend")
				this.$refs.paging.complete([this.myData[0]]);
				// setTimeout(() => {
				// 	this.novelReadingContentText = [this.myData[0], ...this.novelReadingContentText];
				// }, 1000)
			},
			// scrolltolower() {
			// 	console.log("666666666")
			// 	this.$refs.paging.complete([this.myData[2]]);
			// },
			// charactersUpper() {
			// 	console.log("ooooooooooooooo")
			// },
			handelShowStepUp() {
				this.tabBarPopupShow = !this.tabBarPopupShow;
				this.readingPopupshow = !this.readingPopupshow;
				this.stepUpPopupShow = false;
			},
			handelDirectoryPopup() {
				this.directoryPopupShow = true;
			},
			directoryPopupClose() {
				this.directoryPopupShow = false;
			},
			handelSteUpPopup() {
				this.stepUpPopupShow = true;
			},
			tabBarPopupClose() {
				this.tabBarPopupShow = false;
			},
			changNovelMainType(type) {
				this.novelMainTypeColor = type;
				this.initPage(type);
				mySetStorage('novelMainTypeColor', type);
			},
			reduceCharactersSize() {
				const newCharactersSize = this.newCharactersSize;
				this.newCharactersSize = newCharactersSize - 2;
			},
			addCharactersSize() {
				const newCharactersSize = this.newCharactersSize;
				this.newCharactersSize = newCharactersSize + 2;
			},
			handelCharactersSize() {
				const defaultCharactersSize = this.defaultCharactersSize;
				this.newCharactersSize = defaultCharactersSize;
			},
			// 目录划到了最上边
			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,
					// startOrder,
				}
				uni.$u.http.post('/getDirectory', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const directory = res.data.directory;
						// const stage = res.data.stage;
						// const directoryCount = res.data.directory_count;
						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;
			},
			rightClick() {
				uni.navigateBack()
			},
		},
		created() {
			const novelMainTypeColor = myGetStorage('novelMainTypeColor') || 'F3EFE9';
			const {
				screenHeight = 0, statusBarHeight = 0, windowHeight = 0,
					devicePixelRatio, windowBottom
			} = isGetSystemInfo();
			console.log(isGetSystemInfo(), "-----------");
			console.log(myData, "myDatamyData")
			this.myData = myData;
			this.novelMainTypeColor = novelMainTypeColor;
			this.bodyReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
			this.scrollReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 38;
			// #ifdef APP-PLUS
			this.directoryPopupHeight = screenHeight - statusBarHeight;
			// #endif
			// #ifdef H5 || MP-WEIXIN
			this.directoryPopupHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
			// #endif

			this.bottomSecureHeight = screenHeight - windowHeight;
			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;
	}

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

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

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

	#compute_rich_text {
		position: fixed;
		top: 1500px;
	}

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

		.novelReading_body {
			width: 100%;

			// height: 100%;


			.novelReading_main_swiper {
				width: 100%;
				height: 100%;

				.swiper_item_con {
					width: 100%;
					height: 100%;
				}
			}

			.novelReading_main {
				width: 100%;
				padding: 32rpx 32rpx;
				box-sizing: border-box;
				position: relative;

				.novelReading_characters_scroll {
					width: 100%;
					// padding: 32rpx 32rpx;
					// box-sizing: border-box;

					.novelReading_characters_main {
						width: 100%;
						// height: 100%;
					}
				}
			}
		}
	}

	.my_tabBar_Reading {
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #d6d2ce;

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

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

			.schedule_body_text {
				font-size: 34rpx;
				line-height: 1;
			}

			.reading_schedule_slider {
				width: 430rpx;
				// height: 60rpx;

				.slider {
					margin-top: 0;
					margin-bottom: 0;
				}
			}
		}
	}

	.step_up_box {
		width: 100%;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;

		.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 {
		display: flex;
		align-items: flex-end;
		width: 560rpx;
		height: 100%;
		padding: 32rpx;
		box-sizing: border-box;

		._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>