<template>
  <div class="container">
    <nav-tab :nav-list="navBarOptions" />
    <detail-header @click="goInsureState = true" :det="headerInfo" />
    <div class="det-body">
      <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
        <compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
        <plan-tip :tip-list="planTipOptions" />
      </card>
      <div id="det_insure">
        <insure-person-form v-model="formData" :radio-options="personFormOptions" />
        <auto-deduct
          v-model="formData.auto"
          :cell-data="autoCellInfo"
          @cell-click="openIframePupop"
        />
        <protocol-read
          v-model="formData.pact"
          :cell-data="noticeCellInfo"
          @cell-click="openIframePupop"
        />
      </div>
      <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>
      <cps-qa :qa-data="qaInfo" />
    </div>
    <detail-footer :company-info="companyInfo" />
    <copyright />
    <good-action @leftClick="goInsureState = 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>
    <go-insure-dialog
      v-model="goInsureState"
      :title="headerInfo.title"
      :pay-data="goodBuyModalInfo"
    />
  </div>
</template>

<script>
/**
 * @description: 泰康600万医疗保障 medical insurance
 */
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
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 InsurePersonForm from "./modules/InsurePersonForm";
import AutoDeduct from "./modules/AutoDeduct";
import ProtocolRead from "./modules/ProtocolRead";
import NavTab from "./modules/NavTab";

import { detail } from "@/api/product";
import Detail from "@/api/detail.taikang.yiliaobaozhang";

export default {
  name: "GoodsDetail-MI",
  components: {
    DetailHeader,
    DetailFooter,
    CompactCellGroup,
    // eslint-disable-next-line
    CrRadioBtn,
    Card,
    // eslint-disable-next-line
    Collapse,
    CpsCase,
    CpsProcess,
    CpsQa,
    Copyright,
    PopupWithIframe,
    GoodAction,
    GoInsureDialog,
    CpsProcessDetail,
    CpsRate,
    PlanTip,
    InsurePersonForm,
    AutoDeduct,
    ProtocolRead,
    NavTab
  },
  data() {
    return {
      ...Detail,
      goodActionInfo: {},
      goodBuyModalInfo: [],
      popupShow: false,
      currentPupopIndex: null,
      formData: {
        insured: "1",
        payway: "1",
        medical: "1",
        auto: false,
        pact: false
      },
      goInsureState: false,
      showLayer: false
    };
  },
  watch: {
    headerInfo: {
      deep: true,
      handler(val) {
        const { price, subPrice } = val;
        this.goodActionInfo = {
          title: price,
          sub: subPrice
        };
        this.goodBuyModalInfo = [
          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
        ];
      }
    }
  },
  computed: {
    pupopData() {
      const { popupArray, currentPupopIndex } = this;
      return popupArray[currentPupopIndex] || {};
    },
    personFormOptions() {
      const { insuredOptions, paywayOptions, medicalOptions } = this;
      return {
        insuredOptions,
        paywayOptions,
        medicalOptions
      };
    }
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    openIframePupop(index) {
      if (index === 4) {
        this.$router.push({ path: "/goods/plan", query: { type: this.type } });
        return;
      }
      this.currentPupopIndex = index;
      this.popupShow = true;
    },
    async getDetail() {
      this.goodId = this.$route.query.id;
      const res = await detail({ productNo: this.goodId });
      if (res) {
        this.headerInfo.price[0] = res.firstMonthPrice;
        this.headerInfo.subPrice[0] = res.price;
        this.headerInfo.company = res.companyName;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
