<template>
	<view class="container">
		<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 class="header">

			<view class="" style="width: 60rpx;height: 60rpx;">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/tabbar/sfp_active.png" mode=""></image>
			</view>
			<text>SFP</text>
		</view> -->
		<!-- <view class="content-box">
			<view class="content" v-for="(item,index) in remList" :key="index"  style="width: 50%;justify-content: center;">
				<view class="">
					<view class="content-box-item" @click="gotobach(item)">
						<view class="" style="width: 60rpx;height: 60rpx;text-align: center;padding-bottom: 10rpx;">
							<image style="width: 60rpx;height: 60rpx;"  :src="item.icon" mode=""></image>
						</view>
						<text>{{item.text}}</text>
					</view>
				</view>
				
				
			</view>
		</view> -->
	<!-- <tabBar  :currentPage="currentPage" ></tabBar> -->
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue';
	import courseItem from "@/components/courseItem/courseItem.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: '法律工具'
					}*/
				]
			}
		},
		methods:{
			gotobach(item){
				if(item.link == ''){
					uni.showToast({
						title: '此功能暂未开放!',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				uni.navigateTo({
					url:item.link
				})
			},
			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) {
							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>
