<template>
	<div class="content">

		<div class="left-panel">
			<!-- 保存变更列表 -->
			<template v-if="activity && activity.indexOf('m4') != -1 ">
				<div v-for="(item,index) in 3" :key="item.id" class="menu-item" :class="{'activity' : activity == 'm4' + (index+1)}" @click="changeActivity('m4'+(index+1))">
					<div class="tit">{{$t('customService.menu4'+(index+1))}}</div>
					<div v-if="activity == 'm4' + (index+1)" class="sel" :class="{'sel-first':index == 0}"></div>
				</div>
			</template>

			<!-- 主列表 -->
			<template v-else>
				<div v-for="(item,index) in 8" :key="item.id" class="menu-item" :class="{'activity' : activity == 'm' + (index+1)}" @click="changeActivity('m'+(index+1))">
					<div class="icon-wrap">
						<img class="icon" :src="require('@/assets/images/insurance-query/m'+(index+1) + (activity == 'm' + (index+1) ?'':'-unselect') +'.png')">
					</div>
					<div class="tit">{{$t('customService.menu'+(index+1))}}</div>
					<div v-if="activity == 'm' + (index+1)" class="sel" :class="{'sel-first':index == 0}"></div>
				</div>
			</template>
		</div>
		<div class="right-panel">
			<div class="panel" v-if="activity == 'm1'">
				<contact-us></contact-us>
			</div>
			<div class="panel" v-if="activity == 'm2'">
				<payment-type></payment-type>
			</div>
			<div class="panel" v-if="activity == 'm3'">
				<insurance-query></insurance-query>
			</div>
			<div class="panel" v-if="activity == 'm41'">
				<policy-change-guide></policy-change-guide>
			</div>
			<div class="panel" v-if="activity == 'm42'">
				<policy-change-contact></policy-change-contact>
			</div>
			<div class="panel" v-if="activity == 'm43'">
				<policy-change-information></policy-change-information>
			</div>
			<div class="panel" v-if="activity == 'm5'">
				<clarms></clarms>
			</div>
			<div class="panel" v-if="activity == 'm6'">
				<reservation></reservation>
			</div>
			<div class="panel" v-if="activity == 'm7'">
				<complaint-acceptance></complaint-acceptance>
			</div>
			<div class="panel" v-if="activity == 'm8'">
				<common-form></common-form>
			</div>
		</div>
	</div>
</template>


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