<template>
  <div class="tabs">
    <div class="tab" @click="toggleTab('wareRecord')"><a>出入库记录</a></div>
    <div class="tab" @click="toggleTab('saleRecord')"><a>销售记录</a></div>
    <div class="tab" @click="toggleTab('storageRecord')"><a>库存明细</a></div>
  </div>
  <wareRecord :is="currentTab" keep-alive></wareRecord>
</template>

<script>
  import wareRecord from './WareRecord'
import saleRecord from './SaleRecord'
import storageRecord from './StorageRecord'
import { PagedList, setClass } from 'vue-client'

  export default {
    title: '灶具管理',
    data () {
      return {
        currentTab: 'wareRecord' // currentTab 用于标识当前触发的子组件
      }
  },
    ready () {

    },
    components: { // 声明子组件
      wareRecord,
      saleRecord,
      storageRecord
    },
    methods: {
      toggleTab: function (tab) {
        alert(tab)
        this.currentTab = tab // tab 为当前触发标签页的组件名
      }
    }
  }
</script>

<style scoped>
.tabs{
  height: 30px;
}
.tab{
  width: 80px;
  height: 20px;
  float: left;
  }
</style>
