<template>
  <div class="home">
    <cr-image
      class="home-activity"
      width=""
      height=""
      fit="cover"
      src="@/assets/images/home/activity@2x.png"
    />
    <div class="home-button"></div>
    <div class="home-service">
      <router-link tag="div" to="/home/smart-measure" class="home-service-item">
        <svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
        <span class="Hs-item-text">智能风险评测</span>
      </router-link>
      <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">
        <a :href="articleList[0].url" target="_blank" class="Hc-card-question">
          {{ articleList[0].title }}
        </a>
        <p class="Hc-card-result">已有1.8万人认为有用</p>
        <div
          class="Hc-card-operation"
          :class="{ active: articleUseful === '0' }"
          @click="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="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="@/assets/images/home/teacher@2x.png"
        />
      </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 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";

export default {
  name: "Home",
  components: {
    GoodList,
    Tabbar,
    Copyright
  },
  data() {
    return {
      ...settings,
      goodsList,
      articleUseful: localStorage.getItem("articleUseful"),
      articleList: [
        {
          title: "25~45岁间该怎么买保险",
          url: "https://mp.weixin.qq.com/s/yG_n8cnvsFd9NPIYZycYvg"
        },
        {
          title: "有了医保，还需要买商业保险吗？",
          url: "https://mp.weixin.qq.com/s/6GZTTDwwHMHaIKFib7QGfg"
        },
        {
          title: "常见保险有几类，作用是什么？",
          url: "https://mp.weixin.qq.com/s/rIhVsxnxcxHfiYHIwq11hQ"
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    clickUsefulOption(val) {
      this.articleUseful = val;
      localStorage.setItem("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;
              item.regularPrice = it.regularPrice ?? 0;
              // item.title = it.title ?? item.title;
            }
          });
        });
        this.goodsList = goodsList;
        this.getGoodsLink();
      }
    },
    async getGoodsLink() {
      const res = await getLink();
      if (res) {
        this.goodsList[3].url = res.url;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
