<template>
  <div class="container">
    <div class="cul-hd">
      <div class="cul-hd-rec">
        <small class="cul-hd-rec-sub"> HI,{{ goodInfo.name || "-" }}</small>
        <h4 class="cul-hd-rec-title">以下是您{{ goodInfo.relation || "-" }}的专属保险方案</h4>
      </div>
      <card title="1">
        <h5 class="cul-hd-card-title" slot="header">
          总保费：
          <strong>{{ goodInfo.totalAmount || "-" }}</strong>
          元/年
        </h5>
        <p class="cul-hd-card-content">
          推荐理由：
          {{ goodInfo.remarks || "-" }}
        </p>
      </card>
    </div>
    <div class="cul-det">
      <card title="保障分布">
        <div class="cul-dist">
          <div class="cul-dist-item" v-for="(item, index) in goodInfo.ensure" :key="index">
            <h3>{{ item.insuredAmount }}</h3>
            <p>{{ item.productType }}</p>
          </div>
        </div>
      </card>
      <card title="保障总览">
        <table class="table">
          <thead>
            <tr>
              <th style="width: 19%">险种</th>
              <th style="width: 20%">保额</th>
              <th style="width: 23%">保障期限</th>
              <th style="width: 17%">缴费期</th>
              <th style="width: 20%">保费</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in goodInfo.ensure" :key="index">
              <th>{{ item.productType }}</th>
              <th>{{ item.insuredAmount }}</th>
              <th>{{ item.term }}</th>
              <th>{{ item.paymentPeriod }}</th>
              <th>{{ item.price || "-" }}元</th>
            </tr>
          </tbody>
        </table>
      </card>
      <card title="保障产品">
        <div class="good-item" v-for="(item, index) in goodInfo.ensure" :key="index">
          <div class="good-title">
            {{ item.productName || "" }}
            <cr-tag :type="tagFilter(item.productType)" plain>{{ item.productType }}</cr-tag>
          </div>
          <div class="good-date">
            <span class="good-date-item">
              保额 | <strong>{{ item.insuredAmount }}</strong>
            </span>
            <span class="good-date-item">
              缴费期 | <strong>{{ item.paymentPeriod }}</strong>
            </span>
            <span class="good-date-item">
              保障期限 | <strong>{{ item.term }}</strong>
            </span>
          </div>
          <div class="good-price">
            <div class="good-price-item">
              <strong>{{ item.firstPrice && item.firstPrice.split("元")[0] }}</strong>
              元{{ item.firstPrice && item.firstPrice.split("元")[1] }}
            </div>
            <cr-button type="warning" @click="goDetail(item.productNo, item.productType)">
              去投保
            </cr-button>
          </div>
          <div class="good-reason">
            <div class="good-reason-avator">
              <cr-image :src="avator" width="28px" height="28px" />
            </div>
            <div class="good-reason-content">
              推荐理由：
              {{ item.reason }}
            </div>
          </div>
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import Card from "@/components/Card";
import { getCulsuggestion } from "@/api/consultant";
import avator from "@/assets/images/consultant/avator.png";
export default {
  name: "ConsultantSuccess",
  components: {
    Card
  },
  data() {
    return {
      avator,
      goodInfo: {
        ensure: []
      },
      distList: [
        { title: "医疗险", price: "500万" },
        { title: "重疾险", price: "50万" },
        { title: "意外险", price: "60万" },
        { title: "寿险", price: "350万" }
      ],
      overviewList: [
        {
          id: 1,
          goods: "国民保·百万医疗险",
          type: "mi",
          title: "医疗险",
          amount: "600万",
          range: "1年",
          way: "趸交",
          price: "350元",
          goodsPirce: "3000",
          goodsUnit: "元/每年",
          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
        },
        {
          id: 2,
          goods: "康惠保2020终身重疾险",
          type: "cii",
          title: "重疾险",
          amount: "50万",
          range: "终身",
          way: "20年",
          price: "6000元",
          goodsPirce: "6000",
          goodsUnit: "元/每年",
          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
        },
        {
          id: 3,
          goods: "国民保·百万意外险",
          type: "ai",
          title: "意外险",
          amount: "50万",
          range: "1年",
          way: "趸交",
          price: "350元",
          goodsPirce: "3000",
          goodsUnit: "元/每年",
          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
        },
        {
          id: 4,
          goods: "国民保·百万寿险",
          type: "li",
          title: "寿险",
          amount: "350万",
          range: "保至70岁",
          way: "20年",
          price: "3725元",
          goodsPirce: "3000",
          goodsUnit: "元/每年",
          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
        }
      ]
    };
  },
  mounted() {
    this.getSuggestion();
  },
  methods: {
    tagFilter(type) {
      let _type = "";
      switch (type) {
        case "医疗":
          _type = "warning";
          break;
        case "重疾":
          _type = "danger";
          break;
        case "意外":
          _type = "primary";
          break;
        case "寿险":
          _type = "";
          break;
        default:
          _type = "";
          break;
      }
      return _type;
    },
    goDetail(id, type) {
      this.$router.push({ url: "/goods/detail", query: { id, type } });
    },
    async getSuggestion() {
      const res = await getCulsuggestion();
      if (res) {
        this.goodInfo = res;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
