<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="goodsList" />
    <record-layer v-model="showLayer" desc="敬请期待"></record-layer>
    <ai-test-tip @click.native="showLayer = true" />
    <copyright :logo="true" />
    <tabbar></tabbar>
  </div>
</template>

<script>
import goodsList from "@/api/goodsList.mock";
import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar";
import copyright from "@/components/Copyright";
import RecordLayer from "@/components/RecordLayer";
export default {
  name: "GoodsList",
  components: {
    AiTestTip,
    GoodList,
    Tabbar,
    copyright,
    RecordLayer
  },
  data() {
    return {
      active: 0,
      showLayer: false,
      goodsList: [],
      goodsLists: [
        {
          title: "住院医疗险",
          sub: "报销医药费，有无社保均可保",
          children: []
        },
        {
          title: "重大疾病险",
          sub: "责任内疾病确诊即赔",
          children: []
        },
        {
          title: "意外伤害险",
          sub: "意外保障无等待期",
          children: []
        },
        {
          title: "人寿保险",
          sub: "家庭顶梁柱必备",
          children: []
        }
      ]
    };
  },
  mounted() {
    this.goodsList = goodsList;
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
