<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">常见问题</view>
				</block>
			</cu-custom>
		</view>
		<view class="problem-box" v-for="(item,index) in problemList" :key="index">
			<view class="problem-item acea-row row-between row-middle" @click="tapSwitch(index)">
				<view class="text-box line2">
					Q{{index+1}}：{{item.title}}
				</view>
				<image class="img" :src="`../../../static/images/picker-${number==index?'up':'down'}.png`" mode="">
				</image>
			</view>
			
			<view class="problem-list" v-if="index==number">
				<view class="item" v-for="(c,i) in item.chlidren" :key="i">
					{{c}}
				</view>
			</view>
		</view>
		<!-- <Tabbar :pagePath="pagePath"></Tabbar> -->

	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar';
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				number: 0,
				// problemList:[
				// 	{
				// 		title:"可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门",
				// 		chlidren:[
				// 			'问题一: 可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门',
				// 			'问题二',
				// 			'问题三'
				// 		]
				// 	},
				// 	{
				// 		title:"可以在哪里买门票可以在哪里买门",
				// 		chlidren:[
				// 			'问题一',
				// 			'问题二',
				// 			'问题三'
				// 		]
				// 	},
				// 	{
				// 		title:"可以在哪里买门票可以在哪里买门",
				// 		chlidren:[
				// 			'问题一',
				// 			'问题二',
				// 			'问题三'
				// 		]
				// 	}
				// ],
				problemList: [{
						title: "可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门可以在哪里买门票可以在哪里买门",
						chlidren: '方案一: 可以在哪里买门票可以在哪里买门可;方案二: 以在哪里买门票可以在哪里买门可以在哪里买门;方案三: 票可以在哪里买门可以在哪里买门票可以在哪里买门',


					},
					{
						title: "可以在哪里买门票可以在哪里买门",
						chlidren: '方案一: 可以在哪里买门票可以在哪里买门可;方案二: 以在哪里买门票可以在哪里买门可以在哪里买门;方案三: 票可以在哪里买门可以在哪里买门票可以在哪里买门',
					},
					{
						title: "可以在哪里买门票可以在哪里买门",
						chlidren: '方案一: 可以在哪里买门票可以在哪里买门可;方案二: 以在哪里买门票可以在哪里买门可以在哪里买门;方案三: 票可以在哪里买门可以在哪里买门票可以在哪里买门',
					}
				]


			};

		},
		onLoad() {

			// uni.hideTabBar();
			// let pages = getCurrentPages();
			// this.pagePath = '/' + pages[pages.length - 1].route;
			this.problemList.forEach(item => {
				item.chlidren = item.chlidren.split(';')
				console.log(item, '---------------');
			})
			console.log(this.problemList, '=============');
		},

		methods: {

			tapSwitch(index) {

				if (this.number === index) {
					this.number = -1
					return
				}
				this.number = index

			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}

		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.problem-box {
		margin: 30rpx;
		padding: 30rpx 30rpx 0 30rpx;
		background-color: white;
		border-radius: 16rpx;

		.problem-item {
			flex-wrap: nowrap;

			.text-box {
				width: 75%;
				font-size: 30rpx;
			}

			padding-bottom: 30rpx;

			.img {
				width: 30rpx;
				height: 20rpx;
			}


		}

		.problem-list {
			border-top: 1rpx solid rgb(240, 240, 240);

			.item {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.problem-list:last-child {
			padding-bottom: 30rpx;
		}
	}
</style>
