<template>
	<view>
		<view v-if="style_setting.rank === 1" class="rank rank1" :style="[{'background-image': `url(${style_setting.bg_url})`}, {'background-color': style_setting.bg_color},{'border-bottom-left-radius':style_setting.radius_bottom_left*2+'rpx', 'border-bottom-right-radius':style_setting.radius_bottom_right*2+'rpx', 'border-top-left-radius':style_setting.radius_top_left*2+'rpx', 'border-top-right-radius':style_setting.radius_top_right*2+'rpx'}, style_setting.bg_style === 1 ? {'width':'702rpx','margin':'0 auto'}: null]">
			<view class="menuItem" v-for="(item, key) in menuArray" :key="key" :style="{'width': width,height: style_setting.menuHeight*2+'rpx'}" @click="$jump(item.img_href)">
				<image :src="item.img_url" class="icon_img"></image>
				<text v-if="style_setting.font_show" class="title" :style="{'color': style_setting.font_color}">{{item.title}}</text>
			</view>
		</view>
		<swiper v-else indicator-dots="true" :style="[{'height': style_setting.rank*200+10+'rpx'}, style_setting.bg_style === 1 ? {'width':'702rpx','margin':'0 auto'}: null, {'background-image':`url(${style_setting.bg_url})`}, {'background-color': style_setting.bg_color}, {'border-bottom-left-radius':style_setting.radius_bottom_left*2+'rpx', 'border-bottom-right-radius':style_setting.radius_bottom_right*2+'rpx', 'border-top-left-radius':style_setting.radius_top_left*2+'rpx', 'border-top-right-radius':style_setting.radius_top_right*2+'rpx'}]" class="swiper_view">
			<swiper-item v-for="(item, key) in menuArray" :key="key" class="rank rank1">
				<view class="menuItem" v-for="(val, index) in item" :key="index" :style="{'width': width, height: style_setting.menuHeight*2+'rpx'}" @click="$jump(val.img_href)">
					<image :src="val.img_url" class="icon_img"></image>
					<text v-if="style_setting.font_show" class="title" :style="{'color': style_setting.font_color}">{{val.title}}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			wrapper_props: {
				type: Object
			},
		},
		data() {
			return {
				width: '',
				menuArray: this.wrapper_props.menuList,
				style_setting: this.wrapper_props.style_setting
			}
		},
		mounted() {
			const { rank, arrange } = this.style_setting;
			const width = Math.floor(100/arrange);
			this.width = width + '%';
			if(rank != 1) {
				const rate = rank * arrange;
				let array = [];
				for (var i = 0, j = this.menuArray.length; i < j; i += rate) {
				    array.push(this.menuArray.slice(i, i + rate));
				}
				this.menuArray = array;
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.swiper_view {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.rank {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
	}
	.rank1 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.rank1:after {
		flex: auto;
		content: '';
	}
	.menuItem {
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.icon_img {
		display: block;
		width: 96rpx;
		height: 96rpx;
		margin: 0 auto 20rpx;
	}
	.title {
		font-size: 24rpx;
	}
</style>