<template>
	<uni-popup  @maskClick="emits('Close')" :animation="false" mask-background-color="rgba(0,0,0,0.5)" ref="catalog"  background-color="#fff"  @change="onChange">
		
		<view style="display: flex;
		align-items: center;padding-top: 5%;padding-left: 5%;"  :style="{'backgroundColor':db_color}">
			<image :src="book_data.book_cover" style="width: 100rpx;height: 150rpx;"></image>
			<view style="margin-left: 50rpx;">
				<view style="font-size: 1.5ex;" :style="{'color':font_color}" >{{book_data.book_name}}</view>
				<view style="font-size: 1.5ex; margin-top: 50rpx;" :style="{'color':font_color}" >{{book_data.author_name}}</view>
			</view>	
		</view>
		<view style="display: flex;
		align-items: center;padding-top: 5%;" :style="{'backgroundColor':db_color}">
			<view :style="{'color':font_color,'fontSize':'1.5ex','paddingLeft':'10%','width':'65%'}">{{tools.book_status_title(book_data)}}</view>
			<view @click="onClickSort" :style="{'color':font_color,'fontSize':'1.5ex'}">
				<image :src="getSortImgRes()" style="width: 135rpx;height: 54rpx;"></image>
				<!-- <text  :style="{'color':font_color,'width':'80%'}">{{ sortName }} </text> -->
			</view>
		</view>
		<view :style="{'backgroundColor':db_color,'width':'100%','padding-top': '5%'}">
			<view style="border-bottom: #eee solid 1px;display: flex;
			align-items: center;">
			</view>
		</view>

		<view
			:style="{'backgroundColor':db_color,'paddingLeft':'10%','paddingRight':'10%','padding':'5%'}"
			@touchend.stop>
			<view>
			<!-- 	<movable-area>
					<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
						<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
						<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
					</movable-view>
				</movable-area> -->
				<scroll-view
					ref="scrollView"
					scroll-y="true"
					:style="{
						height: scrollHeight + 'px',
						position: 'relative',
						zIndex: 1
					}"
					@scroll="handleScroll"
					:scroll-top="scrollTop"
					:show-scrollbar="false"
				>
				<!-- 	<view
						class="scroll-bar"
						:style="{
							height: localHeight + 'px'
						}"
					></view> -->
					<view
						class="list"
						:style="{
							transform: `translateY(${offset}px)`
						}"
					>
					<view v-for="(item, index) in visibleData" :key="item.id">
						<!-- <slot :item="item" :active="active"></slot> -->
						<view :style="{'widows':'100%'}" class="directory-listItem" @click="clickChar(item)">
							<text  class="ellipsis" :style="{'color':isCurReadChapter(item)?config.read_config.RedColor:font_color,'width':'80%'}">{{ item.name }} </text>
							<image v-if="isUnLock(item)" src="../../static/imgs/read/img_lock.png" style="width: 25rpx;height: 25rpx;;"></image>
						</view>
					</view>
					</view>
				</scroll-view>
			</view>
			<!-- <button @click="onTest()"> 跳转第100章</button> -->
		</view>
	</uni-popup>
	
	
</template>

<script setup lang="ts">
	import { ref,onMounted,computed, nextTick} from 'vue';
	import { ReadSetting } from '../../stores/readSetting';
	import { tools } from '../../framework/tools';
	import { book_item_data, chapter_list_item } from '../../data/data';
	import { UserStatus } from '../../stores/userStatusManager';
	import { config } from '../../config/config';
	// const {items,remain,size,active,scrollHeight} = defineProps(['items','remain','size','active','scrollHeight'])
	const {items,remain,size,scrollHeight,unLockChapterList,active} =defineProps({
		  items: {
		    type: Array,
		    required: true,
		    default: []
		  },
		  remain: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		  size: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		  active: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		  scrollHeight: {
		    type: Number,
		    required: true,
		    default: 0
		  },
		  unLockChapterList:{
			  type:Array,
			  required: true,
			  default: []
		  }
		});
	const emits = defineEmits(['clickChar','Close'])
	let start = ref(0)
	let end = ref(0)
	let offset = ref(0)
	let y = ref(0)
	let sortStatus = 1;
	let sortName = ref('倒序')
	let sortImg = ref('../../static/imgs/read/img_lock.png')
	let mode = ref(ReadSetting().getReadSetting().readMode)
	let sortItems = ref(items)
	const catalog = ref(null)
	let first_join = ref(true)
	let first_chapter_num = ref(100)
	
	function getSortImgRes(){
		if(sortStatus==1){
			if(mode.value == config.read_config.readMode.Dark){
				return '../../static/imgs/read/setting/img_read_dark_dx.png'
			}
			return '../../static/imgs/read/setting/img_read_dx.png'
		}else{
			if(mode.value == config.read_config.readMode.Dark){
				return '../../static/imgs/read/setting/img_read_dark_zx.png'
			}
			return '../../static/imgs/read/setting/img_read_zx.png'
		}

	}
	
	onMounted(()=>{
		const type = 'bottom'
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		catalog.value.open(type)
	})
	
	let preCount = computed(()=>{
		return Math.min(start.value, remain);
	})
	
	let nextCount = computed(()=>{
		return Math.min(sortItems.value.length - end.value, remain);
	})
	
	let visibleData = computed(()=>{
		const t_start = start.value - preCount.value;
		const t_end = end.value + nextCount.value;
		// console.log("visibleData",t_start,t_end)
		return sortItems.value.slice(t_start, t_end);
		// return sortItems.value.slice(t_start, t_end);
	})
	
	let localHeight = computed(()=>{
		return sortItems.value.length * size;
	})
	
	function clickChar(item){
		emits('clickChar',item)
	}
	
	function change(e){
		if (e.detail.source !== 'touch') {
			return;
		}
		let y = e.detail.y;
		let scroll = (y / (scrollHeight - 40)) * (localHeight.value - scrollHeight);
		scroll = scroll < 0 ? 0 : scroll;
		scrollTop.value = scroll;
	}
	
	let default_scroll = ref(0)
	
	let scrollTop = ref(0)
	function handleScroll(ev){
		
		const t_scrollTop = default_scroll.value+ev.detail.scrollTop;
		
		y.value = (t_scrollTop / (localHeight.value - scrollHeight)) * (scrollHeight - 40);
		// 开始位置
		const t_start = Math.floor(t_scrollTop / size);
		// console.log("t_start",t_start)
		start.value = start.value < 0 ? 0 : t_start;
		// 结束位置
		end.value = t_start +remain;
		// 计算偏移
		const t_offset = t_scrollTop - (t_scrollTop % size) - preCount.value * size;
		offset.value = t_offset < 0 ? 0 : t_offset;
		
		// console.log('scrollTop',scrollTop,start.value,end.value,offset.value,y.value)
	}
	//
	function onChange(e){
		if(e.show==false){
			emits('Close')
		}
	}
	
	let font_color = ref(tools.getFontColorByMode(ReadSetting().getReadSetting().readMode))
	let db_color = ref(tools.getDbColorByMode(ReadSetting().getReadSetting().readMode))
	let book_data:book_item_data = UserStatus().getUserSelectBook()
	
	function onClickSort(){
		if(sortStatus==1){
			sortStatus = 2;
			sortName.value = "正序"
		}else{
			sortStatus = 1;
			sortName.value = "倒序"
		}
		sortItems.value = []
		start.value = 0
		end.value = 0	
		offset.value = 0
		scrollTop.value = 0
		y.value = 0
		sortItems.value = items
		nextTick(()=>{
			if(sortStatus==1){
				sortItems.value = sortItems.value.sort((a:any,b:any)=>{
					return a.id - b.id
				})
			}else{
				sortItems.value = sortItems.value.sort((a:any,b:any)=>{
					return b.id - a.id
				})
			}
		})
	}
	const scrollView = ref(null)
	function onTest(){
		// console.log("scroll_view",scrollView)
		//   if (scrollView.value) {
		// 		scrollView.value.scrollTop = 100; // 设置滚动位置
		//   } else {
		// 		console.error('ScrollView 组件还未准备好，无法设置 scrollTop');
		//   }
		 // scroll_view.value.scrollTop = 100;
			// scrollTop.value = size * 100
		// let visibleData = computed(()=>{
		// 	const t_start = start.value - preCount.value;
		// 	const t_end = end.value + nextCount.value;
		// 	// console.log("visibleData",t_start,t_end)
		// 	return sortItems.value.slice(t_start, t_end);
		// 	// return sortItems.value.slice(t_start, t_end);
		// })
		// start.value  = 99;
		// end.value  = 115
		let scroll = (first_chapter_num.value*size)-size
		// console.log("scroll",scroll)
		handleScroll({detail:{scrollTop:scroll}})
		// default_scroll.value = scroll
		// handleScroll({detail:{scrollTop:500}})
	}
	
	// console.log("unLockChapterList",active)
	function isUnLock(item:chapter_list_item){
		if(item.pay_type==config.chapter_pay_type.BU_SHOU_FEI){
			return false
		}
		return !unLockChapterList.includes(item.id)
	}
	
	function isCurReadChapter(item:chapter_list_item){
		return active==item.id
	}
	
</script>

<style scoped>
	.list {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.action-bar-box {
		padding: 3px;
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		right: 0;
		background-color: transparent;
		border-radius: 10rpx;
		box-shadow: 0 0 5px #000;
		width: 20px;
		height: 40px;
		z-index: 2;
	}
	.directory-listItem {
		display: flex;
		align-items: center;
		padding-left: 10px;
		height: 40px;
		font-size: 14px;
		/* border-bottom: #eee solid 1px; */
	}
	.active {
		color: red;
	}
/* 	.directory {
		position: fixed;
		display: flex;
		flex-flow: column;
		width: 100%;
		height: 30%;
	} */
	.scroll-view {
	  scrollbar-width: none; /* 对于微信小程序等平台，可以使用scrollbar-width设置为none */
	}
	.scroll-view {
	  over-scroll: false;
	}
	.scroll-view::-webkit-scrollbar {
	  display: none; /* 隐藏滚动条 */
	}
	.ellipsis {
	  white-space: nowrap; /* 防止文本换行 */
	  overflow: hidden; /* 隐藏超出容器的文本 */
	  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
	  width: 100%; /* 或其他你需要的宽度 */
	}
</style>