  <template>
	  <view class="home-page">
		<!-- banner -->
		<view class="banner">
		  <image class="tn-image" :src="banner" mode="aspectFill" />
		  <view class="banner-content tn-p-lg">
			  <view class="tn-pt-xl">
				  <view class="top tn-flex tn-pl">
				  	<view class="logo tn-mr">
				  		<TnAvatar :url="logo" :border="true" :border-bold="true" size="xl"/>
				  	</view>
				  	<view class="name tn-text-left tn-text-3xl" style="font-family: handsome;line-height: 1.4em;letter-spacing: 16rpx;">
				  		重庆市江津区<br>工业园
				  	</view>
				  </view>
				  <view class="bottom tn-flex tn-mt-sm tn-pl">
				  	<view class="left tn-text-center tn-text-bold tn-border-right tn-pr tn-pl-sm">
				  		江<span style="width: 1em;display: inline-block;"></span>津<br>工业园
				  	</view>
				  	<view class="right tn-pl">
				  		国家新型工业化产业示范基地<br>国家级绿色工业园区
				  	</view>
				  </view>
				  <view class="entry tn-flex tn-flex-start-end">
					  <view class="link tn-flex tn-radius tn-pl-xs tn-pr-xs" @click="toIntro">
					  	<TnIcon class="icon tn-text-2xl" name="rocket"/>
						<view class="text">
							查看详情
						</view>
					  </view>
				  </view>
			  </view>
		  </view>
		</view>
	  	<view class="home-content tn-p tn-pb-0">
	  		<!-- 板块列表 -->
			<view class="fields tn-pt-lg tn-radius tn-shadow tn-blue-light_shadow">
				<TnScrollList>
					<view class="item-container tn-flex">
						<view
							v-for="(item,index) in fieldList" :key="index" @click="toPage(item)"
							class="items"
						>
							<view :class="['icon',item.background,'tn-flex','tn-flex-center-center','tn-shadow','tn-blue-light_shadow']">
								<TnIcon :name="item.front_icon" color="#fff" size="50"/>
							</view>
							<view class="title tn-mt-xs">{{item.title}}</view>
						</view>
					</view>
				</TnScrollList>
			</view>	
		
	  		<!-- 园区列表 -->
	  		<view class="parks tn-shadow tn-blue-light_shadow" v-if="parkFlag">
	  			<TnStackSwiper autoplay>
	  			    <TnStackSwiperItem v-for="(item,index) in parkList" :key="index">
	  			        <view class="swiper-item tn-flex " @click="toPark(item.parkId)">
							<image :src="item.image" mode="aspectFill" class="tn-radius tn-w-full tn-h-full"/>
							<view class="title" style="writing-mode: vertical-rl;">
								{{item.title}}
							</view>
						</view>
	  			    </TnStackSwiperItem>
	  			</TnStackSwiper>
	  		</view>
			
			<!-- 招商推介 -->
			<view class="tn-mb-lg">
				<TnTitle title="招商推介" mode="vLine" assist-color="tn-blue-dark" color="tn-blue-dark" size="xl" style="font-weight: bold;"/>
			</view>
			<view class="intro tn-shadow tn-radius tn-blue-light_shadow tn-gradient-bg__blue" @click="toInvest">
				<image :src="investAd" mode="aspectFill" class="tn-radius tn-w-full tn-h-full"/>
			</view>
	  		
	  		<!-- 新闻列表 -->
	  		<view class="news tn-mt-lg">
				<view class="tn-mb-lg">
					<TnTitle title="园区动态" mode="vLine" assist-color="tn-blue-dark" color="tn-blue-dark" size="xl" style="font-weight: bold;"/>
				</view>
	  			
				<view class="article-list tn-shadow tn-blue-light_shadow tn-p-xs tn-radius" v-if="newsFlag">
					<view class="article-item tn-pt-sm tn-pb-sm tn-border-bottom tn-grey-light_border" v-for="item in articleList"
						:key="item.id" @click="toDetail(item.id)">
						<view class="tn-flex tn-w-full">
							<view class="tn-w-2-5 tn-pr-sm">
								<view class="image tn-radius tn-flex tn-flex-center-center tn-border tn-gray-light_border" style="width: 100%;height: 160rpx;">
									<image class="tn-w-full tn-h-full" :src="item.image?item.image:defaultImg" mode="aspectFill"/>
								</view>
							</view>
							<view class="tn-w-3-5 tn-flex-column tn-flex-wrap tn-flex-start-between" style="height: 160rpx;">
								<view class="title tn-w-full tn-text-lg tn-text-ellipsis-2">
									{{item.title}}
								</view>
								
								<view class="time">
									<TnIcon name="clock"></TnIcon>{{dayjs(item.created_at).format('YYYY-MM-DD')}}
								</view>

							</view>
						</view>
					</view>
					<view class="loadmore tn-p-sm">
						<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
					</view>
				</view>
	  		</view>
	  	</view>
		<tab-bar :current='0'/>
	</view>
</template>


<script lang="ts" setup>
	import baseUrl from '@/config/config';
	import onShare from '@/utils/share';
	import { ref } from 'vue';
	import dayjs from "dayjs";
	import storage from '@/utils/storage';
	import { onReachBottom } from "@dcloudio/uni-app";
	import TnStackSwiper from '@/node_modules/tnuiv3p-tn-stack-swiper/index.vue'
	import TnStackSwiperItem from '@/node_modules/tnuiv3p-tn-stack-swiper/item.vue'
	import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
	import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TabBar from '@/pages/components/tab-bar.vue';
	import TnScrollList from '@/uni_modules/tuniaoui-vue3/components/scroll-list/src/scroll-list.vue'

	const { onShareAppMessage, onShareTimeline } = onShare()
	
	const logo = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/logo.jpg ')
	
	const banner = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/index_top.png')
	
	const defaultImg = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/defaultImg.jpg')
	
	const investAd = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/tuijie.jpg')
	
	const fieldFlag = ref(false);
	
	const parkFlag = ref(false);
	
	const newsFlag = ref(false);
	
	const parkList = ref()
	
	const fieldList = ref()
	
	const articleList = ref([])
	
	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
	
	const page = ref(1);
	
	const limit = ref(5);
	
	const shareTitle = ref("江津区工业园")
	
	const getFieldList = () => {
		uni.request({
			url:baseUrl + '/front/report/top_menu',
			success:(res:any) => {
				if(res.data.code === 0){
					fieldList.value = res.data.data
					fieldFlag.value = true
				} else {
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
			}
		})
	}
	
	const getParkList = () => {
		uni.request({
		  url:baseUrl + '/front/parks',
		  success: (res:any) => {
			if(res.data.code === 0){
				
				parkList.value = res.data.data

				uni.setNavigationBarTitle({
					title:shareTitle.value
				})
				
				parkFlag.value = true
			}
		  }
		})
	}
	
	const getArticleList = () => {
		loadmoreStatus.value = 'loading';
		uni.request({
			url: baseUrl + '/front/article/page',
			data: {
				page: page.value,
				limit: limit.value
			},
			method: 'GET',
			success: (res : any) => {
				if (res.data.code === 0) {
					if (res.data.data.length < 5) {
						loadmoreStatus.value = 'nomore'
					} else {
						loadmoreStatus.value = 'loadmore'
					}
					articleList.value = [...articleList.value, ...res.data.data.list]
				} else {
					loadmoreStatus.value = 'nomore'
				}
				newsFlag.value = true
			}
		})
	}
	
	
	const toPage = (item: any) => {
		let storageUser = storage.get('storageUser');
		let isLogin = storage.get('isLogin')
		if(item.mustLogin === 0){
			if(!isLogin){
			// #ifdef MP
				uni.navigateTo({
					url:'/pages/ucenter/index'
				})
			// #endif
			// #ifdef H5
				uni.navigateTo({
					url:'/pages/login/login'
				})
			// #endif
			}else{
				if(storageUser && storageUser.right === 0){
					uni.showToast({
						icon:'none',
						title:'暂时没有权限访问，请联系管理员'
					})
				}else{
					uni.navigateTo({
						url:item.template + '?id=' + item.menuId
					})
				}
			}
		}else{
			uni.navigateTo({
				url:item.template + '?id=' + item.menuId
			})
		}
	}
	
	
	const toDetail = (id : number) => {
		uni.navigateTo({
			url: '/pages/article/detail/index?id=' + id
		})
	}
	
	
	const toIntro = () => {
		uni.navigateTo({
			url:'/pages/park/intro',
		})
	}
	
	const toInvest = () => {
		uni.navigateTo({
			url:'/pages/investIntro/index'
		})
	}

	const toPark = (id:number) => {
		uni.navigateTo({
			url:'/pages/park/index?id=' + id,
		})
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/index/index'
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/index/index'
		}
	})
	
	onReachBottom(() => {
		loadmoreStatus.value = 'loading'
		page.value += 1
		getArticleList()
	})
	getFieldList()
	getParkList()
	getArticleList()
</script>

<style lang="scss" scoped>
	.banner{
		position: relative;
		height: 500rpx;
		.banner-content{
			position: absolute;
			top:80rpx;
			color: #FFF;
			width: 100%;
			z-index: 20;
			.top{
				letter-spacing: 8rpx;
				height:140rpx;
				.logo{
					height:140rpx;
					margin-top: 15rpx;
				}
			}
			.bottom{
				.left{
					text-align: justify;
				}
			}
			.entry{
				margin-top: -20rpx;
				.link{
					.text{
						line-height: 2em;
					}
				}
			}
		}
		&::before {
		  content: '';
		  position: absolute;
		  left: 0;
		  top: 402rpx;
		  width: 100%;
		  height: 100rpx;
		  background: linear-gradient(
		    0deg,
		    rgba(240, 248, 255, 1) 0%,
		    rgba(240, 248, 255, 0) 100%
		  );
		  z-index: 1;
		}
	}
	.home-content{
		.fields{
			background-color: #FFF;
			position: relative;
			top: -80rpx;
			z-index: 9;
			.item-container{
				position: relative;
				width: fit-content;
			}
			.items{
				width: 175rpx;
				.icon{
					width: 80rpx;
					height: 80rpx;
					margin: auto;
					border-radius: 50%;
				}
				.title{
					text-align: center;
				}
			}
		}
		.parks{
			position: relative;
			top: -40rpx;
			height: 360rpx;
			.swiper-item{
				height: 100%;
				.title{
					background-color: rgba(255,255,255,0.5);
					text-align: center;
					line-height: 1.5em;
					letter-spacing: 4rpx;
					font-size: 32rpx;
					position: absolute;
					right: 0;
					height:360rpx;
				}
			}
		}
		.intro{
			width: 100%;
			height: 200rpx;
		}
		.news{
			.article-list{
				background-color: #FFF;
				.article-item{
					height: 200rpx;
					border-radius: 0;
				}
			}
			
		}
	}

</style>
