<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 text-c">{{$t('genRich.guarantee1.v2')}}</div>
            </div>
            <div class="table-item">
              <div class="tt label">{{$t('genRich.guarantee1.k3')}}</div>
              <div class="tt val text-c">{{$t('genRich.guarantee1.v3')}}</div>
            </div>
            <div class="table-item">
              <div class="tt label">{{$t('genRich.guarantee1.k4')}}</div>
              <div class="tt val text-c">{{$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" @click="downloadFile('file1')">
            <div class="icon-wrap">
              <img class="icon" src="@/assets/images/vhis/vhis-download.png" />
            </div>
            <div class="desc">{{$t('genRich.download.t1')}}</div>

          </div>
        </div>
        <div class="border2 download-item">
          <div class="cont" @click="downloadFile('file1')">
            <div class="icon-wrap">
              <img class="icon" src="@/assets/images/vhis/vhis-download.png" />
            </div>
            <div class="desc">{{$t('genRich.download.t2')}}</div>

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

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

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