<!-- 首页 -->
<template>
	<view class="index">
		<image src="../../static/index/back.png" style="position:absolute;top: 0;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
		<view class="swiper-area">
			<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :circular="circular">
				<swiper-item v-for="(item ,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item.url" style="width:100%;height: 360rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tab-area">
			<view class="tab">
				<u-row customStyle="" >
					<u-col span="6" 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 customStyle="" >
					<u-col span="6" 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 customStyle="" >
					<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>
</template>

<script>
	export default {
		name: 'Index',
		components: {
		},
		data() {
			return {
				tabList_first: [
					{
						id: 'will',
						name: '我要举报',
						icon: '../../static/index/will.png',
					},
					{
						id: 'guide',
						name: '举报指南',
						icon: '../../static/index/guide.png',
					},
				],
				tabList_second: [
					{
						id: 'search',
						name: '举报查询',
						icon: '../../static/index/search.png',
					},
					{
						id: 'jdy',
						name: '成为监督员',
						icon: '../../static/index/jdy.png',
					},
					
				],
				tabList_third: [
					{
						id: 'status',
						name: '工作动态',
						icon: '../../static/index/status.png',
					},
					{
						id: 'rules',
						name: '法律法规',
						icon: '../../static/index/rules.png',
					},
				],
				//轮播图信息
				swiperList: [
					{
						url: '../../static/share.png'
					},
					{
						url: '../../static/code.jpg'
					},
					{
						url: '../../static/share.png'
					},
					{
						url: '../../static/code.jpg'
					},
				]
			}
		},
		mounted(){
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: '新疆网络举报',
				imageUrl: '../../static/share.png',
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		methods: {
			handleClick(val) {
				console.log('---', val)
				if(val === 'search') { // 举报查询
					wx.navigateTo({
						url: '/packageB/search/search'
					})
				} else if(val === 'guide') { // 举报指南
					wx.navigateTo({
						url: '/packageB/guide/guide'
					})
				} else if(val === 'rule' || val === 'status' || val === 'net') {
					let tabIndex = 0;
					if(val === 'status') {
						tabIndex = 1;
					} else if(val === 'net') {
						tabIndex = 2;
					}
					wx.navigateTo({
						url: `/packageA/pages/messageList/messageList?tabIndex=${tabIndex}`
					})
				} else if(val === 'search') {
					wx.navigateTo({
						url: `/packageA/pages/search/search`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 60rpx 0;
		.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;
				}
			}
		}
	}
</style>
<style lang="scss">
	.index {
	}
</style>