<template>
	<view class="category-tab-page">
		<view class="banner">
			<view class="img">
				<image :src="topImg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="topText tn-flex tn-ml-xl">
					<view class="icon tn-mt-sm">
						<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="title tn-ml tn-text-3xl tn-text-bold tn-mt">
						{{config.siteName}}
					</view>
				</view>
			</view>
		</view>	
		<view class="content tn-radius tn-m-sm">
			<view class="top tn-flex tn-flex-center-between tn-pt-sm tn-border-bottom tn-grey-light_border">
				<view class="topic tn-text-xl tn-text-bold tn-pl-sm tn-pb-sm" style="letter-spacing: 4rpx;">
					#{{headerTitle}}
				</view>
				<view class="tabList tn-w-3-5">
					<TnTabs v-model="currentTabIndex" :scroll="false" :bottom-shadow="false" active-color="tn-blue-dark" bar-color="tn-blue-dark" bg-color="rgba(255,255,255,0.001)">
					    <TnTabsItem
					      v-for="(item, index) in cateList"
					      :key="index"
					      :title="item.cateName"
						  @click="changeTab(item)"
					    />
					</TnTabs>
				</view>
			</view>
			
			<view class="list tn-shadow tn-p-sm">
				<view class="item tn-flex tn-flex-center-between tn-pt-sm tn-pb-sm tn-border-bottom tn-grey-light_border"
					v-for="(item,index) in articleList" 
					:key="index" 
					@click="toDetail(item)">
					<view class="left tn-flex tn-flex-column tn-pr-sm">
						<view class="title tn-text-lg tn-text-ellipsis-2">
							{{item.title}}
						</view>
						<view class="info tn-flex tn-flex-row tn-flex-center-between tn-text-sm">
							<view class="author">
								<TnIcon name="pushpin"/>{{item.user}}
							</view>
							<view class="time">
								<TnIcon name="time"/>{{dayjs(item.createTime).format('YYYY-MM-DD')}}
							</view>
						</view>
					</view>
					<view class="right tn-radius tn-shadow tn-shadow-blur">
						<image :src="item.image?item.image:defaultImg" mode="aspectFill" style="width: 150rpx;height: 150rpx;display: block;"></image>
					</view>
				</view>
				<view class="loadmore tn-mt tn-mb">
					<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,onMounted } from 'vue';
	import { onLoad,onReachBottom } from "@dcloudio/uni-app";
	import request from '@/utils/request';
	import dayjs from "dayjs";
	import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
	import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'
	import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
	import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'
	import config from '@/config/config';

	const cateId = ref();
	
	const headerTitle = ref();
	
	const topImg = ref('/static/index_top.jpg')
	
	const defaultImg = ref('http://static.cqtlcm.com/jujiao.jpg');
	
	const currentTabIndex = ref(0)
	
	const cateList = ref()
	
	const hasMore = ref(true);
	
	const page = ref(1)
	
	const limit = ref(10)
	
	const articleList = ref([])
	
	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
	
	const getMenuConfig = () => {
	  let url = '/front/content/category/info'
	  request({
			url:url,
			data:{
			  'cateId':cateId.value,
			},
			method:'GET'
	  }).then(res=>{
		  headerTitle.value = res.data.data.cateName
		  uni.setNavigationBarTitle({
		    title:res.data.data.cateName
		  })
	  })
	}
	
	const getCateList = ()=>{
        let url = '/front/content/category/son'
		request({
			url:url,
			method:'GET',
			data:{
				menuId:cateId.value,
				page:page.value,
				limit:limit.value
			}
		}).then(res=>{
			cateList.value = res.data.data
			getArticleList(res.data.data[0].cateId)
		})
    }
	
	const getArticleList = (cateId:number) => {
		loadmoreStatus.value = 'loading'
		let url = '/front/content/list'
		request({
			url:url,
			method:'GET',
			data:{
				'cateId':cateId
			}
		}).then(res=>{
			if(res.data.data.list && res.data.data.list.length > 0){
				res.data.data.list.forEach((item:any)=>{
					if(item.image){
						item.image = JSON.parse(item.image)[0]
					}
				})
			}
			if(res.data.data.list.length < limit.value){
				loadmoreStatus.value = 'nomore'
				hasMore.value = false
			}
			
			articleList.value = articleList.value.concat(res.data.data.list)
		})
	}
	
	const changeTab = (item:any) => {
		articleList.value = []
		getArticleList(item.cateId)
	}
	
	const toDetail = (item:any) =>{
		if(item.type === 0){
			let routeUrl = '/pages/detail/index'
			if(item.template){
				routeUrl = item.template //定义模板后
			}
			uni.navigateTo({
				url:routeUrl + '?cateId=' + item.cateId + '&id=' + item.id
			})
		}else if(item.type === 1){
			//外链
			if(item.link && item.link.slice(0,25) !== 'https://mp.weixin.qq.com/'){
				uni.navigateTo({
					url:'/pages/webview/index?url=' + item.link
				})
			}else{
				window.location.href = item.link
			}
		}else{
			uni.navigateTo({
				url:'/pages/detail/album?id=' + item.id
			})
		}
	}
	
	onLoad((options)=>{
		cateId.value = options.cateId
	})
	
	onReachBottom(()=>{
		page.value += 1 
	})
	
	onMounted(()=>{
		getMenuConfig()
		getCateList()
	})
</script>

<style lang="scss" scoped>
	.category-tab-page{
		min-height: 100vh;
		.banner{
			height: 450rpx;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
				.topText{
					color: #fff;
					position: absolute;
					top: 100rpx;
					left: 0;
					.icon{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.title{
						letter-spacing: 4rpx;
					}
				}
				::after{
					content: "";
					position: absolute;
					width: 100%;
					height: 120rpx;
					top: 330rpx;
					left: 0;
					background:linear-gradient(180deg,rgba(255, 255, 255, 0.01),rgba(255, 255, 255, 0.9))
				}
			}
		}
		.content{
			position: relative;
			background-color: #FFF;
			margin-top: -130rpx;
			.top{
				border-radius: 0;
			}
			.list{
				.item{
					background-color: #FFF;
					border-radius: 0;
					.left{
						height: 170rpx;
						justify-content: space-between;
						.title{
							line-height: 1.5em;
							color: #444;
						}
						.info{
							color: #666;
						}
					}
				}
			}
		}
	}
</style>