<template>
	<view class="container">
		<!-- 禁用弹窗 -->
		<restrictedTip ref="restrictedTip"/>
		<view class="kuaiBox" v-for="item in mainMenuLists" :key="item.id">
			<view class="kuaiTit">
				{{item.categoryName}}
			</view>
			<view class="kuaiCon">
				<!-- @click="goDetail(menuItem)" -->
				<view 
					class="kuaiItem" 
					v-for="menuItem in item.children.filter(v=>v.isShow)" 
					:key="menuItem.title" 
					@click="goDetail(menuItem)"
				>
					<view class="imgbox">
						<view class="iconfont iconSize" :class="`${menuItem.icon}`"></view>
					</view>
					<view class="">
						{{menuItem.title}}
					</view>
				</view>
				
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import dataHandling from "@/util/dataHandling";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import { initJssdkShare, setWechatShare } from '@/util/fiveshare';
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue';
	export default {
		data() {
			return {
				currentPage:'product',
				mainMenuLists:[
					{id:'00',categoryName:'计算器',
						children:[
							{title:'购房能力',icon:'icon-goufang',link: '/sfp/housePurchase/housePurchase',isOpen:true,isShow:true,isTips: false,},
							{title:'子女教育',icon:'icon-jiaoyu',link: '/sfp/childEdu/childEdu',isOpen:true,isShow:true,isTips: false,},
							{title:'保单单复利',icon:'icon-ROI',link: '/sfp/index/index',isOpen:true,isShow:true,isTips: false,},
							
						],
					},
				],
				remList: [
				/*	{
						link:'',
						icon: '../../static/SFP/Slice63.png',
						text: 'SFP智能财策'
					},
					{
						link:'',
						icon: '../../static/SFP/Slice65.png',
						text: '产品库'
					},
					*/
					{
						link:'/pages/product/finance-calculator',
						icon: '../../static/SFP/Slice64.png',
						text: '金融计算器'
					}
			/*		,
					{
						link:'',
						icon: '../../static/SFP/Slice62.png',
						text: '法律工具'
					}*/
				]
			}
		},
		components: {
			restrictedTip
		},
		onShow() {
			// #ifdef H5
			initJssdkShare(() => {
			  setWechatShare();
			}, window.location.href);
			// #endif
		},
		methods:{
			goDetail(item) {
				if (item.isShow == true && item.isOpen == true) {
						if (item.isTips == true) {
							uni.showModal({
								title: item.title,
								content: '确定要进行' + item.title + '操作吗?',
								showCancel: true,
								success: function(res) {
									if (res.confirm) {
										uni.showToast({
											title: '操作成功',
											icon: 'none'
										});
									} else {
										console.log('已取消')
									}
								}
							});
						} else if (item.link != null) {
							dataHandling.pocessTracking(
							  '点击',
							  `用户在金融工具模块点击${item.title}`,
							  '点击',
							  2,
							  '金融工具模块',
							  'pages/product/product'
							)
							uni.navigateTo({
								url: item.link
							});
						}else {
							console.log('错误抛出')
						}
				} else {
					common.errorDialog(2, '该模块正在开发中，敬请期待！', '提示');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		box-sizing:border-box;
		height: 92.9vh;
		padding: 30rpx;
		.kuaiBox{
			box-sizing: border-box;
			background: #fff;
			width: 100%;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			.kuaiTit{
				font-size: 30rpx;
			}
			.kuaiCon{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 100%;
				.kuaiItem{
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-bottom: 40rpx;
					font-size: 26rpx;
					/* 关键修改：计算宽度时考虑间距 */
					  width: calc((100% - 40rpx * 2) / 3); /* 3个子项，左右各20rpx间距 */
					  margin-right: 40rpx; /* 右侧间距 */
					.imgbox{
						margin-bottom: 10rpx;
						.iconSize{
							font-size: 40rpx;
						}
					}
				}
				/* 每行第3个子项去掉右侧间距 */
				.kuaiItem:nth-child(3n) {
				  margin-right: 0;
				}
				
			}
		}
	}
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
	}
.content-box{
	display: flex;width: 100%;flex-wrap: wrap;
	margin-top: 40rpx;
}
	.content {
		display: flex;
		.content-box-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}
	
	}
</style>
