<template>
  <div class="container">
    <cr-sticky class="goods-head">
      <cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
        <cr-tabbar-item>全部</cr-tabbar-item>
        <cr-tabbar-item>成人</cr-tabbar-item>
        <cr-tabbar-item>老年</cr-tabbar-item>
        <cr-tabbar-item>少儿</cr-tabbar-item>
      </cr-tabbar>
    </cr-sticky>
    <good-list :list="list" :style="{ opacity: goodsList.length > 0 ? 1 : 0 }" />
    <ai-test-tip @click.native="showLayer = true" />
    <copyright :logo="true" />
    <tabbar></tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import goodsList from "@/api/goodsList.mock";
import { list, getLink } from "@/api/product";
import localStorage from "@/service/localStorage";
import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar";
import copyright from "@/components/Copyright";
import InstructionModal from "./Detail/modules/InstructionModal";

const categoryList = [
  {
    title: "住院医疗险",
    sub: "报销医药费，有无社保均可保",
    children: []
  },
  {
    title: "重大疾病险",
    sub: "责任内疾病确诊即赔",
    children: []
  },
  {
    title: "意外伤害险",
    sub: "意外保障无等待期",
    children: []
  },
  {
    title: "人寿保险",
    sub: "避免家庭顶梁柱身故，导致的生活压力",
    children: []
  }
];

export default {
  name: "GoodsList",
  components: {
    AiTestTip,
    GoodList,
    Tabbar,
    copyright,
    InstructionModal,
  },
  data() {
    return {
      active: 0,
      showLayer: false,
      goodsList: [],
      mongoToken: localStorage.get("mongoToken"),
      goodsLink: "",
      showInstruction: true
    };
  },
  watch: {
    isShowLogin(val) {
      if (!val) {
        this.mongoToken = localStorage.get("mongoToken");
        if (this.mongoToken) {
          this.getGoodsLink();
        }
      }
    }
  },
  computed: {
    ...mapState(["isShowLogin"]),
    list() {
      const { active, goodsLink } = this;
      const _catList = JSON.parse(JSON.stringify(categoryList));
      this.goodsList.forEach(item => {
        switch (item.itype) {
          case "mi":
            _catList[0].children.push(item);
            break;
          case "cii":
            if (item.id === "BNZJX001") {
              item.url = goodsLink;
            }
            (item.scope.includes(active) || active === 0) && _catList[1].children.push(item);
            break;
          case "ai":
            _catList[2].children.push(item);
            break;
          case "li":
            (item.scope.includes(active) || active === 0) && _catList[3].children.push(item);
            break;
          default:
            break;
        }
      });
      return _catList;
    }
  },
  mounted() {
    this.getList();
    this.getGoodsLink();
  },
  methods: {
    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.sellCount = it.sellCount ?? 0;
              // item.title = it.title ?? item.title;
            }
          });
        });
        this.goodsList = goodsList;
      }
    },
    async getGoodsLink() {
      if (!this.mongoToken) return;
      const res = await getLink();
      if (res) {
        this.goodsLink = res.url;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
