<template>
	<div class="mynav" :style="{'background':bg}">
		<swiper :autoplay="false" :style="{'height': height + 'rpx' }">
			<swiper-item v-for="(item, index) in cols" :key="index">
				<view :style="[formatStyle]">
					<u-grid :col="navs.columns" align="left" :border="false">
						<u-grid-item v-for="(c, i) in item" :key="i" class="grid-text" @click="clickHandler(c)">
							<image :src="getIconLink(c.icon)" mode="widthFix" style="width: 64rpx; height: 64rpx;" />
							<text :style="{'color':navs.color}">{{ c.name }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</swiper-item>
		</swiper>
		<template>
			<template v-if="clickItem.ShowType==0">
				<cats v-if="clickItem.ComponentName == 'cats'"></cats>
				<activity v-if="clickItem.ComponentName == 'activity'"></activity>
				<news v-if="clickItem.ComponentName == 'news'"></news>
			</template>
			<template v-else>
				<template v-if="clickItem&&clickItem.TemplateData" v-for="subItem in clickItem.TemplateData">
					<view v-if="subItem.Id == 'image-text'" class="imageText">
						<view v-html="subItem.data.content"></view>
					</view>
					<rubik v-if="subItem.Id == 'rubik'" :ad="subItem.data"></rubik>
				</template>
			</template>
		</template>
	</div>
</template>
<script>
	import cats from "@/components/navpage/category";
	import activity from "@/components/navpage/activity";
	import news from "@/components/navpage/news";
	import rubik from "@/components/rubik/index";
	export default {
		components: {
			cats,
			news,
			activity,
			rubik
		},
		props: ["navs"],
		data() {
			return {
				cols: [],
				formatStyle: "",
				height: 160,
				bg: "",
				clickItem: {}, //当前点击的页面
			};
		},
		created() {
			let tempArray = [];
			this.height = this.navs.rows * this.height;
			this.navs.navs.forEach((x, i) => {
				tempArray.push(x);
				if (
					((i + 1) % (this.navs.columns * this.navs.rows) == 0 ||
						i == this.navs.navs.length - 1) &&
					(i != 0 || this.navs.navs.length == 1)
				) {
					this.cols.push(tempArray);
					tempArray = [];
				}
			});
			if (this.navs.showImg) {
				this.formatStyle = {
					backgroundColor: this.navs.backgroundColor,
					backgroundImage: `url('${this.backgroundPicUrl}');`,
					backgroundPosition: this.navs.position,
					backgroundSize: `${this.navs.backgroundWidth}% ${this.navs.backgroundHeight}%;`,
				};
			} else {
				if (this.navs.backgroundColor.indexOf("#") == -1) {
					this.navs.backgroundColor = "#" + this.navs.backgroundColor;
				}
				this.formatStyle = {
					backgroundColor: this.navs.backgroundColor
				};
			}
			this.bg = this.formatStyle.backgroundColor;
			console.log(this.cols,'colssss');
			if(this.cols&&this.cols.length>0){
				this.clickItem = this.cols[0][0];
			}
		},
		methods: {
			clickHandler(item) {
				this.clickItem={};
				this.$nextTick(function(){
					this.clickItem = item;
				})
			},
		},
	};
</script>

<style>
	.mynva .grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: "#330330";
	}

	.grid-text view {
		background: transparent !important;
	}
</style>
