<template>
  <el-tabs
    v-model="activeName"
    @tab-click="handleTabClick">
    <el-tab-pane
      v-if="checkPermission('member:member_storage_create')"
      name="icCardStorage"
      label="会员入库">
      <icCardStorage
        ref="icCardStorage"
        v-if="activeName==='icCardStorage'"></icCardStorage>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_storage_query')"
      name="storageQuery"
      label="会员入库记录">
      <div class="custom-scroll scroll-wrap">
        <keep-alive>
          <storageQuery
            ref="storageQuery"
            v-if="activeName==='storageQuery'"></storageQuery>
        </keep-alive>
      </div>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_storage_stats')"
      name="storageStatistics"
      label="会员入库统计">
      <div class="custom-scroll scroll-wrap">
        <keep-alive>
          <storageStatistics
            ref="storageStatistics"
            v-if="activeName==='storageStatistics'"></storageStatistics>
        </keep-alive>
      </div>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_sell')"
      name="iccardCheckout"
      label="会员出库">
      <iccardCheckout
        ref="iccardCheckout"
        v-if="activeName==='iccardCheckout'"></iccardCheckout>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_sell_query')"
      name="iccardCheckoutLog"
      label="会员出库记录">
      <div class="custom-scroll scroll-wrap">
        <keep-alive>
          <iccardCheckoutLog
            ref="iccardCheckoutLog"
            v-if="activeName==='iccardCheckoutLog'"></iccardCheckoutLog>
        </keep-alive>
      </div>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_sell_stats')"
      name="iccardCheckoutStatistics"
      label="会员出库统计">
      <div class="custom-scroll scroll-wrap">
        <keep-alive>
          <iccardCheckoutStatistics
            ref="iccardCheckoutStatistics"
            v-if="activeName==='iccardCheckoutStatistics'"></iccardCheckoutStatistics>
        </keep-alive>
      </div>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_activate')"
      name="memberActive"
      label="会员激活">
      <memberActive
        ref="memberActive"
        v-if="activeName==='memberActive'"></memberActive>
    </el-tab-pane>
    <el-tab-pane
      v-if="checkPermission('member:member_activate_query')"
      name="iccardActiveLog"
      label="会员激活记录">
      <div class="custom-scroll scroll-wrap">
        <keep-alive>
          <iccardActiveLog
            ref="iccardActiveLog"
            v-if="activeName==='iccardActiveLog'"></iccardActiveLog>
        </keep-alive>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import icCardStorage from './iccardStorage'
import storageQuery from './storageQuery'
import iccardCheckout from './iccardCheckout'
import iccardCheckoutLog from './iccardCheckoutLog'
import iccardCheckoutStatistics from './iccardCheckoutStatistics'
import memberActive from './memberActive'
import iccardActiveLog from './iccardActiveLog'
import storageStatistics from './storageStatistics'
import checkPermission from '@/utils/checkPermission'

const permissionList = [
  ['member:member_storage_create', 'icCardStorage'],
  ['member:member_storage_query', 'storageQuery'],
  ['member:member_storage_stats', 'storageStatistics'],
  ['member:member_sell', 'iccardCheckout'],
  ['member:member_sell_query', 'iccardCheckoutLog'],
  ['member:member_sell_stats', 'iccardCheckoutStatistics'],
  ['member:member_activate', 'memberActive'],
  ['member:member_activate_query', 'iccardActiveLog']
]

export default {
  name: 'memberPreSales',
  components: {
    icCardStorage,
    storageQuery,
    iccardCheckout,
    iccardCheckoutLog,
    memberActive,
    iccardActiveLog,
    storageStatistics,
    iccardCheckoutStatistics
  },
  data () {
    return {
      activeName: 'icCardStorage'
    }
  },
  methods: {
    checkPermission,
    handleTabClick (tab, e) {
      console.log(tab.name)
      // this.$refs[tab.name].init && this.$refs[tab.name].init()
    }
  },
  mounted () {
    // 控制tab页显示
    for (let i = 0; i < permissionList.length; i++) {
      if (checkPermission(permissionList[i][0])) {
        this.activeName = permissionList[i][1]
        break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs {
  position: absolute; top: 0;left: 0; display: flex; width: 100%;height: 100%; flex-direction: column;
  ::v-deep .el-tabs__content {
    flex: 1;
  }
  ::v-deep .el-tabs__header{
    margin-bottom: 0;
  }
  ::v-deep .el-tabs__nav-scroll{
    padding-left: 20px;
  }
}
.el-tab-pane{
  height: 100%;
}
.scroll-wrap{
  height: 100%; overflow: auto;
}
</style>
