<template>
  <div class="report">
    <div class="report-container">
      <div class="report-container-head">
        <cr-image class="Rc-head-left" round width="" height="" fit="cover" :src="avatar" />
        <div class="Rc-head-right">
          <p>{{ username }}</p>
          <p>风险测评报告</p>
        </div>
      </div>
      <div class="report-container-degree">
        <p class="Rc-degree-title">风险程度 <span>高</span></p>
        <cr-progress class="Rc-degree-progress" :percentage="85" :show-pivot="false" />
        <p class="Rc-degree-pointer">
          <span>低</span>
          <span>中</span>
          <span>高</span>
        </p>
        <p class="Rc-degree-desc">整体风险程度高，建议保持良好的生活习惯，增强相关保障。</p>
      </div>
      <div class="report-container-analyze">
        <p class="Rc-analyze-title">风险分析</p>
        <p class="Rc-analyze-desc">
          {{ analyzeObj.text }}
        </p>
        <cr-image class="Rc-analyze-image" width="" height="" fit="contain" :src="analyzeObj.img" />
      </div>
      <div class="report-container-plan">
        <p class="Rc-plan-title">适合你的保险方案</p>
        <p class="Rc-plan-advice">建议投保优先级</p>
        <p class="Rc-plan-priority">
          <span v-for="item in priority" :key="item">{{ item }}</span>
        </p>
        <p class="Rc-plan-desc">
          你的身体处在黄金期，但不可以掉以轻心，话习惯会影响到未来，适当的运动很重要，奋斗的同时一定也要合理的休息。
        </p>
        <div class="Rc-plan-card" v-for="item in planList" :key="item.id">
          <div class="Rcp-card-head">
            <cr-image
              class="Rcpc-head-left"
              width=""
              height=""
              fit="cover"
              :src="productImg(item.itype)"
            />
            <span class="Rcpc-head-right">{{ item.paymentInstruction }}</span>
          </div>
          <div class="Rcp-card-body">
            <p class="Rcpc-body-title">{{ item.title }}</p>
            <p class="Rcpc-body-desc">{{ item.sub }}</p>
            <div class="Rcpc-body-opera">
              <p class="Rcpcb-opera-left">
                <span>{{ `¥${item.price}` }}</span
                >{{ item.unit | unit }}
              </p>
              <cr-button class="Rcpcb-opera-right" @click="goDetail(item)">
                去投保
              </cr-button>
            </div>
          </div>
        </div>
      </div>
      <div class="report-container-retest" @click="goBack">
        <svg-icon icon-class="retest" class-name="Rc-retest-svg" />
        <span class="Rc-retest-text">重测一遍</span>
      </div>
      <div class="report-container-explain" @click="$router.push('/consultant')"></div>
    </div>
  </div>
</template>
<script>
import male from "@/assets/images/user/male@2x.png";
import female from "@/assets/images/user/female@2x.png";
import reportLessThan60 from "@/assets/images/home/report_18-59@2x.png";
import reportGreaterThan59 from "@/assets/images/home/report_60-80@2x.png";
import medical from "@/assets/images/home/medical@2x.png";
import illness from "@/assets/images/home/illness@2x.png";
import life from "@/assets/images/home/life@2x.png";
import casualty from "@/assets/images/home/casualty@2x.png";
import { mapState } from "vuex";
import GOODS_LIST from "@/api/goodsList.mock";
import { list } from "@/api/product";
import { getRiskEvaluation } from "@/api/smartMeasure";
import autoSaveForm from "@/mixins/autoSaveForm.mixin";

export default {
  name: "Report",
  mixins: [autoSaveForm],
  data() {
    return {
      answers: {
        age: 18,
        gender: 1
      },
      goodsList: GOODS_LIST
    };
  },
  async created() {
    if (!this.$route.query.age && !this.$route.query.gender) {
      const result = await getRiskEvaluation();
      if (result.age && result.gender) {
        this.answers = result;
      }
    } else {
      this.answers = this.$route.query;
    }
    this.refreshGoodsList();
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    username() {
      return this.userInfo?.name === "未登录" ? "您" : this.userInfo.name;
    },
    avatar() {
      return +this.answers?.gender === 1 ? male : female;
    },
    analyzeObj() {
      return {
        text:
          this.answers?.age < 60
            ? "您是家庭的重要成员，健康的生活习惯会让您未来受益匪浅，必要的配备健康保障，也是对个人和家庭更负责任的体现，奋斗的同时也要关注保障哦~"
            : "您是家庭中健康风险较高的成员，合理规避医疗风险，能够为家庭减轻生活压力和收入损失。同时，也要保持良好的生活习惯和心态哦~",
        img: this.answers?.age < 60 ? reportLessThan60 : reportGreaterThan59
      };
    },
    planList() {
      const ids = this.answers?.age < 60 ? ["ZAYWX001", "HGSX001"] : ["ZAYWX001"];
      const goods = this.goodsList.filter(v => ids.includes(v.id));
      return goods;
    },
    priority() {
      const types =
        this.answers?.age < 60 ? ["医疗险", "重疾险", "意外险", "寿险"] : ["医疗险", "意外险"];
      return types.map((v, index) => `${index + 1}.${v}`);
    }
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        path: "/goods/detail",
        query: { id: item.id, type: item.itype }
      });
    },
    goBack() {
      this.clearSaveHandler("smartMeasureList");
      this.$router.push("/home/smart-measure");
    },
    productImg(itype) {
      let result = "";
      switch (itype) {
        case "mi":
          result = medical;
          break;
        case "cii":
          result = illness;
          break;
        case "ai":
          result = casualty;
          break;
        case "li":
          result = life;
          break;
      }
      return result;
    },
    async refreshGoodsList() {
      const goods = await list();
      this.goodsList.forEach(item => {
        goods.forEach(it => {
          if (it.productNo === item.id) {
            item.price = it.downPayPrice ?? item.price;
          }
        });
      });
    }
  },
  filters: {
    unit: value => {
      return value === "年起" ? " / 年起" : ` ${value}`;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
