<template>
	<view class="specialOperations">
		<view  class="fixedheader">
			<headers :themeType="true" :showBack="true">
				<view class="headerName">
					党建引领
				</view>	
			</headers>
		</view>
		<view class="sp-menu">
			<!-- <view class="sp-menu" v-if="menuList.length > 0"> -->
			<!-- <view class="menu-item" @click="handleNavigateTo(item.path)" v-for="(item,i) in menuList">
				<view class="item-icon">
					<image :src="'/static/specialOperations/'+item.iconImg"></image>
				</view>
				<view class="item-text">
					<text>{{item.menuName}}</text>
				</view>
			</view> -->
			<view class="menu-item" v-for="item in dataList" :key="item.id" @click="handleNavigateTo(item.id)">
				<view class="item-icon">
					<image :src="item.urlImage"></image>
				</view>
				<view class="item-text">
					<text>{{item.appName}}</text>
				</view>
			</view>
			<!-- 			<view class="menu-item" @click="handleNavigateTo(2)">
				<view class="item-icon">
					<image src="@/static/bthgIcon/thematicActivitie.png"></image>
				</view>
				<view class="item-text">
					<text>专题活动</text>
				</view>
			</view> -->

		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../../components/headers/headers.vue'
	import publicizReport from "@/static/bthgIcon/publicizReport.png"
	import thematicActivitie from "@/static/bthgIcon/thematicActivitie.png"
	import learningWorld from "@/static/bthgIcon/learningWorld.png"
	import constructionActivitie from "@/static/bthgIcon/constructionActivitie.png"
	import constructionScheme from "@/static/bthgIcon/constructionScheme.png"
	import constructionAgreement from "@/static/bthgIcon/constructionAgreement.png"
	import trademark from "@/static/bthgIcon/trademark.png"
	import pioneerModel from "@/static/bthgIcon/pioneerModel.png"
	import demonstrationPost from "@/static/bthgIcon/demonstrationPost.png"
	import attackGroup from "@/static/bthgIcon/attackGroup.png"
	import organizationalBuild from "@/static/bthgIcon/organizationalBuild.png"
	import promotionVedio from "@/static/bthgIcon/promotionVedio.png"


	export default {
		navigationBarTitleText: '页面标题',
		data() {
			return {
				userInfo: {},
				moduleList: [],
				menuList: [],
				haveModuleList: [],
				dataList: [{
					id: 1,
					urlImage: publicizReport,
					appName: "宣传报道",
					appPath: '/project/guidancePartyBuilding/publicizReport'
				}, {
					id: 2,
					urlImage: thematicActivitie,
					appName: "专题活动",
					appPath: '/project/guidancePartyBuilding/learningWorld'
				}, {
					id: 3,
					urlImage: learningWorld,
					appName: "学习园地",
					appPath: '/project/guidancePartyBuilding/thematicActivitie'
				}, {
					id: 4,
					urlImage: constructionActivitie,
					appName: "党建共建活动纪实",
					appPath: '/project/guidancePartyBuilding/constructionScheme'
				}, {
					id: 5,
					urlImage: constructionScheme,
					appName: "党建共建方案",
					appPath: '/project/guidancePartyBuilding/constructionActivitie'
				}, {
					id: 6,
					urlImage: constructionAgreement,
					appName: "党建共建协议",
					appPath: '/project/guidancePartyBuilding/constructionAgreement'
				}, {
					id: 7,
					urlImage: trademark,
					appName: "党建品牌",
					appPath: '/project/guidancePartyBuilding/trademark'
				}, {
					id: 8,
					urlImage: demonstrationPost,
					appName: "党员示范岗",
					appPath: '/project/guidancePartyBuilding/demonstrationPost'
				}, {
					id: 9,
					urlImage: pioneerModel,
					appName: "先锋模范",
					appPath: '/project/guidancePartyBuilding/pioneerModel'
				}, {
					id: 10,
					urlImage: attackGroup,
					appName: "攻坚小组",
					appPath: '/project/guidancePartyBuilding/attackGroup'
				}, {
					id: 11,
					urlImage: organizationalBuild,
					appName: "组织建设",
					appPath: '/project/guidancePartyBuilding/organizationalBuild'
				}, {
					id: 12,
					urlImage: promotionVedio,
					appName: "宣传视频",
					appPath: '/project/guidancePartyBuilding/promotionVedio'
				}]
			};
		},
		onReady() {

		},
		created() {

		},
		mounted() {

		},
		onLoad() {
			this.haveModuleList = uni.getStorageSync("haveModuleList");
			this.dataListUp();
		},
		methods: {
			dataListUp() {
				console.log(this.dataList)
				// this.dataList = this.dataList.filter(item => {
				// 	const res = this.$recursiveSearch(this.haveModuleList, item.appPath)
				// 	console.log(5555555, res);
				// 	// debugger
				// 	return res ? true : false
				// });
				this.dataList = ['/project/guidancePartyBuilding/homePageBuilding'].some(item => {
					const res = this.$recursiveSearch(this.haveModuleList, item)
					console.log(5555555, res);
					// debugger
					return res ? true : false
				}) ? this.dataList : [];
				
				console.log(this.haveModuleList)
			},
			handleNavigateTo(val) {
				if (val === 1) uni.navigateTo({
					url: "./publicizReport/index"
				})
				if (val === 2) uni.navigateTo({
					url: "./thematicActivitie/index"
				})
				if (val === 3) uni.navigateTo({
					url: "./learningWorld/index"
				})
				if (val === 4) uni.navigateTo({
					url: "./constructionActivitie/index"
				})
				if (val === 5) uni.navigateTo({
					url: "./constructionScheme/index"
				})
				if (val === 6) uni.navigateTo({
					url: "./constructionAgreement/index"
				})
				if (val === 7) uni.navigateTo({
					url: "./trademark/index"
				})
				if (val === 8) uni.navigateTo({
					url: "./demonstrationPost/index"
				})
				if (val === 9) uni.navigateTo({
					url: "./pioneerModel/index"
				})
				if (val === 10) uni.navigateTo({
					url: "./attackGroup/index"
				})
				if (val === 11) uni.navigateTo({
					url: "./organizationalBuild/index"
				})
				if (val === 12) uni.navigateTo({
					url: "./promotionVedio/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.specialOperations {
		background-image: url(@/static/bthgIcon/main_bg2.png);
		background-repeat: no-repeat;
		background-size: 100%;
		padding-bottom: 20rpx;
		min-height: 100%;

		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 2;

			:deep( .headerBox ){
				background-color: transparent !important;
				// background-color: rgba(0,0,0,0.1);
			}
		}

		.sp-menu {
			margin: 0 38rpx;
			padding-top: 200rpx;
			// height: 1200rpx;
			// height: 1000rpx;
			// background-color: darkred;
			display: grid;
			grid-gap: 24rpx;
			grid-template-columns: repeat(2, 1fr);

			// grid-template-columns: repeat(auto-fill, 220rpx);
			// place-items: center;
			// justify-content: center;
			.menu-item {
				// width: 220rpx;
				height: 274rpx;
				// background-color: darkblue;
				box-shadow: 0px 8rpx 15rpx 0px rgba(219, 229, 255, 0.6);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background-color: white;

				.item-icon {
					// width: 220rpx;
					// height: 220rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 14rpx;

					image {
						width: 120rpx;
						height: 120rpx;
					}
				}

				.item-text {
					align-items: center;
					// width: 220rpx;
					height: 54rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						text-align: center;
						display: flex;
						justify-content: center;
					}
				}
			}
		}
	}
</style>