<!-- 首页 -->
<template>
	<view class="index">
		<Title />
		<view class="tab">
			<view 
				class="tab-item" 
				v-for="item in tabList" 
				:key="item.id" 
				:style="`background-color: ${item.color};`"
				@click="handleClick(item.id)">
				<image style="width: 60rpx;height: 60rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
				<text class="grid-text">{{item.name}}</text>
			</view>
		</view>
		<view class="bottom">
			<view>
				<view class="info" v-for="item in infoList" :key="item.id">
					<image style="width: 30rpx;height: 30rpx;" :src="item.icon" mode=""></image>
					<text class="info-text">{{item.value}}</text>
				</view>
			</view>
			<image src="../../static/code.jpg" style="width: 200rpx;height: 200rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import Title from '../../components/base/title.vue';
	export default {
		name: 'Index',
		components: {
			Title
		},
		data() {
			return {
				tabList: [
					{
						id: 'center',
						name: '举报中心',
						icon: '../../static/index/center.png',
						color: '#0085fe'
					},
					{
						id: 'guide',
						name: '举报指南',
						icon: '../../static/index/guide.png',
						color: '#0dbdd8'
					},
					{
						id: 'rule',
						name: '法律法规',
						icon: '../../static/index/rule.png',
						color: '#03c5fe'
					},
					{
						id: 'status',
						name: '工作动态',
						icon: '../../static/index/status.png',
						color: '#ab67fc'
					},
					{
						id: 'net',
						name: '网络辟谣',
						icon: '../../static/index/net.png',
						color: '#fe8b2d'
					},
					{
						id: 'search',
						name: '搜索',
						icon: '../../static/index/search.png',
						color: '#fe8787'
					},
				],
				infoList: [
					{
						id: 'phone',
						icon: '../../static/index/phone.png',
						value: '0991-2384777'
					},
					{
						id: 'message',
						icon: '../../static/index/message.png',
						value: 'jbzx@cax.gov.cn'
					},
					{
						id: 'weChart',
						icon: '../../static/index/weChart.png',
						value: 'xjwljb'
					},
					{
						id: 'weChart',
						icon: '../../static/index/weChart.png',
						value: '@新疆网络举报'
					},
				]
			}
		},
		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 === 'center') {
					wx.switchTab({
						url: '/pages/center/center'
					})
				} else if(val === 'guide') {
					wx.switchTab({
						url: '/pages/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: `/pages/messageList/messageList?tabIndex=${tabIndex}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 160rpx 0 260rpx 0;
		
		.tab {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			flex-wrap: wrap;
			// margin-top: 40rpx;
			padding: 40rpx 40rpx;
			box-sizing: border-box;
			overflow: auto;
			.tab-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 42%;
				margin-top: 10%;
				border-radius: 20rpx;
				padding: 20rpx 0;
				&:nth-child(2n + 1) {
					margin-right: 20rpx;
				}
				&:nth-child(2) {
					margin-top: 0;
				}
				&:nth-child(1) {
					margin-top: 0;
				}
				.grid-text {
					color: #fff;
					font-weight: blod;
				}
			}
		}
		.bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 260rpx;
			background: linear-gradient(to top, #17a6ec 0%, #007bca 100%);
			box-sizing: border-box;
			.info {
				margin-top: 12rpx;
				&:first-child {
					margin-top: 0;
				}
				.info-text {
					color: #fff;
					margin-left: 32rpx;
				}
			}
		}
	}
</style>
<style lang="scss">
	.index {
	}
</style>