<template>
  <div class="container">
    <div class="cul-hd">
      <div class="cul-hd-rec">
        <small class="cul-hd-rec-sub">
          HI,{{ baseInfo.userName }}{{ baseInfo.sex === 1 ? "先生" : "女士" }}
        </small>
        <h4 class="cul-hd-rec-title">以下是您本人的专属保险方案</h4>
      </div>
      <card title="1">
        <h5 class="cul-hd-card-title" slot="header">
          总保费：
          <strong>{{ baseInfo.amount }}</strong>
          {{ baseInfo.unit }}
        </h5>
        <p class="cul-hd-card-content">
          推荐理由：
          {{ baseInfo.reason }}
        </p>
      </card>
    </div>
    <div class="cul-det">
      <card title="保障分布">
        <div class="cul-dist">
          <div class="cul-dist-item" v-for="(item, index) in distList" :key="index">
            <h3>{{ item.price }}</h3>
            <p>{{ item.title }}</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 overviewList" :key="index">
              <th>{{ item.title }}</th>
              <th>{{ item.amount }}</th>
              <th>{{ item.range }}</th>
              <th>{{ item.way }}</th>
              <th>{{ item.price }}</th>
            </tr>
          </tbody>
        </table>
      </card>
      <card title="保障产品">
        <div class="good-item" v-for="(item, index) in overviewList" :key="index">
          <div class="good-title">
            {{ item.goods }}
            <cr-tag :type="tagFilter(item.type)">{{ item.title }}</cr-tag>
          </div>
          <div class="good-date">
            <span class="good-date-item">
              保额 | <strong>{{ item.amount }}</strong>
            </span>
            <span class="good-date-item">
              缴费期 | <strong>{{ item.way }}</strong>
            </span>
            <span class="good-date-item">
              保障期限 | <strong>{{ item.range }}</strong>
            </span>
          </div>
          <div class="good-price">
            <div class="good-price-item">
              <strong>{{ item.goodsPirce }}</strong>
              {{ item.goodsUnit }}
            </div>
            <cr-button type="warning" @click="goDetail(item.id, item.type)">去投保</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 avator from "@/assets/images/consultant/avator.png";
export default {
  name: "ConsultantSuccess",
  components: {
    Card
  },
  data() {
    return {
      avator,
      baseInfo: {
        userName: "王斌",
        sex: 1,
        amount: 10425,
        unit: "元/年",
        reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
      },
      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() {},
  methods: {
    tagFilter(type) {
      let _type = "";
      switch (type) {
        case "mi":
          _type = "warning";
          break;
        case "cii":
          _type = "danger";
          break;
        case "ai":
          _type = "primary";
          break;
        case "li":
          _type = "light";
          break;
        default:
          _type = "light";
          break;
      }
      return _type;
    },
    goDetail(id, type) {
      this.$router.push({ url: "/goods/detail", query: { id, type } });
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
