<template>
  <div class="container">
    <nav-tab :nav-list="navBarOptions" />
    <detail-header @click="goInsureState = true" :det="headerInfo">
      <div class="li-header">
        <plan-tip :tip-list="planTipOptions" />
        <cr-divider :hairline="false" :style="{ color: '#ECE9E9' }" />
        <h5>什么样的人需要定期寿险？</h5>
        <p>有房贷、有车贷的家庭顶梁柱</p>
        <p>有子女抚养、老人赡养的家庭依靠</p>
        <p>家庭主要收入来源的贡献者</p>
      </div>
    </detail-header>
    <div class="det-body">
      <card
        title="保险计划"
        :footer="true"
        :option="['查看详情']"
        @option-click="openIframePupop(4)"
      >
        <compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
        <div class="z" slot="footer">
          <div class="cal-footer-num">
            <h4>155<small>元/年起</small></h4>
          </div>
          <cr-button type="warning">算一算保费</cr-button>
        </div>
      </card>
      <card class="intro" id="det_intro">
        <cr-image
          :src="item"
          v-for="(item, index) in introImg"
          :key="index"
          width="100%"
          height="auto"
        />
      </card>
      <cps-case :case-data="caseInfo" />
      <div id="det_process">
        <cps-process :process-data="processDetail" @click="openIframePupop(5)" />
      </div>
      <protocol-read
        title="理赔须知"
        :options="[]"
        :text-bold="true"
        v-model="formData.pact"
        :cell-data="noticeCellInfo"
        @cell-click="openIframePupop"
      >
        <div class="important-intro">
          <h6 class="important-intro-title">重点说明</h6>
          <ul class="important-intro-list">
            <li class="important-intro-item">
              投保人可以为父母、配偶、子女，但是必须获得被保险人的同意并认可保险金额，如果未经被保险人同意并认可金额的，合同无效。
            </li>
            <li class="important-intro-item">
              等待期内，被保险人如因非意外导致身故或身体全残，保险公司返还合同实际交纳的保险费，保险合同终止。
            </li>
            <li class="important-intro-item">本产品为消费型，保险期满后不返还保费。</li>
            <li class="important-intro-item">
              本产品有20天犹豫期，在犹豫期内退保不收取任何费用，无息返还所交保费。犹豫期过后退保将承担保费损失。如需退保，请拨打华贵保险，客服电话400-684-1888。
            </li>
          </ul>
        </div>
      </protocol-read>
      <cps-qa :qa-data="qaInfo" />
    </div>
    <detail-footer :company-info="companyInfo" />
    <copyright />
    <good-action
      @click="goInsureState = true"
      @leftClick="modalShow = true"
      :content="goodActionInfo"
    />
    <popup-with-iframe
      v-model="popupShow"
      :title="pupopData.title"
      :content="pupopData.content"
      :url="pupopData.url"
    >
      <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
      <cps-rate v-if="currentPupopIndex === 6" />
    </popup-with-iframe>
    <record-layer v-model="showLayer" desc="敬请期待" />
    <go-insure-dialog v-model="goInsureState" />
  </div>
</template>

<script>
/**
 * @description: 华贵大麦2020定期寿险 Life insurance
 */
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import RecordLayer from "@/components/RecordLayer";
import Collapse from "@/components/Collapse";

import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./modules/CpsRate";
import PlanTip from "./modules/PlanTip";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";

import Detail from "@/api/detail.huagui.shouxian";

export default {
  name: "GoodsDetail-CII",
  components: {
    DetailHeader,
    DetailFooter,
    CompactCellGroup,
    // eslint-disable-next-line
    CrRadioBtn,
    Card,
    // eslint-disable-next-line
    Collapse,
    CpsCase,
    CpsProcess,
    CpsQa,
    Copyright,
    PopupWithIframe,
    GoodAction,
    GoInsureDialog,
    CpsProcessDetail,
    CpsRate,
    RecordLayer,
    PlanTip,
    NavTab,
    ProtocolRead
  },
  data() {
    return {
      ...Detail,
      popupShow: false,
      currentPupopIndex: null,
      formData: {
        insured: "1",
        payway: "1",
        pact: false
      },
      goInsureState: false,
      showLayer: false
    };
  },
  computed: {
    pupopData() {
      const { popupArray, currentPupopIndex } = this;
      return popupArray[currentPupopIndex] || {};
    }
  },
  methods: {
    openIframePupop(index) {
      if (index === 4) {
        this.$router.push("/goods/plan");
        return;
      }
      this.currentPupopIndex = index;
      this.popupShow = true;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
