<template>
	<div class="container ">
		<div class="top-space"></div>
		<div class="title">
			{{$t('FAQ.title')}}
		</div>
		<div class="desc">
			<div @click="onMoreHandler(items)" class="desc-item" v-for="(items) in dataList" :key="items.id">
				<div class="question" :class="{'bold':items.more}">{{ items.q }}</div>
				<template v-if="items.more">
					<template v-for="item in items.a">
						<span v-if="item.type == 'text'" class="ql-editor answer" :key="item.id" v-html="item.content"></span>
						<table v-if="item.type == 'table'" :key="item.id">
							<tr v-for="(rows,rowIndex) in item.content" :key="rows.id">
								<template v-if="rowIndex == 0">
									<th v-for="gird in rows" :key="gird.id">{{gird}}</th>
								</template>
								<template v-else>
									<td v-for="gird in rows" :key="gird.id">{{gird}}</td>
								</template>
							</tr>
						</table>
					</template>
				</template>

			</div>
		</div>
	</div>
</template>

<script src="./faq.js"></script>
<style lang="scss" scoped>
@import "./faq.scss";
</style>