<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: []
    };
  },
  mounted() {
    this.goodsList = goodsList;
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
