<template>
  <div class="container">
    <detail-header @click="goInsureState = true" />
    <div class="det-body">
      <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
        <cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
        <compactCellGroup :cell-data="planCellData" :text-bold="true" />
        <div class="plan-tip">
          <svg-icon icon-class="check-circle" />
          <span class="plan-tip_offset">垫付医药费轻症赔付后，重疾保障继续有效</span>
          <svg-icon icon-class="check-circle" />
          <span>可逐年续保至99岁</span>
        </div>
      </card>
      <card title="请填写投保信息">
        <h6 class="insure-form-title">本人信息</h6>
        <cr-cell-group class="insure-form">
          <cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
          <cr-field
            v-model="formData.selfIdNo"
            placeholder="信息保密，仅用于投保"
            label="身份证号"
          />
        </cr-cell-group>
        <h6 class="insure-form-title">为谁投保</h6>
        <cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" />
        <cr-cell-group class="insure-form">
          <cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
          <cr-field
            v-model="formData.relativeIdNo"
            placeholder="信息保密，仅用于投保"
            label="身份证号"
          />
          <cr-cell title="缴费方式" class="insure-form-item_nobg">
            <cr-radio-btn v-model="formData.payway" :radio-data="paywayOptions" />
          </cr-cell>
        </cr-cell-group>
      </card>
      <card class="insure-form-switch-card">
        <div class="insure-form-switch" slot="header">
          <h5 class="card-title">开通次年自动续保</h5>
          <cr-tag type="warning">小果建议您开通</cr-tag>
          <div class="insure-form-switch-option">
            <span class="insure-form-switch-label">{{ formData.auto ? "已" : "未" }}开通</span>
            <cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
          </div>
        </div>
        <div>
          <compactCellGroup :cell-data="autoCellData" :no-val="true" @click="openIframePupop(7)" />
        </div>
      </card>
      <card
        title="投保须知"
        :option="['查看完整费率表']"
        footer="协议"
        @option-click="openIframePupop(6)"
      >
        <compactCellGroup :cell-data="noticeCellData" />
        <div class="insure-form-pact" slot="footer">
          <cr-checkbox
            shape="round"
            icon-size="13px"
            v-model="formData.pact"
            checked-color="#FFC842"
          >
            投保前请阅读
          </cr-checkbox>
          <div class="insure-form-pact-link">
            <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
            <i></i>
            <a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
            <i></i>
            <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
            <i></i>
            <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
          </div>
        </div>
      </card>
      <card class="intro">
        <cr-image
          :src="item"
          v-for="(item, index) in introImg"
          :key="index"
          width="100%"
          height="auto"
        />
      </card>
      <cps-demo />
      <cps-process @click="openIframePupop" />
      <cps-qa />
    </div>
    <detail-footer />
    <copyright />
    <good-action @click="goInsureState = true" />
    <protocol-iframe
      v-model="popupShow"
      :title="pupopData.title"
      :content="pupopData.content"
      :url="pupopData.url"
    >
      <cps-process-detail v-if="currentPupopIndex === 5" />
      <cps-rate v-if="currentPupopIndex === 6" />
    </protocol-iframe>
    <go-insure-dialog v-model="goInsureState" />
  </div>
</template>

<script>
import intro01 from "@/assets/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png";

import detailHeader from "./modules/DetailHeader";
import detailFooter from "./modules/DetailFooter";
import compactCellGroup from "./modules/CompactCellGroup";
import cpsDemo from "./modules/CpsDemo";
import cpsProcess from "./modules/CpsProcess";
import cpsQa from "./modules/CpsQA";
import protocolIframe from "./modules/ProtocolIframe";
import goInsureDialog from "./modules/GoInsureDialog";
import cpsProcessDetail from "./process";
import cpsRate from "./rate";
import crRadioBtn from "@/components/CrRadioBtn";
import card from "@/components/Card";
import copyright from "@/components/Copyright";
import goodAction from "@/components/GoodAction";

export default {
  name: "GoodsDetail",
  components: {
    detailHeader,
    detailFooter,
    compactCellGroup,
    crRadioBtn,
    card,
    cpsDemo,
    cpsProcess,
    cpsQa,
    copyright,
    goInsureDialog,
    goodAction,
    protocolIframe,
    cpsProcessDetail,
    cpsRate
  },
  data() {
    return {
      introImg: [intro01, intro02, intro03, intro04],
      autoCellData: [
        { title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
        { title: "【放心】开通自动续保后，可随时取消", value: "" },
        { title: "【安心】自动续保按费率可自动扣费", value: "" },
        {
          title: {
            needSlot: true,
            tpl: " 阅读并同意<a href='javascript:;'>《自动续保服务协议》</a>"
          },
          value: ""
        }
      ],
      noticeCellData: [
        { title: "投保年龄", value: "30~6周岁" },
        { title: "保障期限", value: "1年（可续保至99周岁）" },
        { title: "等待期", value: "90天" },
        {
          title: "保费",
          value: {
            needSlot: true,
            tpl: "保费与保额、被保人年龄有关<br />首月3元，次月5.6元/月起",
            longTxt: true
          }
        }
      ],
      planOptions: [
        { label: "30万", value: "3" },
        { label: "20万", value: "2" },
        { label: "10万", value: "1" }
      ],
      insuredOptions: [
        { label: "本人", value: "1" },
        { label: "配偶", value: "2" },
        { label: "父母", value: "3" },
        { label: "子女", value: "4" }
      ],
      paywayOptions: [
        { label: "月缴<small style='color: #999;font-size: 11px'>（12期）</small>", value: "1" },
        { label: "一次交清", value: "2" }
      ],
      popupShow: false,
      currentPupopIndex: null,
      popupArray: [
        {
          title: "保险条款",
          url: "http://mangguo-contract.qthbx.com/taikang-bao-xian-tiao-kuan-v1/"
        },
        {
          title: "健康告知",
          url: "http://mangguo-contract.qthbx.com/taikang-jian-kang-gao-zhi-v1/"
        },
        {
          title: "投保须知及声明",
          url: "http://mangguo-contract.qthbx.com/taikang-toubaoxuzhi-v1/"
        },
        {
          title: "平台服务协议",
          url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
        },
        { title: "保险计划" },
        { title: "理赔信息" },
        { title: "完整费率" },
        {
          title: "自动续保服务协议",
          url: "http://mangguo-contract.qthbx.com/zi-dong-xu-bao-fu-wu-xie-yi-v1/"
        }
      ],
      formData: {
        planValue: "3",
        insured: "1",
        payway: "1",
        auto: false,
        pact: false
      },
      goInsureState: false
    };
  },
  computed: {
    pupopData() {
      const { popupArray, currentPupopIndex } = this;
      return popupArray[currentPupopIndex] || {};
    },
    planCellData() {
      const { planValue } = this.formData;
      let _data = [
        { title: "100种重大疾病医疗保险金", value: "30万" },
        { title: "40种轻症保险金", value: "6万" },
        { title: "投保年龄", value: "30天~50周岁" },
        { title: "保险期限", value: "1年" }
      ];
      switch (planValue) {
        case "3":
          _data = [
            { title: "100种重大疾病医疗保险金", value: "30万" },
            { title: "40种轻症保险金", value: "6万" },
            { title: "投保年龄", value: "30天~50周岁" },
            { title: "保险期限", value: "1年" }
          ];
          break;
        case "2":
          _data = [
            { title: "100种重大疾病医疗保险金", value: "20万" },
            { title: "40种轻症保险金", value: "4万" },
            { title: "投保年龄", value: "30天~60周岁" },
            { title: "保险期限", value: "1年" }
          ];
          break;
        case "1":
          _data = [
            { title: "100种重大疾病医疗保险金", value: "10万" },
            { title: "40种轻症保险金", value: "2万" },
            { title: "投保年龄", value: "30天~60周岁" },
            { title: "保险期限", value: "1年" }
          ];
          break;
        default:
          break;
      }
      return _data;
    }
  },
  methods: {
    openIframePupop(index) {
      if (index === 4) {
        this.$router.push("/goods/plan");
        return;
      }
      this.currentPupopIndex = index;
      this.popupShow = true;
    }
  }
};
</script>
<style lang="less" src="./detail.less" scoped></style>
