<template>
	<view class="">
		<swiper :style="{'height': height + 'rpx'}" @change="$emit('change', e)">
			<swiper-item v-for="(item, index) in list">
				<view class="classify-box">
					<view v-for="(classify, index) in item" :key="index"
						:style="{'margin-bottom': index > 4? '0' : '36rpx'}" class="nav-bar-item"
						@click="$emit('click', classify)">
						<image class="w-80 h-80 mb-17 br-14" :src="classify.image"/>
						<view class="fs-24">{{ classify.title }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view v-if="dotShow" class="swiper-dot">
			<view v-for="(item, index) in list" class="item"
				:class="{'activedot': current === index}"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * classifySwiper 首页分类轮播组件
	 * @property {String}			height 		  组件高度，swiper规定必须设置一个高度
	 * @property {String}			classifyList  后端返回的数据源
	 * @property {String}			current 	  当前轮播的页码
	 * @property {String}			dotShow 	  是否显示底部滑块，默认显示
	 */
export default {
	props: {
		height: {
			type: Number | String,
			default: 340
		},
		classifyList: {
			type: Array,
			default: []
		},
		current: {
			type: Number | String,
			default: 0
		},
		dotShow: {
			type: Boolean,
			default: true
		}
	},
	data () {
  		return {
			list: []
    	}
  	},
	created() {
		this.init()
	},
  	methods: {
		// 初始化后端返回的数组为二维数组
		init(){
			const swiperCount = Math.ceil(this.classifyList.length / 10); // 计算需要多少个swiper
			const result = [];
			for (let i = 0; i < swiperCount; i++) {
				const start = i * 10;
				const end = Math.min(start + 10, this.classifyList.length);
				result.push(this.classifyList.slice(start, end)); // 切片获取当前swiper的数据范围  
			}
			// console.log(result)
			this.list = result
		}
  	}
}
</script>

<style scoped>
	.classify-box {
		display: flex;
		flex-wrap: wrap;
	}
	
	.nav-bar-item {
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.swiper-dot {
		display: flex;
		justify-content: center;
	}
	
	.swiper-dot>.item {
		width: 28rpx;
		height: 3rpx;
		background-color: #ECECEC;
		border-radius: 3rpx;
	}
	
	.activedot {
		background-color: #494949 !important;
	}
</style>
