<template>
  <div class="home">
    <cr-image
      class="home-activity"
      width=""
      height=""
      fit="cover"
      src="@/assets/images/home/activity_medical@2x.png"
    />
    <div class="home-button" @click="goActivity()"></div>
    <div class="home-service">
      <div @click="goSmartMeasure" class="home-service-item">
        <svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
        <span class="Hs-item-text">智能风险评测</span>
      </div>
      <router-link tag="div" to="/consultant" class="home-service-item">
        <svg-icon icon-class="consult-service" class-name="Hs-item-svg" />
        <span class="Hs-item-text">1对1咨询服务</span>
      </router-link>
    </div>
    <div class="home-select">
      <p class="home-select-title">芒果保险精选推荐</p>
      <div class="home-select-desc">
        <div class="Hs-desc-item">
          <svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
          <span class="Hsd-item-text">全网精选</span>
        </div>
        <div class="Hs-desc-item">
          <svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
          <span class="Hsd-item-text">高性价比</span>
        </div>
        <div class="Hs-desc-item">
          <svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
          <span class="Hsd-item-text">理赔口碑好</span>
        </div>
      </div>
      <good-list :list="goodsList" class="home-select-goods"></good-list>
    </div>
    <div class="home-classroom">
      <p class="home-classroom-title">芒果小课堂</p>
      <div class="home-classroom-card" @click="goArticle(0)">
        <a
          :href="articleList[0].url"
          target="_blank"
          class="Hc-card-question"
          v-html="articleList[0].title"
        >
        </a>
        <p class="Hc-card-result">已有1.8万人认为有用</p>
        <div
          class="Hc-card-operation"
          :class="{ active: articleUseful === '0' }"
          @click.stop="clickUsefulOption('0')"
        >
          <svg-icon class-name="Hcc-operation-svg" icon-class="useful" />
          <span class="Hcc-operation-text">有用</span>
        </div>
        <div
          class="Hc-card-operation"
          :class="{ active: articleUseful === '1' }"
          @click.stop="clickUsefulOption('1')"
        >
          <svg-icon class-name="Hcc-operation-svg" icon-class="useless" />
          <span class="Hcc-operation-text">没用</span>
        </div>
        <cr-image
          class="Hc-card-image"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/home/teacher@2x.png"
        />
      </div>
      <a
        :href="item.url"
        class="home-classroom-item"
        v-for="(item, index) in articleList.slice(1)"
        :key="index"
      >
        <div class="Hc-item-left">
          <p>{{ item.title }}</p>
          <p>芒果小课堂</p>
        </div>
        <cr-image class="Hc-item-right" width="" height="" fit="cover" :src="item.img" />
      </a>
    </div>
    <!-- <div class="home-phone">
      <p>
        客服电话：<a :href="`tel:${tel}`">{{ tel }}</a>
      </p>
      <p>服务时间：{{ serviceHours }}</p>
    </div> -->
    <copyright :logo="true" />
    <tabbar></tabbar>
  </div>
</template>
<script>
import { mapState } from "vuex";
import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar";
import Copyright from "@/components/Copyright";
import { list, getLink } from "@/api/product";
import goodsList from "@/api/goodsList.mock";
import settings from "@/api/settings";
import { getRiskEvaluation } from "@/api/smartMeasure";
import localStorage from "@/service/localStorage";
import { has } from "lodash-es";
import qa_2_img from "@/assets/images/home/qa-2@2x.png";
import qa_3_img from "@/assets/images/home/qa-3@2x.png";

export default {
  name: "Home",
  components: {
    GoodList,
    Tabbar,
    Copyright
  },
  data() {
    return {
      ...settings,
      goodsList,
      articleUseful: localStorage.get("articleUseful"),
      mongoToken: localStorage.get("mongoToken"),
      articleList: [
        {
          title: "有了医保，<br>还需要买商业保险吗？",
          url: "https://mp.weixin.qq.com/s/6GZTTDwwHMHaIKFib7QGfg"
        },
        {
          title: "常见保险有几类，作用是什么？",
          url: "https://mp.weixin.qq.com/s/rIhVsxnxcxHfiYHIwq11hQ",
          img: qa_2_img
        },
        {
          title: "25~45岁间该怎么买保险",
          url: "https://mp.weixin.qq.com/s/yG_n8cnvsFd9NPIYZycYvg",
          img: qa_3_img
        }
      ],
      report: {}
    };
  },
  watch: {
    isShowLogin(val) {
      if (!val) {
        this.mongoToken = localStorage.get("mongoToken");
        if (this.mongoToken) {
          this.getGoodsLink();
        }
      }
    }
  },
  computed: {
    ...mapState(["isShowLogin"])
  },
  async mounted() {
    this.getList();
    if (this.mongoToken) {
      this.report = await getRiskEvaluation();
    }
  },
  methods: {
    goActivity() {
      this.$router.push({
        path: "/goods/detail",
        query: { id: "TKYLX001", type: "mi" }
      });
    },
    clickUsefulOption(val) {
      this.articleUseful = val;
      localStorage.set("articleUseful", val);
    },
    async getList() {
      const res = await list();
      if (res) {
        goodsList.forEach(item => {
          res.forEach(it => {
            if (it.productNo === item.id) {
              item.price = it.downPayPrice ?? item.price;
            }
          });
        });
        this.goodsList = goodsList;
        this.getGoodsLink();
      }
    },
    async getGoodsLink() {
      if (!localStorage.get("mongoToken")) return;
      const res = await getLink();
      if (res) {
        this.goodsList[3].url = res.url;
      }
    },
    async goSmartMeasure() {
      if (has(this.report, "age") && has(this.report, "gender")) {
        this.$router.push({
          path: "/home/smart-measure/report",
          query: this.report
        });
      } else {
        this.$router.push("/home/smart-measure");
      }
    },
    goArticle(index) {
      window.location.href = this.articleList[index].url;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
