<!-- 举报中心 -->
<template>
	<view class="center">
		<view class="back">
			<view class="main">
				<text>网络安全为人民</text>
				<text class="bottom-text">网络安全靠人民</text>
			</view>
			
			<view class="title">
				<view class="left">
					<u-icon name="play-left-fill" color="#0096e0" size="12"></u-icon>
					<u-icon name="play-left-fill" color="#0096e0" size="12"></u-icon>
				</view>
				<text>举报入口</text>
				<view class="right">
					<u-icon name="play-right-fill" color="#0096e0" size="12"></u-icon>
					<u-icon name="play-right-fill" color="#0096e0" size="12"></u-icon>
				</view>
			</view>
			
			<view class="content">
				<view style="display: flex;justify-content: space-around;align-items: center;">
					<view style="width: 50%;" class="content-main" @click="changePage(item.id, item.icon)" v-for="(item,index) in tabList" v-if="index < 2" :key="item.id">
						<image :src="item.icon" style="width: 160rpx;height: 160rpx;margin-bottom: 20rpx;" mode=""></image>
						<view class="text-area">
							<view class="content-title">{{item.title}}</view>
							<view class="desc">{{item.dec}}</view>
						</view>
					</view>	
				</view>
				
				<view class="content-main" @click="changePage(item.id, item.icon)" v-for="(item,index) in tabList" v-if="index === 2" :key="item.id">
					<image :src="item.icon" style="width: 160rpx;height: 160rpx;margin-bottom: 20rpx;" mode=""></image>
					<view class="text-area">
						<view class="content-title">{{item.title}}</view>
						<view class="desc">{{item.dec}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'center',
		components: {
		},
		data() {
			return {
				tabList: [
					{
						id: 'web',
						title: '网站类型举报',
						dec: '网站地址',
						icon: '../../static/center/web.png',
						span: '6'
					},
					{
						id: 'special',
						title: '专项举报',
						dec: '扫黑除恶专题举报',
						icon: '../../static/center/special.png',
						span: '6'
					},
					{
						id: 'other',
						title: '其他类型举报',
						dec: '通讯工具 网盘 搜索引擎',
						icon: '../../static/center/other.png',
						span: '12'
					},
				]
			}
		},
		methods: {
			changePage(val, icon) {
				console.log(icon)
				wx.navigateTo({
					url: `/packageA/pages/report/report?reportType=${val}&icon=` + encodeURIComponent(icon)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100%;
		padding-top: 160rpx;
		box-sizing: border-box;
		.back {
			padding: 40rpx;
			.main {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;
				background: linear-gradient(to right, #153164 0%, #0f4ae0 100%);
				color: #fff;
				font-weight: 600;
				letter-spacing: 20rpx;
				border-radius: 20rpx;
				padding: 20rpx 0;
				.bottom-text {
					// margin-top: 20rpx;
				}
			}
		}
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			width: 100%;
			padding: 46rpx 32rpx 46rpx 32rpx;
			text-align: center;
			font-size: 42rpx;
			font-weight: 600;
			color: #0096e0;
			letter-spacing: 20rpx;
			box-sizing: border-box;
			.left {
				display: flex;
				margin-right: 20rpx;
			}
			.right {
				display: flex;
			}
		}
		.content {
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.content-main {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 28rpx 0;
				.text-area {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.content-title {
						white-space: nowrap;
					}
					.desc {
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.center {
		.u-icon__icon {
			margin-right: -20rpx;
		}
	}
</style>