<!-- 举报中心 -->
<template>
	<view class="center">
		<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: 360rpx;"></image>
		<!-- <view class="center-title">举报入口</view> -->
	
		<!-- <view class="title">举报入口</view> -->
		<view class="tab-area">
			<view class="tab">
				<u-row>
					<u-col span="4" v-for="item in TypeList1" :key="item.id">
						<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.label}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4" v-for="item in TypeList2" :key="item.id">
						<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.label}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4" v-for="item in TypeList3" :key="item.id">
						<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.label}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4" v-for="item in TypeList4" :key="item.id">
						<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
							<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
							<text class="grid-text">{{item.label}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="title" style="margin-top: 46rpx;">专项举报入口</view>
		<view class="content">
			<!-- 专项类举报类型传-其他10 -->
			<view v-for="(item,index) in tabList" :key="item.id" class="content-main"  @click="changePage(item.id, item.icon, '其他类', item.type, index)"> 
				<!-- <image :src="item.icon" :style="item.style" mode=""></image> -->
				<view class="text-area">
					<text class="content-title">{{item.title}}</text>
				</view>
			</view>
		</view>
		<u-action-sheet 
			:actions="actionSheetList" 
			@select="selectClick" 
			title="举报类型" 
			:show="actionSheetShow"
			:closeOnClickOverlay="true" 
			:closeOnClickAction="true"
			cancelText="取消"
			@close="closeActionSheet"
		></u-action-sheet>
	</view>
</template>

<script>
import { getSpecial} from '@/api/tort.js'
	export default {
		name: 'center',
		components: {
		},
		data() {
			return {
				actionSheetShow: false, // 选择其他还是网站的选项卡
				actionSheetList: [
					{
						name: '网站类型举报',
					},
					{
						name: '其他类型举报',
					}
				],
				TypeList1: [
					{
						id: '1',
						type: 'web',
						label: '政治安全类',
						icon: 'http://111.198.10.15:11404/imgs/xj/涉领导人类.png'
					},
					{
						id: '2',
						type: 'web',
						label: '涉党军政类',
						icon: 'http://111.198.10.15:11404/imgs/xj/涉党军政类.png'
					},
					{
						id: '3',
						type: 'web',
						label: '涉暴涉恐类',
						icon: 'http://111.198.10.15:11404/imgs/xj/涉暴涉恐类.png'
					},
				],
				TypeList2: [
					{
						id: '4',
						type: 'web',
						label: '民族宗教类',
						icon: '/static/center/mzzj.png'
					},
					{
						id: '5',
						type: 'web',
						label: '治疆政策类',
						icon: 'http://111.198.10.15:11404/imgs/xj/治疆政策类.png'
					},
					{
						id: '6',
						type: 'web',
						label: '涉疆案(事)件类',
						icon: 'http://111.198.10.15:11404/imgs/xj/涉疆案件类.png'
					},
				],
				TypeList3: [
					{
						id: '7',
						type: 'web',
						label: '公共安全类',
						icon: 'http://111.198.10.15:11404/imgs/xj/公共安全类.png'
					},
					{
						id: '8',
						type: 'web',
						label: '组织人事类',
						icon: 'http://111.198.10.15:11404/imgs/xj/组织人事类.png'
					},
					{
						id: '9',
						type: 'web',
						label: '社会民生类',
						icon: 'http://111.198.10.15:11404/imgs/xj/社会民生类.png'
					},
				],
				TypeList4: [
					{
						id: '10',
						type: 'others',
						label: '其他类',
						icon: 'http://111.198.10.15:11404/imgs/xj/其他.png'
					},
				],
				tabList: [
					// {
					// 	id: 'web',
					// 	title: '网站类型举报',
					// 	dec: '网站地址',
					// 	icon: '../../static/center/web.png',
					// 	span: '6',
					// 	style: 'width: 52px;height: 60px;'
					// },
					{
						id: '10',
						title: '专项举报',
						type: 'special',
						dec: '扫黑除恶专题举报',
						icon: 'http://111.198.10.15:11404/imgs/xj/工作动态.png',
						span: '6',
						style: 'width: 62px;height: 62px;'
					},
					// {
					// 	id: 'other',
					// 	title: '其他类型举报',
					// 	dec: '通讯工具/网盘/搜索引擎',
					// 	icon: '../../static/center/other.png',
					// 	span: '12',
					// 	style: 'width: 53px;height: 60px;'
					// },
				],
				tempParamForm: {}
			}
		},
		mounted(){
		this.fetchSpecial()
		},
		methods: {
			fetchSpecial() {
				getSpecial({topicSign: '1'}).then(res => {
					console.log(res, 'res')
					this.tabList = res.map(item => {
						return {
							...item,
							title: item.topicTitle,
							id: '10',
							type: 'special',
							icon: 'http://111.198.10.15:11404/imgs/xj/工作动态.png',
						}
					})
					// this.ztList = [this.ztList]
				})
			},
			changePage(reportTypeValue, icon, label, type, index) {
				wx.navigateTo({
					url: `/packageIndex/report/report?reportTypeValue=${reportTypeValue}&icon=` + encodeURIComponent(icon) + '&label=' + encodeURIComponent(label) + `&reportType=${type}` + `&index=${index}`
				})
			},
			goSelectActionSheet(reportTypeValue, icon, label, type) {
				this.tempParamForm = {
					reportTypeValue: reportTypeValue,
					icon: icon,
					label: label,
					reportType: type
				}
				// this.actionSheetShow = true
				wx.navigateTo({
					url: `/packageIndex/report/report?reportTypeValue=${this.tempParamForm.reportTypeValue}&icon=` + encodeURIComponent(this.tempParamForm.icon) + '&label=' + encodeURIComponent(this.tempParamForm.label) + `&reportType=${type}`
				})
			},
			// 选择好
			selectClick(val) {
				console.log(val)
				let type = 'web'
				if(val.name === '网站类型举报') {
					type = 'web'
				} else {
					type = 'other'
				}
				console.log(type, 'type')
				wx.navigateTo({
					url: `/packageIndex/report/report?reportTypeValue=${this.tempParamForm.reportTypeValue}&icon=` + encodeURIComponent(this.tempParamForm.icon) + '&label=' + encodeURIComponent(this.tempParamForm.label) + `&reportType=${type}`
				})
			},
			// 点取消按钮
			closeActionSheet() {
				this.actionSheetShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		position: relative;
		width: 100%;
		// height: 100%;
		padding: 40rpx 40rpx 80rpx 40rpx;
		padding-top: 380rpx;
		box-sizing: border-box;
		.title {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 40rpx;
			font-weight: 600;
			// padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
		}
		.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 {
					font-size: 30rpx;
					color: #3a3a3b;
				}
			}
		}
		.center-title {
			position: absolute;
			top: 40rpx;
			left: 40rpx;
			color: #fff;
			font-size: 48rpx;
			font-weight: 600;
			letter-spacing: 4rpx;
		}
		.content {
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-sizing: border-box;
			.content-main {
				display: flex;
				align-items: center;
				background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
				margin-top: 40rpx;
				padding: 20rpx;
				// padding-left: 60rpx;
				border-radius: 20rpx;
				color: #356ac0;
				.text-area {
					flex: 1;
					// margin-left: 40rpx;
					text-align: center;
					font-weight: 600;
					font-size: 36rpx;
					// &:last-child {
					// 	margin-left: 32rpx;
					// }
					.content-title {
						// margin-right: 20rpx;
						text-align: center;
					}
				}
				
			}
		}
	}
</style>
<style lang="scss">
	.center {
		.u-icon__icon {
			margin-right: -20rpx;
		}
	}
</style>
