<template>
	<view class="request-box">
		<view class="tags">
			<view class="tag" @click="click(index)" :class="{'active': checkList(index)}" v-for="(item, index) in list" :key="index">{{item}}</view>
		</view>
		<view class="all-req">
			<view v-for="(item, index) in allList" :key="index">
				<view class="item" :class="{'active': checkAllList(index)}" @click="allClick(index)">
					<view class="title">{{item}}</view>
					<image src="../../static/img/cj_icon_xjt/cj_icon_xjt.png" class="img"></image>
				</view>
				<view v-if="checkAllList(index)">A  抖达人是一款新媒体服务平台，致力于KOL红人孵化，用户可以通过抖达人来提升作品曝光指数、用户关注，帮助更多红人和创作者解决“创作难”难题，让短视频创作没有门槛，让创业更简单。</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				show: true,
				list: [
					'关于我们', '关于提现和会员', '关于分站', '关于订单', '关于签到'
				],
				clickList: [],
				
				allList: [
					'Q 关于我们', 'Q  怎么赚钱'
				],
				allClickList: []
			}
		},
		methods: {
			tagClick () {
			},
			checkList (index) {
				return this.clickList.indexOf(index) >= 0
			},
			click (index) {
				let le = this.clickList.indexOf(index)
				if (le >= 0) {
					this.clickList.splice(le, 1)
				} else {
					this.clickList.push(index)	
				}
			},
			checkAllList (index) {
				return this.allClickList.indexOf(index) >= 0
			},
			allClick (index) {
				console.log(index)
				let le = this.allClickList.indexOf(index)
				if (le >= 0) {
					this.allClickList.splice(le, 1)
				} else {
					this.allClickList.push(index)	
				}
				console.log(this.allClickList)
			},
			// 加载数据
			loadData () {
				
			}
		},
		onLoad () {
			this.loadData()
		}
	}
</script>

<style scoped lang="scss">
	.request-box {
		margin: 20rpx;
	}
	.tag {
		margin: 18rpx 20rpx;
		color: #FFFFFF;
		display: inline-block;
		background: #2B3062;
		border-radius: 100rpx;
		font-size: 28rpx;
		padding: 0 20rpx 10rpx 20rpx;
		&.active {
			background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
		}
	}
	.all-req {
		margin-top: 45rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		& .item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			color: #9093B7;
			&.active {
				color: #FE192F;
			}
		}
		& .img {
			height: 12rpx;
			width: 24rpx;
		}
	}
</style>

