<template>
	<div class="page page-vhis">
		<div class="banner-contaner">
			<!-- banner 轮播 -->

			<div class="banner banner-pc">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(item,index) in bannerList" :key="index">
						<img class="banner-img" :src="item.pcBannerUrl" />
						<div class="btn-wrap">
							<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
								<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
							</div>
						</div>
					</swiper-slide>
					<!-- <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>-->
					<!-- <div class="swiper-pagination" slot="pagination"></div> -->
				</swiper>
			</div>

			<div class="banner banner-mobile">
				<swiper class="swiper" :options="swiperOption">
					<swiper-slide v-for="(item,index) in bannerList" :key="index">
						<img class="banner-img" :src="item.mobileBannerUrl" />
						<div class="btn-wrap">
							<div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div>
						</div>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
			<!-- <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>-->

			<div v-if="bannerTipsVisible" class="banner-tips">
				<div class="cont">
					<div class="tit">
						<img class="icon" src="@/assets/images/vhis/hot-deal-icon.png" /> {{$t('genRich.bannerTips.t1')}}
					</div>
					<div class="desc">
						<div class="t1">{{$t('genRich.bannerTips.t2')}}</div>
						<div class="t2">{{$t('genRich.bannerTips.t3')}}</div>
					</div>
				</div>
				<img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png" />
			</div>
		</div>
		<!-- 标题 -->
		<div class="title">
			<div class="title-wrap">
				<div class="tt t1">{{$t('genRich.title.t1')}}</div>
				<div class="tt t2">{{$t('genRich.title.t2')}}{{$t('genRich.title.t3')}}</div>
			</div>
		</div>

		<div class="content">
			<!-- 产品特点 -->
			<div class="box product">
				<div class="tit">{{$t('genRich.main.t1')}}</div>
				<div class="prod">
					<div v-for="(item,index) in productList" :key="item.id" class="prod-item">
						<div class="cont">
							<div class="icon-wrap">
								<img :src="require('@/assets/images/gen-rich/gen-rich-icon'+(index+1)+'.png')" />
							</div>
							<div class="detail">
								<div class="t1" v-html="item.title">{{item.title}}</div>
								<div class="more pointer" @click="onShowMoreHandler(index)">
									<div class="more-icon-wrap">
										<img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png" />
										<img v-else src="@/assets/images/vhis/vhis-plus.png" />
									</div>
									<div class="c1">{{item.showMore ? $t('genRich.close') : $t('genRich.expand')}}</div>
								</div>
								<div v-if="item.showMore" class="desc">
									{{item.desc}}
									<div class="tips">{{item.tips}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 视频 -->
			<div class="box video">
				<video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player>
			</div>

			<!-- 计划总览 -->
			<div class="guarantee">
				<div class="tit-wrap">
					<div class="tit">{{$t('genRich.guarantee1.title')}}</div>
					<div class="tit-s">
						{{$t('genRich.guarantee1.titleT1')}}
						<span>{{$t('genRich.guarantee1.titleNum')}}</span>
						{{$t('genRich.guarantee1.titleT2')}}
					</div>
				</div>
				<div class="tit-lt">{{$t('genRich.guarantee1.titleLt')}}</div>

				<div class="container">
					<div class="table">
						<div class="border2 table-border"></div>
						<div class="table-item table-item2">
							<div class="tt label">{{$t('genRich.guarantee1.k1')}}</div>
							<div class="tt val tt2">
								<div class="ff">
									<div class="nn nn1">{{$t('genRich.guarantee1.k11')}}</div>
									<div class="nn nn2">{{$t('genRich.guarantee1.v11')}}</div>
								</div>
								<div class="ff">
									<div class="nn nn1">{{$t('genRich.guarantee1.k12')}}</div>
									<div v-html="$t('genRich.guarantee1.v12')" class="nn nn2">{{$t('genRich.guarantee1.v12')}}</div>
								</div>
							</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k2')}}</div>
							<div class="tt val">{{$t('genRich.guarantee1.v2')}}</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k3')}}</div>
							<div class="tt val">{{$t('genRich.guarantee1.v3')}}</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k4')}}</div>
							<div class="tt val">{{$t('genRich.guarantee1.v4')}}</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k5')}}</div>
							<div class="tt val">
								{{$t('genRich.guarantee1.v5')}}
								<div class="fl">
									<span class="mark num">{{$t('genRich.guarantee1.num1')}}</span>
									<div class="d1">{{$t('genRich.guarantee1.v51')}}</div>
								</div>
								<div class="fl">
									<span class="mark num">{{$t('genRich.guarantee1.num2')}}</span>
									<div class="d1">{{$t('genRich.guarantee1.v52')}}</div>
								</div>
							</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k6')}}</div>
							<div class="tt val">
								{{$t('genRich.guarantee1.v6')}}
								<div class="fl">
									<span class="mark star">*</span>
									<div class="d1">{{$t('genRich.guarantee1.v61')}}</div>
								</div>
							</div>
						</div>
							<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k7')}}</div>
							<div class="tt val">
								{{$t('genRich.guarantee1.v7')}}
								<div class="fl">
									<span class="mark star">*</span>
									<div class="d1">{{$t('genRich.guarantee1.v71')}}</div>
								</div>
								<div class="fl">
									<span class="mark star">*</span>
									<div class="d1">{{$t('genRich.guarantee1.v72')}}</div>
								</div>
								<div class="fl" v-if="$t('genRich.guarantee1.v73')">
									<span class="mark star">*</span>
									<div class="d1">{{$t('genRich.guarantee1.v73')}}</div>
								</div>
							</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k8')}}</div>
							<div class="tt val">{{$t('genRich.guarantee1.v8')}}</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k9')}}</div>
							<div class="tt val">{{$t('genRich.guarantee1.v9')}}</div>
						</div>
						<div class="table-item">
							<div class="tt label">{{$t('genRich.guarantee1.k10')}}</div>
							<div class="tt val">{{$t('genRich.guarantee1.v10')}}</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 下载 -->
			<div class="download">
				<div class="border2 download-item">
					<div class="cont">
						<div class="icon-wrap">
							<img class="icon" src="@/assets/images/vhis/vhis-download.png" />
						</div>
						{{$t('genRich.download.t1')}}
					</div>
				</div>
				<div class="border2 download-item">
					<div class="cont">
						<div class="icon-wrap">
							<img class="icon" src="@/assets/images/vhis/vhis-download.png" />
						</div>
						{{$t('genRich.download.t2')}}
					</div>
				</div>
			</div>

			<!-- 立即投保 -->
			<div class="submit-btn" @click="bottomBtnHandle()">{{$t('genRich.submitBtn')}}</div>
		</div>
	</div>
</template>

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