<template>
	<view>
		<view class="book-H-3-content">
			<view class="title-content">
				<view class="title-content__title" >{{templateData.name}}</view>
				<view class="title-content__change" @click="clickChange">
					<image src="../../../static/imgs/public/img_change.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="book-content">
				<view class="book-content__box" v-for="(item,index) in dataList[page_index]" :key="index" @click="clickBook(item)">
					<view class="book-content__box__book-cover">
						<image class="image" :src="item.book_cover" mode="aspectFill"></image>
					</view>
					<view class="book-content__box__book-name">{{ item.book_name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { book_item_data } from '../../../data/data';
	const props = defineProps({
		templateData: Object,
		dataList: Array,
	})
	const emits = defineEmits(['clickBook'])
	
	let page_index = ref(0)
	
	function clickChange() {
		page_index.value += 1
		if(page_index.value >= props.dataList.length) {
			page_index.value = 0
		}
	}
	
	function clickBook(data:book_item_data) {
		emits('clickBook',data)
	}
	
	// 传值并观察-例子
	// import { watch } from 'vue';
	// const props = defineProps({
	// 	dataList: Array,
	// })
	// watch(()=>props.dataList, (new_v,old_v)=>{
	//     console.log('dataList-观察    新值:',new_v,'旧值:',old_v)
	// },{immediate:true})
	
</script>


<style lang="scss">
	.book-H-3-content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		margin: 0px 20rpx;
		margin-bottom: 30rpx;
		padding: 20rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		
		.title-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
			margin-left: 30rpx;
			// background-color: red;
			
			&__title {
				font-size: 20px;
				font-weight: 500;
			}
			&__change {
				display: flex;
				flex-shrink: 0;
				width: 114px;
				height: 34px;
				align-items: center;
				// background-color: green;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.book-content{
			display: flex;
			flex: 1;
			box-sizing: border-box;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			margin: 0px 10rpx;
			// background-color: red;
			
			&__box{
				width: 33.3%;
				justify-content: center;
				margin-bottom: 20rpx;
				overflow: hidden;
				// background-color: greenyellow;
								
				&__book-cover{
					flex-shrink: 0;
					display: flex;
					box-sizing: border-box;
					margin: 20rpx;
					height: 240rpx;
					.image{
						width: 100%;
						height: 100%;
						// border-radius: 20rpx;
						// background-color: orange;
					}
				}
				&__book-name {
					font-size: 16px;
					margin: 0px 20rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		
		.bottom{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			// background-color: red;
			margin: 40rpx 0;
			
			&__icons {
			}
			
			&__text{
				margin-left: 20rpx;
				font-size: 18px;
				font-weight: 500;
				color: #3D3D3D;
				// background-color: purple;
			}	
		}
	}
	
</style>