<template>
  <div v-if="showList">
    <el-tabs v-model="activeName" type="card" class="custom-tab">
      <el-tab-pane label="全部商品（120）" name="all">
        全部商品
      </el-tab-pane>
      <el-tab-pane label="上架商品（120）" name="on-shelf">
        上架商品
      </el-tab-pane>
      <el-tab-pane label="下架商品（120）" name="off-shelf">
        下架商品
      </el-tab-pane>
      <el-tab-pane label="库存预警（120）" name="warn">
        库存预警
      </el-tab-pane>
    </el-tabs>
    <base-form @show-add="showList = false"/>
  </div>
  <add-product v-else @close="showList = true"/>
</template>
<script>
import BaseForm from './components/form'
import AddProduct from './components/add_product'
//TODO:商品库，封装成公共组件给总平台、厂商/经销商使用
export default {
  name: 'Index',
  components: { BaseForm, AddProduct },
  data() {
    return {
      activeName: 'all',
      showList: true
    }
  },
  methods: {}
}
</script>
<style scoped lang="scss">
div[role='tablist'] > div {
  background-color: #1684fc;
}
</style>
