<!-- 首页 -->
<template>
	<view class="index">
		<!-- <div class='slideShine' style="position:absolute;top: 36rpx;left: 46rpx;z-index: -998;font-size: 50rpx;color: #fff;font-weight: 600;letter-spacing: 4rpx;">新疆网络举报</div> -->
		<!-- <image style="width: 70px;height: 60px;position:absolute;top: 36rpx;left: 60rpx;z-index: -998" src="http://111.198.10.15:11604/png/share.png"></image> -->
		<view style="position:absolute;top: 36rpx;left: 20rpx;z-index: -998;">
			<view style="color: #fff;display: flex;justify-content: center;align-items: center;font-size: 36rpx;font-weight: 600;letter-spacing: 2rpx;">
				<image style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11604/png/share.png"/>
				<text>新疆互联网违法和不良信息举报中心</text>
			</view>
		</view>
		<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
		<view class="swiper-area">
			<swiper class="swiper-box" style="height: 300rpx;" :interval="3000" :indicator-dots="true" :autoplay="true" :circular="circular">
				<swiper-item v-for="(item ,index) in rotationList" :key="index" @click="clickTitle(item, 'swiper')">
					<view class="swiper-item" >
						<image :src="item.img" style="width:100%;height: 300rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tab-area">
			<view class="tab">
				<u-row>
					<u-col span="4" v-for="item in tabList_first" :key="item.id">
						<view class="tab-item" @click="handleClick(item.id)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.name}}</text>
						</view>
					</u-col>
				</u-row>
				<!-- <u-row>
					<u-col span="4" v-for="item in tabList_second" :key="item.id">
						<view class="tab-item" @click="handleClick(item.id)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.name}}</text>
						</view>
					</u-col>
				</u-row> -->
				<!-- <u-row>
					<u-col span="6" v-for="item in tabList_third" :key="item.id">
						<view class="tab-item" @click="handleClick(item.id)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.name}}</text>
						</view>
					</u-col>
				</u-row> -->
			</view>
		</view>
		
		<!-- 通知公告、辟谣信息、案例警醒 -->
		<view class="event-area">
			<!-- <EventList 
				v-for="(item,index) in eventList" 
				:key="index" 
				:title="item.name"
				:list="item.value"
				@checkMore="checkMore(item.id)">
			</EventList> -->
			<view class="title" style="position: relative;">
				<text>
				通知公告
				</text>
				<image style="position: absolute;width: 80px;height: 27px;left:4%;top:41%;z-index: -10;" src="http://111.198.10.15:11404/imgs/xj/装饰条.png"/>
				<view class="icon-text" @click="checkMore('tzgg')">
					<text class="text">更多</text>
					<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="e in tzggList" :key="e.id">
					<text @click="clickTitle(e, 'tzgg')">{{e.title}}</text>
				</view>
			</view>
			<image class="list-img" style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11404/imgs/xj/通知公告.png"/>
		</view>
		<view class="event-area">
			<view class="title" style="position: relative;">
				<text>辟谣信息</text>
				<image style="position: absolute;width: 80px;height: 27px;left:4%;top:41%;z-index: -10;" src="http://111.198.10.15:11404/imgs/xj/装饰条.png"/>
				<view class="icon-text" @click="checkMore('pyxx')">
					<text class="text">更多</text>
					<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="e in pyxxList" :key="e.id">
					<text @click="clickTitle(e, 'pyxx')">{{e.title}}</text>
				</view>
			</view>
			<image class="list-img" style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11404/imgs/xj/辟谣.png"/>
		</view>
		<view class="event-area">
			<view class="title" style="position: relative;">
				<text>案例警醒</text>
				<image style="position: absolute;width: 80px;height: 27px;left:4%;top:41%;z-index: -10;" src="http://111.198.10.15:11404/imgs/xj/装饰条.png"/>
				<view class="icon-text" @click="checkMore('aljx')">
					<text class="text">更多</text>
					<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="e in aljxList" :key="e.id">
					<text @click="clickTitle(e, 'aljx')">{{e.title}}</text>
				</view>
			</view>
			<image class="list-img" style="width: 49px;height: 42px;margin-right: 16rpx;" src="http://111.198.10.15:11404/imgs/xj/案例.png"/>
		</view>
	</view>
</template>

<script>
	import EventList from '@/components/eventList.vue'
	import { stamp2Time } from '@/common/utils.js'
	import { getNoticeList, getPyxxList } from '@/api/index.js'
	export default {
		name: 'Index',
		components: {
			EventList
		},
		data() {
			return {
				tabList_first: [
					{
						id: 'will',
						name: '我要举报',
						icon: 'http://111.198.10.15:11404/imgs/xj/我要举报.png',
					},
					// {
					// 	id: 'search',
					// 	name: '举报查询',
					// 	icon: '../../static/index/search.png',
					// },
					{
						id: 'guide',
						name: '举报指南',
						icon: 'http://111.198.10.15:11404/imgs/xj/举报指南.png',
					},
					{
						id: 'jdy',
						name: '加入我们',
						// name: '成为监督员',
						icon: 'http://111.198.10.15:11404/imgs/xj/成为监督员.png',
					},
				],
				tabList_second: [
					{
						id: 'status',
						name: '工作动态',
						icon: '../../static/index/status.png',
					},
					{
						id: 'rules',
						name: '法律法规',
						icon: '../../static/index/rules.png',
					},
					{
						id: 'jdy',
						name: '成为监督员',
						icon: '../../static/index/jdy.png',
					},
				],
				tabList_third: [
				],
				//轮播图信息
				swiperList: [
					{
						url: 'http://111.198.10.15:11604/png/swiper4.png'
					},
					{
						url: 'http://111.198.10.15:11604/png/swiper3.png'
					},
					{
						url: 'http://111.198.10.15:11604/png/swiper2.png'
					},
					{
						url: 'http://111.198.10.15:11604/png/swiper1.png'
					},
				],
				tzggList: [], // 通知公告列表
				pyxxList: [], // 辟谣信息列表
				aljxList: [], // 案例警醒列表
				rotationList: [], // 轮播图数据
				eventList: [
					{
						id: 'tzgg',
						name: '通知公告',
						value: 'tzggList'
					},
					{
						id: 'pyxx',
						name: '辟谣信息',
						value: 'pyxxList'
					},
					{
						id: 'aljx',
						name: '案例警醒',
						value: 'aljxList'
					},
				]
			}
		},
		mounted(){
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
			this.fetchNoticeList() // 获取通知公告列表
			this.fetchPyxxList() // 获取辟谣信息列表
			this.fetchAljxList() // 案例警醒列表
			this.fetchRotationList() //轮播图
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: '新疆网络举报',
				imageUrl: '../../static/share.png',
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		methods: {
			// 点击按钮
			handleClick(val) {
				console.log('---', val)
				if(val === 'search') { // 举报查询
					wx.navigateTo({
						url: '/packageIndex/search/search'
					})
				} else if(val === 'guide') { // 举报指南
					wx.navigateTo({
						url: '/packageIndex/guide/guide'
					})
				} else if(val === 'will') { // 我要举报
					wx.navigateTo({
						url: '/packageIndex/center/center'
					})
				}
				else if(val === 'rules' || val === 'status') { // 法律法规、工作动态
					let tabIndex = 0;
					if(val === 'status') {
						tabIndex = 1;
					} else if(val === 'net') {
						tabIndex = 2;
					}
					wx.navigateTo({
						url: `/packageIndex/messageList/messageList?tabIndex=${tabIndex}`
					})
				} else if(val === 'jdy') { // 成为监督员
					wx.navigateTo({
						url: `/packageIndex/supervisor/supervisor`
					})
				}
			},
			// 点击更多
			checkMore(id) {
				// 跳转到固定页面
				if(id === 'aljx') {
					wx.navigateTo({
						url: '/packageMine/egersis/egersis'
					})
				} 
				if(id === 'pyxx') {
					wx.navigateTo({
						url: '/packageToolList/rumorInfo/rumorInfo'
					})
				} 
				if(id === 'tzgg') { // 通知公告
					wx.navigateTo({
						url: '/packageToolList/notice/notice'
					})
				} 
			},
			
			// 获取轮播图列表
			fetchRotationList() {
				const param = {
					pageIndex: 1, //当前页数（必传）
					pageSize: 13, //每页数 （必传）
					yuzhong: 'zh',//（必传）固定值
					siteRoleCode: 'xjwljb', //（必传）固定值
					catalogCode: 'ssxw', //（必传）固定值
				}
				getNoticeList(param).then(res => {
					this.rotationList = res.filter(item => item.contentSmallImage).map(item => {
						return {
							catalogId: item.catalogId,
							id: item.id,
							title: item.title,
							publishTime: stamp2Time(item.publishDate),
							img: item.contentSmallImage
						}
					})
				})
			},
			// 获取通知公告列表
			fetchNoticeList() {
				const param = {
					pageIndex: 1, //当前页数（必传）
					pageSize: 2, //每页数 （必传）
					yuzhong: 'zh',//（必传）固定值
					siteRoleCode: 'xjwljb', //（必传）固定值
					catalogCode: 'tzgg', //（必传）固定值
				}
				getNoticeList(param).then(res => {
					console.log(res, '通知公告列表')
					this.tzggList = res.map(item => {
						return {
							catalogId: item.catalogId,
							id: item.id,
							title: item.title,
							publishTime: stamp2Time(item.publishDate)
						}
					})
				})
			},
			// 获取辟谣信息--对应联合辟谣平台的权威发布
			fetchPyxxList() {
				const param = {
					pageIndex: 1,
					pageSize: 2,
					// siteRoleCode: 'zzqwxbPortal',
					// catalogCode: 'yykt'
					siteRoleCode: 'zzqwxbPortal', // 对应权威发布
					catalogCode: 'qwfb', // 对应权威发布
				}
				getPyxxList(param).then(res => {
					this.pyxxList = res.map(item => {
						return {
							catalogId: item.catalogId,
							id: item.id,
							title: item.title,
							publishTime: stamp2Time(item.publishDate)
						}
					})
				})
			},
			// 获取案例警醒--对应联合辟谣平台热点聚焦
			fetchAljxList() {
				const param = {
					pageIndex: 1,
					pageSize: 2,
					// siteRoleCode: 'zzqwxbPortal',
					// catalogCode: 'yykt'
					// siteRoleCode: 'zzqwxbPortal', // 对应热点聚焦
					// catalogCode: 'rdjj'
					siteRoleCode: 'xjwljb', //（必传）固定值
					catalogCode: 'ssxw', //（必传）固定值
				}
				getPyxxList(param).then(res => {
					this.aljxList = res.map(item => {
						return {
							catalogId: item.catalogId,
							id: item.id,
							title: item.title,
							publishTime: stamp2Time(item.publishDate)
						}
					})
				})
			},
			// 点击标题
			clickTitle(val, type) {
				
				let url = '';
				if(type === 'tzgg' || type=== 'swiper' || type ==='aljx') { // 通知公告
					url = `https://www.xjwljb.com/mobile/#/newsDetail?id=${val.id}&categoryId=${val.catalogId}` + `&label=${type === 'tzgg' ? '通知公告' : '热点聚焦'}`
				} else if(type === 'pyxx') { // 辟谣信息
					url = `https://www.xjwljb.com/piyao/web/bulletin/newInfo?id=${val.id}&catalogId=${val.catalogId}`
				} 
				// else { // 案例警醒
				// 	url = `https://www.xjwljb.com/mobile/#/newsDetail?id=${val.id}&catalogId=${val.catalogId}`
				// }
				// if (type === 'tzgg') {
				// 	wx.navigateTo({
				// 		url: '/packageToolList/rumorWebView/rumorWebView?type=tzgg&url=' + encodeURIComponent(url) + `&label=通知公告`
				// 	})
				// } else {
					wx.navigateTo({
						url: '/packageToolList/rumorWebView/rumorWebView?url=' + encodeURIComponent(url)
					})
				// }
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 60rpx 0;
		padding-top: 192rpx;
		.swiper-area {
			padding: 0 40rpx;
		}
		.tab-area {
			margin-top: 40rpx;
			padding: 0 40rpx;
			.tab {
				background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
				border-radius: 20rpx;
				padding-bottom: 80rpx;
			}
			.tab-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 80rpx;
				.grid-text {
					color: #3a3a3b;
				}
			}
		}
		.slideShine{
				background: #871317 -webkit-linear-gradient(left, #561214, #febaf7 50%, #ff0 90%,#561214) no-repeat 0 0;
				background-size:20% 100%; 
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 36px;
				text-align: center;
				font-weight: bold;
				text-decoration: underline;
		 }
		.slideShine {
			animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;
		}
		@keyframes slideShine {
			0% {background-position: 0 0; }
			100% {background-position: 100% 100%; }
		}
		.title {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			font-weight: 600;
			// padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			padding: 32rpx 40rpx;
			.icon-text {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 34rpx;
				font-weight: 400;
				color: #0043ac;
				.text {
					margin-right: 16rpx;
				}
			}
		}
		.event-area{
			position: relative;
			.list-img{
				position: absolute;
				right:12px;
				bottom:10px;
			}
		}
		.list {
			border: 1px solid #BED7FF;
			border-radius: 10px;
			width: 95%;
			margin: 0 auto;
			.list-item {
				margin: 32rpx 0;
				padding: 0 40rpx;
				width: 70%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;				//溢出内容隐藏
				text-overflow: ellipsis;		//文本溢出部分用省略号表示
				display: -webkit-box;			//特别显示模式
				-webkit-line-clamp: 2;			//行数
				line-clamp: 2;					
				-webkit-box-orient: vertical;	//盒子中内容竖直排列
			}
		}
		
	}
</style>
<style lang="scss">
	.index {
	}
</style>
