<template>
	<view class="bookCity_home_content">
		<view class="my_x_skeleton" v-if="skeletonLoading">
			<x-skeleton type="banner" :loading="skeletonLoading" class="step_swiper_skeleton"></x-skeleton>
			<x-skeleton type="menu" :loading="skeletonLoading" class="step_operate_skeleton"
				:configs="{'gridRows': 1,'gridColumns':4, 'textWidth': '40%'}"></x-skeleton>
			<x-skeleton type="waterfall" :loading="skeletonLoading" class="step_explosive_skeleton"
				:configs="{'gridRows': 1,'gridColumns':3, 'headWidth': '100%', 'headHeight':'266rpx','headBorderRadius':'8rpx','textRows':2 ,'textRowsGap':'20rpx','textWidth':['100%','80%']}"></x-skeleton>
			<x-skeleton type="menu" :loading="skeletonLoading" class="step_ranking_skeleton"
				:configs="{'gridRows': 1,'gridColumns':4, 'headWidth': '100%', 'headHeight':'70rpx','textShow':false,'headBorderRadius':'8rpx','gridColumnsGap':'20rpx','padding':'15px 15px 0 15px'}"></x-skeleton>
			<x-skeleton type="menu" :loading="skeletonLoading" class="step_ranking_skeleton"
				:configs="{'gridRows': 2,'gridColumns':2, 'headWidth': '130rpx', 'headHeight':'180rpx','headBorderRadius':'8rpx','gridColumnsGap':'20rpx','itemDirection':'row', 'textRows':3,'textWidth':['100%','80%','60%'],'textRowsGap':'20rpx','gridRowsGap':'32rpx'}"></x-skeleton>
			<x-skeleton type="menu" :loading="skeletonLoading" class="step_ranking_skeleton"
				:configs="{'gridRows': 1,'gridColumns':1, 'headWidth': '100%', 'headHeight':'82rpx','headBorderRadius':'8rpx','textShow':false,'padding':'0 15px 15px  15px'}"></x-skeleton>
		</view>
		<view class="home_content_box" v-if="!skeletonLoading">
			<!-- 焦点图 -->
			<view class="step_swiper">
				<!-- style="height: 260rpx;" -->
				<u-swiper :list="swiperList" keyName="cover" indicator indicatorMode="line" circular></u-swiper>
			</view>
			<!--九宫格操作列表 -->
			<view class="step_operate">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(m,listIndex) in list" :key="listIndex" @click="toGridItemPath(m)">
						<u-icon :name="m.name" :size="34" />
						<text class="grid-text">{{m.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 全网火爆 -->
			<view class="step_explosive">
				<ExplosiveList :dataList="explosiveDataList" />
			</view>
			<view style="width: 100%">
				<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
			</view>
			<!-- 榜单 -->
			<view class="step_ranking_list">
				<RankingList :dataList="rankingDataList" @handelRankingList="handelRankingList"
					:headerListActive="headerListActive" />
			</view>
			<view style="width: 100%">
				<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
			</view>
			<!-- 人气作品 -->
			<view class="step_popularity_list">
				<PopularityList isTitle="人气作品" :dataList="popularityDataList" />
			</view>
			<view style="width: 100%">
				<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
			</view>
			<!-- 原创优选 -->
			<view class="step_original_list">
				<OriginalList :dataList="originalDataList" />
			</view>
			<view style="width: 100%">
				<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
			</view>
			<!-- 书友推荐 -->
			<view class="step_recommend_list">
				<RecommendList :dataList="recommendDataList" />
			</view>
			<view style="width: 100%">
				<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
			</view>
			<!-- 人气作品 -->
			<view class="step_popularity_list step_more_list ">
				<PopularityList isTitle="更多书籍" :dataList="moreBooksList" />
			</view>
			<!-- 底部 -->
			<!-- 	<view class="step_footer">
				<CommFooter />
			</view> -->
		</view>
	</view>
</template>

<script>
	import complete from '@/static/images/bookCity/complete.png';
	import new_book from '@/static/images/bookCity/new_book.png';
	import recharge from '@/static/images/bookCity/recharge.png';
	import the_charts from '@/static/images/bookCity/the_charts.png';
	import RankingList from './rankingList.vue'
	import PopularityList from './popularityList.vue'
	import ExplosiveList from './explosiveList.vue'
	import OriginalList from './originalList.vue'
	import RecommendList from './recommendList.vue'
	import CommFooter from '@/components/commFooter/index.vue'
	import config from '@/config/index';
	import {
		baseUrlImage
	} from '@/utils/utils'
	import {
		myGetStorage,
	} from '@/utils/storage/index.js';

	export default {
		components: {
			RankingList,
			PopularityList,
			ExplosiveList,
			OriginalList,
			RecommendList,
			CommFooter,
		},
		props: {
			explosiveDataList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			rankingDataList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			headerListActive: {
				type: String,
				default: ''
			},
			popularityDataList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			originalDataList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			recommendDataList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			moreBooksList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			swiperList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			skeletonLoading:{
				type: Boolean,
				default: () => {
					return true;
				}
			}
		},
		data() {
			return {
				baseUrl: config.baseUrl,
				list: [{
						name: the_charts,
						title: '榜单',
						toPath: '/pages/booksTheCharts/index'
					},
					{
						name: complete,
						title: '完本',
						toPath: '/pages/booksListAll/index',
						type: 'complete'
					},
					{
						name: new_book,
						title: '新书',
						toPath: '/pages/booksListAll/index',
						type: 'new_book'
					},
					{
						name: recharge,
						title: '充值',
						toPath: '/pages/voucherCenter/index',
						type: 'recharge'
					},
				],
			}
		},
		methods: {
			toGridItemPath(row) {
				const token = myGetStorage('token');
				if (row.type == 'recharge' && !token) {
					uni.navigateTo({
						url: `/pages/login/login?to=3`
					})
				} else if (row.toPath) {
					uni.navigateTo({
						url: `${row.toPath}?titleType=${row.type}`
					})
				}
			},
			handelRankingList(event) {
				this.$emit('handelRankingList', event)
				// const id = event.currentTarget.dataset.id;
				// this.headerListActive = id;
				// this.rankingDataList = this.rankingDataObj[id];
			},
		}
	}
</script>

<style lang="scss">
	.bookCity_home_content {
		// padding: 0 0 150rpx;
		width: 100%;
		box-sizing: border-box;

		.my_x_skeleton {
			.step_swiper_skeleton {
				/deep/.x-skeleton__wrapper__head {
					height: 260rpx !important;
				}
			}

			.step_operate_skeleton {
				/deep/.x-skeleton__wrapper__text {
					display: flex;
					justify-content: center;
				}
			}
		}

		.home_content_box {
			.step_swiper {
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.step_operate {
				width: 100%;
				padding: 40rpx 32rpx;
				box-sizing: border-box;

				.grid-text {
					font-size: 30rpx;
					color: #222222;
				}
			}

			.step_explosive {
				width: 100%;
				padding: 0 32rpx 32rpx;
				box-sizing: border-box;
			}

			.step_ranking_list {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
			}

			.step_popularity_list {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
			}

			.step_original_list {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
			}

			.step_recommend_list {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
			}

			.step_footer {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.step_more_list {
				margin-bottom: 32rpx;
			}
		}

	}
</style>