<template>
	<view class="home-page">
		<view class="banner">
			<image :src="banner" mode="aspectFill" style="width:100%"></image>
		</view>
		<view class="container tn-p">
			<view class="title tn-text-2xl tn-text-bold tn-text-center tn-border-bottom tn-gray-light_border tn-p">
				{{config.siteName}}
			</view>
			<view class="item" v-for="(item,index) in menuList" :key="index">
				<TnTitle :title="item.cateName" mode="vLine" size="lg" @click="navTo(item)"></TnTitle>
				<view class="tn-flex tn-flex-wrap tn-flex-center-between tn-mt" v-if="item.children">
					<view class="sub_item tn-mb tn-radius tn-gradient-bg__cool-6" v-for="(itm,idx) in item.children" :key="idx" @click="navTo(itm)">
						<view class="tn-text-lg tn-p tn-text-center tn-text-bold" style="color: #fff;letter-spacing: 4rpx;">{{itm.cateName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import request from '@/utils/request';
	import config from '@/config/config.js'
	
	const banner = ref('/static/index_top.jpg')
	
	const menuList = ref([])

	const getMenuData = () => {
		request({
			url: '/front/content/category',
			method:'GET',
		}).then((res)=>{
			if(res.data.code === 0){
				menuList.value = toTreeData(res.data.data,0)
			}
		})
	}

	const toTreeData = (list: any, root: number) => {
		const arr = []
		list.forEach((item: any) => {
		  if (item.parentId === root) {
			const children = toTreeData(list, item.cateId)
			if (children.length > 0) {
			  item.children = children
			}
			arr.push(item)
		  }
		})
		return arr
	}
	
	const navTo = (item:any) => {
		if(item.menuType === 1){
			if(item.template){
				uni.navigateTo({
					url:item.template + '?cateId=' + item.cateId
				})
			}else{
				uni.navigateTo({
					url:'/pages/category/index?cateId=' + item.cateId
				})
			}
		}else if(item.menuType === 2){
				//外链
			uni.navigateTo({
				url:'/pages/webview/index?url=' + encodeURIComponent(item.url)
			})
		}else if(item.menuType === 3){
			//内链
		}else{
			return
		}
	}
	
	onMounted(()=>{
		getMenuData()
	})

</script>

<style lang="scss" scoped>
	.home-page{
		position: relative;
		.container{
			background-color: #fff;
			position: relative;
			top:-40rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			.item{
				.sub_item{
					width: calc(100% / 2 - 10rpx);
				}
			}
		}
	}
</style>
