<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 plan-table">
          <thead>
            <tr>
              <th style="width: 16%">险种</th>
              <th style="width: 18%">保额</th>
              <th style="width: 25%">保障期限</th>
              <th style="width: 17%">缴费期</th>
              <th style="width: 22%">保费</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in goodInfo.ensure" :key="index">
              <td>{{ item.productType }}</td>
              <td>{{ item.insuredAmount }}</td>
              <td>{{ item.term }}</td>
              <td>{{ item.paymentPeriod }}</td>
              <td>{{ item.price || "-" }}元</td>
            </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="tagClassFilter(item.productNo)" plain>
              {{ tagFilter(item.productNo) }}
            </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.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 { getLink } from "@/api/product";
import avator from "@/assets/images/consultant/avator.png";
import goods from "@/api/goodsList.mock";
export default {
  name: "ConsultantSuccess",
  components: {
    Card
  },
  data() {
    return {
      avator,
      goods,
      goodInfo: {
        ensure: []
      }
    };
  },
  computed: {
    ensureList() {
      return this.goodInfo.ensure
        ? this.goodInfo.ensure.map(item => {
            item.detailIndex = this.goods.findIndex(it => it.id === item.productNo);
            return item;
          })
        : [];
    }
  },
  mounted() {
    this.getSuggestion();
    this.getGoodsLink();
  },
  methods: {
    tagFilter(type) {
      let _type = "";
      switch (type) {
        case "TKYLX001":
          _type = "医疗险";
          break;
        case "BNZJX001":
        case "HTDQZJX001":
          _type = "重疾险";
          break;
        case "ZAYWX001":
          _type = "意外险";
          break;
        case "HGSX001":
          _type = "人寿险";
          break;
        default:
          _type = "";
          break;
      }
      return _type;
    },
    tagClassFilter(type) {
      let _type = "";
      switch (type) {
        case "TKYLX001":
          _type = "warning";
          break;
        case "BNZJX001":
        case "HTDQZJX001":
          _type = "danger";
          break;
        case "ZAYWX001":
          _type = "primary";
          break;
        case "HGSX001":
          _type = "";
          break;
        default:
          _type = "";
          break;
      }
      return _type;
    },
    goDetail(index) {
      const goodItem = this.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;
      }
    },
    async getGoodsLink() {
      const res = await getLink();
      if (res) {
        this.goods.forEach(item => {
          if (item.id === "BNZJX001") {
            item.url = res.url;
          }
        });
        this.$forceUpdate();
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
