<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 ensureList" :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(detailIndex)">
              去投保
            </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";
import goods from "@/api/goodsList.mock";
export default {
  name: "ConsultantSuccess",
  components: {
    Card
  },
  data() {
    return {
      avator,
      goodInfo: {
        ensure: []
      },
      distList: [
        { title: "医疗险", price: "500万" },
        { title: "重疾险", price: "50万" },
        { title: "意外险", price: "60万" },
        { title: "寿险", price: "350万" }
      ]
    };
  },
  computed: {
    ensureList() {
      return this.goodInfo.ensure
        ? this.goodInfo.ensure.map(item => {
            item.detailIndex = goods.findIndex(it => it.id === item.productNo);
            return item;
          })
        : [];
    }
  },
  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(index) {
      const goodItem = goods[index];
      if (!goodItem.allow) {
        return;
      }
      if (goodItem.url) {
        window.location.href = goodItem.url;
      } else {
        const { id, itype } = goodItem;
        this.$router.push({
          path: "/goods/detail",
          query: { id, type: itype }
        });
      }
    },
    async getSuggestion() {
      const res = await getCulsuggestion();
      if (res) {
        this.goodInfo = res;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
