<template>
  <div class="container">
    <div class="cul-hd">
      <img src="../../../assets/logo-top.png" alt="logo" class="cul-hd-logo" />
      <div class="cul-hd-rec">
        <h4 class="cul-hd-rec-title">最高节省50%保费</h4>
      </div>
      <div class="cul-hd-card">
        <div class="cul-hd-card-title">您将获得的服务</div>
        <div class="cul-hd-service">
          <div class="cul-hd-service-item" v-for="(item, index) in serviceList" :key="index">
            <svg-icon :icon-class="item.icon" />
            <h5>{{ item.title }}</h5>
            <p>{{ item.sub }}</p>
          </div>
        </div>
        <div class="cul-hd-stock">
          <h4 class="cul-hd-stock-title">
            还剩
            <strong>{{ remain }}</strong>
            份
          </h4>
          <div class="cul-hd-progress">
            <cr-progress
              :show-pivot="false"
              stroke-width="6"
              color="#FFC842"
              track-color="#F9F3F3"
              :percentage="remainPercentage"
            />
          </div>
        </div>
        <div class="cul-hd-card-foot">
          <cr-button type="warning" block @click="checkLogin">{{ price[0] }}元聘请</cr-button>
          <cr-tag class="cul-hd-discount" shape="round" v-if="price[0] !== price[1]">
            <strong>限时优惠</strong>
            <del>
              <span>原价</span>
              <em>{{ price[1] }}</em>
              <span>元</span>
            </del>
          </cr-tag>
        </div>
      </div>
    </div>
    <div class="cul-det">
      <card title="想买保险，你是不是也有这些疑问?">
        <cr-image src="@/assets/images/consultant/intro.png" width="100%" height="auto" />
      </card>
      <card title="芒果保险·1对1保险顾问来帮您">
        <div class="cul-odds-sign">
          <div class="cul-odds-sign-item" v-for="(item, index) in oddsList" :key="index">
            <svg-icon :icon-class="item.icon" />
            <h5>{{ item.title }}</h5>
            <p v-for="(it, index) in item.sub" :key="index">{{ it }}</p>
          </div>
        </div>
        <div class="cul-odds-list">
          <div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
            <div class="cul-odds-list-title">
              <i class="cul-odds-list-title-icon">{{ index + 1 }}</i>
              <span class="cul-odds-list-title-txt">{{ item.title }}</span>
            </div>
            <div class="cul-odds-list-content">
              <div class="cul-odds-list-content-item" v-for="(it, idx) in item.children" :key="idx">
                <div class="cul-odds-list-content-title">
                  <svg-icon icon-class="check-circle" />
                  {{ it[0] }}
                </div>
                <div class="cul-odds-list-content-txt">{{ it[1] }}</div>
              </div>
            </div>
          </div>
        </div>
      </card>
      <cps-qa :qa-data="qaInfo" :more="false" />
    </div>
    <pay-wait-layer :value="isPayWait" />
  </div>
</template>

<script>
import localStorage from "@/service/localStorage";
import { payByWay } from "@/service/pay";
import { isXyqb, isWeixinBrower } from "@/service/validation";
import { mapActions, mapState } from "vuex";
import { create, goPay, getRemainNum } from "@/api/consultant";
import Card from "@/components/Card";
import Collapse from "@/components/Collapse";
import PayWaitLayer from "@/components/PayWaitLayer";
import CpsQa from "../../Goods/Detail/modules/CpsQA";
const SUM = 300;
export default {
  name: "ConsultantBuy",
  components: {
    Card,
    CpsQa,
    // eslint-disable-next-line
    Collapse,
    PayWaitLayer
  },
  props: {
    state: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      isLogin: localStorage.get("mongoToken"),
      remain: 0,
      price: [0.99, 199],
      consultantOrderNo: "",
      openId: localStorage.get("openId"),
      isPayWait: false,
      tradeType: isXyqb ? "MWEB" : isWeixinBrower ? "JSAPI" : "MWEB",
      serviceList: [
        { icon: "team", title: "资深", sub: "保险精算团队" },
        { icon: "card", title: "专属", sub: "保险顾问" },
        { icon: "computer", title: "全程", sub: "一站式服务" }
      ],
      oddsList: [
        { icon: "ticket-shadow", title: "省钱", sub: ["最高节省", "50%保费"] },
        { icon: "shield-shadow", title: "放心", sub: ["中立客观", "量身定制"] },
        {
          icon: "ok-shadow",
          title: "专业",
          sub: ["条款解读", "有效投保", "协助理赔"]
        }
      ],
      oddsInsureList: [
        {
          title: "投保前",
          children: [
            ["全方位评估:", "360°筛查、识别、评估您的家庭风险"],
            [
              "量身筛选:",
              "根据您的自身情况，分析对比几百款产品，选出最适合的保障方案，最高节省50%保费"
            ],
            ["保单诊断:", "全面评估已有保单，中立、客观的给您提供针对性的意见 "]
          ]
        },
        {
          title: "投保中",
          children: [
            ["条款解读:", "为您解释复杂难懂的条款"],
            ["有效投保:", "为您做好健康告知，做到有效投保"]
          ]
        },
        {
          title: "投保后",
          children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
        }
      ],
      qaInfo: [
        {
          q: "有了社保，还需要买保险吗？",
          a: `<p style="margin-bottom: 5px;">需要的。社保是基础保障，优势是覆盖范围广，劣势是抵御风险能力有限，社保报销外的自付部分，可以用商业保险来保障。</p>
              <p style="margin-bottom: 5px;">比如【百万医疗险】的作用是补充社保，报销因大病造成的高额医疗负担；</p>
              <p style="margin-bottom: 5px;">比如【重大疾病险】的作用是弥补因病造成的收入损失、维持家庭正常运转的成本；</p>
              <p style="margin-bottom: 5px;">比如【意外险】的作用是保障意外风险，弥补家庭劳动力确实造成的收入损失。</p>
              <p style="margin-bottom: 5px;">比如【寿险】的作用是身故赔付，是对家庭责任的延续。</p>
            `
        },
        {
          q: "我是小白，买保险应该怎么买？",
          a: `<p style="margin-bottom: 5px;">健康类保险最基本的分为【医疗险】【重疾险】【意外险】【定期寿险】四类。</p>
            <p style="margin-bottom: 5px;">【医疗险】通常需要提供“医疗票据”实报实销，赔付的保险金保障了因“疾病”、“意外”产生的医疗费用。</p>
            <p style="margin-bottom: 5px;">【重疾险】通常需要提供“确诊证明”一次性获得赔付的保险金，前提是罹患的重大疾病在合同约定内。</p>
            <p style="margin-bottom: 5px;">【意外险】通常需要提供“身故证明”或“致残证明”获得赔付的保险金，前提是“身故”、“致残”是因意外事件导致。</p>
            <p style="margin-bottom: 5px;">【定期寿险】通常需要提供“身故证明”一次性赔付，赔付的保险金在一定程度上，缓解了家庭因被保人身故导致的经济压力。</p>
            `
        },
        {
          q: "百万医疗险和重大疾病险有什么区别？",
          a: `<p style="margin-bottom: 5px;">【医疗险】和【重疾险】的区别主要有2种。</p>
             <p style="margin-bottom: 5px;">一、【医疗险】是报销型，合理医疗费花多少报多少。<br />
                【重疾险】是给付型，确诊后即可获得赔付，买多少保额赔多少钱。</p>
           <p style="margin-bottom: 5px;"> 二、【医疗险】的本质是应对医疗支出。<br />
                【重疾险】的本质是弥补因病导致的收入损失。</p>
          `
        },
        {
          q: "我是中低收入，应该怎么买保险？",
          a: `<p style="margin-bottom: 5px;">对于大部分家庭来讲，每年比较合理的保费支出占可支配收入的5%~10%。</p>
              <p style="margin-bottom: 5px;">低收入家庭：建议配置【医疗险】+【意外险】</p>
              <p style="margin-bottom: 5px;">中收入家庭：建议酌情配置【医疗险】+【重疾险】+【意外险】</p>
              <p style="margin-bottom: 5px;">有条件的家庭：可以配置【高端医疗险】+【重疾险】+【意外险】+【寿险】</p>`
        },
        {
          q: "“消费型保险”和“返还型保险”是什么意思？",
          a: `<p style="margin-bottom: 5px;">简单讲，“消费型保险”在合同到期后不返还保费，“返还型保险”在合同到期后返还保费。</p>
            <p style="margin-bottom: 5px;">【消费型保险】重点在“保障”，合同期内发生风险，保险公司赔偿保险金，合同期外发生风险，保险公司不赔偿也不退回保费。</p>
            <p style="margin-bottom: 5px;">【返还型保险】重点在“返还”，合同期内发生风险，保险公司赔偿保险金，合同到期未赔偿，保险公司退回保费。</p>
            <p style="margin-bottom: 5px;">两种类型的保险各有优势，而且“返回型保险”种类繁多，建议投保人咨询“闪电保险1对1保险顾问”进行详细了解。</p>
          `
        },
        {
          q: "医疗险可以重复购买吗?",
          a: `<p style="margin-bottom: 5px;">不建议重复购买。</p>
              <p style="margin-bottom: 5px;">医疗险属于报销型，原则上报销后的医疗费不得高于已支付的医疗费。</p>
              <p style="margin-bottom: 5px;">医疗险在报销时，通常由一家保险公司报销，如果达到报销额度上限还未报销完，且购买其他医疗险，可由第二家保险公司接着报销。</p>
              <p style="margin-bottom: 5px;">现在常见的【百万医疗险】保额可达600万，基本上可以覆盖所有的医疗费用。</p>`
        }
      ]
    };
  },
  computed: {
    ...mapState(["isShowLogin"]),
    remainPercentage() {
      return Math.floor((this.remain / SUM) * 100);
    }
  },
  watch: {
    isShowLogin(val) {
      if (!val) {
        this.isLogin = localStorage.get("mongoToken");
      }
    },
    isLogin() {
      this.checkLogin();
    }
  },
  mounted() {
    this.updateRemain();
  },
  methods: {
    ...mapActions(["setIsShowLogin"]),
    checkLogin() {
      if (!this.isLogin) {
        this.setIsShowLogin(true);
        return;
      }
      if (this.state == 1) {
        this.goPay();
      } else {
        this.generateOrder();
      }
    },
    async updateRemain() {
      const res = await getRemainNum();
      if (res) {
        this.remain = res;
      }
    },
    async generateOrder() {
      this.isPayWait = true;
      const res = await create();
      if (res) {
        this.consultantOrderNo = res.consultantOrderNo;
        this.updateRemain();
        this.goPay();
      }
    },
    async goPay() {
      this.isPayWait = true;
      try {
        const res = await goPay({ tradeType: this.tradeType, openId: this.openId });
        if (res) {
          let payInfo = "";
          if (res.payInfo && res.payInfo.payUrl) {
            payInfo = {
              url: res.payInfo.payUrl,
              params: {
                tradeType: this.tradeType,
                openId: this.openId,
                isConsultant: 1,
                state: 1
              }
            };
          } else if (
            this.tradeType === "JSAPI" &&
            !res.payUrl &&
            res.payInfo &&
            !res.payInfo.payUrl
          ) {
            payInfo = res.payInfo;
          } else {
            payInfo = {
              url: res.payUrl,
              params: {
                tradeType: this.tradeType,
                isConsultant: 1,
                openId: this.openId,
                state: 1
              }
            };
          }
          payByWay(this.tradeType, payInfo).then(() => {
            setTimeout(() => {
              this.$parent.getOrderInfo(true);
            }, 1000);
          });
        }
      } catch (error) {
        this.isPayWait = false;
        setTimeout(() => {
          this.$parent.getOrderInfo(true);
        }, 1000);
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
