<template>
  <div class="page page-index">
    <!-- 该input用于防止chrome自动填充 -->
    <input type="password" style="display: none;" />
    <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>
    <!-- 导航菜单切换 -->
    <div class="nav-tab">
      <div @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + tabList.length + ');'">{{ item.name }}</div>
    </div>
    <!-- 推荐 为什么选择平安人寿 -->
    <div class="content recommend">
      <div class="tit">{{ $t("index.recommend.title") }}</div>
      <div class="features">
        <div class="features-item">
          <div class="icon">
            <img src="@/assets/images/index/recommend-icon-1.png" alt />
          </div>
          <div v-html="$t('index.recommend.item1.desc')" class="desc"></div>
        </div>
        <div class="features-item">
          <div class="icon">
            <img src="@/assets/images/index/recommend-icon-2.png" alt />
          </div>
          <div v-html="$t('index.recommend.item2.desc')" class="desc"></div>
        </div>
        <div class="features-item">
          <div class="icon">
            <img src="@/assets/images/index/recommend-icon-3.png" alt />
          </div>
          <div v-html="$t('index.recommend.item3.desc')" class="desc"></div>
        </div>
      </div>
      <div @click="toContactUs" class="contact-tips">
        <span class="icon"></span>
        {{ $t("index.recommend.contact") }}
      </div>
    </div>

    <!-- 线上报价 -->
    <div class="quote" :style="'background: url(' + quoteBgUrl + ') center no-repeat;'">
      <div class="space1"></div>
      <div class="tit">線上報價 閃速投保</div>
      <div class="tit2">
        平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，
        涵蓋重點醫療保障，投保流程簡易，全程線上進行。
      </div>

      <!-- tab表格 -->
      <div class="table">
        <div class="table-tab">
          <div @click="onTabHandler(item)" v-html="item.name" v-for="(item, index) in tabList" :key="item.id" class="table-tab-item" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
							'width: calc(100% / ' +
								tabList.length +
								');z-index:' +
								(tabList.length - index) +
								''
						">{{ item.name }}</div>
        </div>
        <div class="linear" :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"></div>
        <div class="table-cont" :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'">
          <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
          <div @click="onNextTabHandler()" class="arrow arrow-right"></div>

          <div class="panel panel-left">
            <div class="desc">
              <div class="desc-item">・潛在長線資本增值</div>
              <div class="desc-item">・創建家族財富</div>
              <div class="desc-item">・身故及意外身故賠償</div>
              <div class="desc-item">・保單持有人意外身故賠償</div>
              <div class="desc-item">・自選保費繳付期</div>
              <div class="desc-item">・彈性賠償支付方式</div>
              <div class="desc-item">・豁免醫療核保</div>
            </div>
          </div>
          <div class="panel panel-right">
            <div class="func func1">
              <div class="func1-item">
                <div class="k"> {{$t('common.Sex')}}</div>
                <div class="gender">
                  <div class="gender-item" @click="onQuoteSexHandler(1)">
                    {{$t('common.Male')}}
                    <img v-if="quoteData.gender == 1" src="@/assets/images/common/icon-male-act.png" alt />
                    <img v-else src="@/assets/images/common/icon-male.png" alt />
                  </div>
                  <div class="gender-item" @click="onQuoteSexHandler(2)">
                    {{$t('common.Female')}}
                    <img v-if="quoteData.gender == 2" src="@/assets/images/common/icon-female-act.png" alt />
                    <img v-else src="@/assets/images/common/icon-female.png" alt />
                  </div>
                </div>
              </div>
              <div class="func1-item">
                <div class="k">{{$t('common.Age')}}</div>
                <div class="age">
                  <div class="ipt-wrap-linear">
                    <div class="down-arrow"></div>
                    <div class="cont">
                      <el-select class="ipt" v-model="formData.gender" :placeholder="$t('common.Age')">
                        <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="quote-btn">{{$t('index.quote.quote')}}</div>
      <div class="customer-service">
        {{$t('index.quote.want')}}
        <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
      </div>
    </div>

    <!-- 联系我们表单 -->
    <div class="contact">
      <div class="box-w panel">
        <div class="panel-left">
          <div v-html="$t('index.contact.t1')" class="t1"></div>
          <div v-html="$t('index.contact.t2')" class="t2"></div>
          <img class="pic-mobile" src="@/assets/images/index/index-mobile.png" alt />
        </div>
        <div class="panel-right">
          <div class="form">
            <div class="form-item fl">
              <!-- 称呼 -->
              <div class="ipt-wrap-linear dear">
                <div class="down-arrow"></div>
                <div class="cont">
                  <el-select class="ipt" v-model="formData.gender" :placeholder="$t('index.contact.form.Title') + '*'">
                    <el-option v-for="(item, index) in genderList" :key="index" :label="item.n" :value="item.v"></el-option>
                  </el-select>
                </div>
              </div>
              <!-- 姓名 -->
              <div class="ipt-wrap-linear name">
                <div class="cont">
                  <input autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.Name') + '*'" />
                </div>
              </div>
            </div>

            <div class="form-item">
              <!-- 联系电话 -->
              <div class="ipt-wrap-linear">
                <div class="cont">
                  <input autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.PhoneNumber') + '*'" />
                </div>
              </div>
            </div>

            <div class="form-item">
              <!-- 電郵 -->
              <div class="ipt-wrap-linear">
                <div class="cont">
                  <input class="ipt" type="text" :placeholder="$t('index.contact.form.Email') + '*'" />
                </div>
              </div>
            </div>

            <div class="form-item">
              <!-- 理想聯絡時間 -->
              <div class="ipt-wrap-linear">
                <div class="down-arrow"></div>
                <div class="cont">
                  <date-picker class="ipt-date" :formatter="'dd-MM-yyyy'" :placeholder="$t('index.contact.form.Time') + '*'" v-model="formData.birthDate" :filtModel="['future']" :cusStyle="{
											border: 'none !important',
											'background-color': 'transparent !important',
											padding: '16px 24px',
											color: '#606266',
											'text-align': 'center'
										}"></date-picker>
                </div>
              </div>
            </div>

            <div class="form-item">
              <!-- 查詢事項 -->
              <div class="ipt-wrap-linear">
                <div class="cont">
                  <textarea class="ipt textarea" :placeholder="$t('index.contact.form.Inquiry')"></textarea>
                </div>
              </div>
            </div>
          </div>
          <!-- 错误提示 -->
          <div class="err-tips">
            <template v-if="errTips">
              <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt />
              {{ errTips }}
            </template>
          </div>
          <div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style lang="scss"></style>