<template>
  <div class="app-container">
    <el-tabs v-model="btn" @tab-change="changeTab">
      <el-tab-pane label="人员列表" name="one" />
      <el-tab-pane label="有效会员" name="three" />
      <!--      <el-tab-pane label="即将过期会员" name="two" />-->
      <el-tab-pane v-if="deptType==1" label="校验会员" name="four" />

    </el-tabs>

    <div v-if="btn=='one'">
      <memberList :type="btn" />
    </div>
    <div v-if="btn=='two'">
      <memberList :type="btn" />
    </div>
    <div v-if="btn=='three'">
      <memberList :type="btn" />
    </div>
    <div v-if="btn=='four'">
      <verifyMember :type="btn" />
    </div>
  </div>
</template>

<script setup >

import { computed, ref } from 'vue'
import memberList from '@/views/member/memberList.vue'
import verifyMember from '@/views/member/verifyMember.vue'
import useUserStore from '/@/store/modules/user'
const deptType = computed(() => useUserStore().deptType)
const btn = ref('one')
const changeTab = (n) => {
  btn.value = n
}
</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}

.tabs {
  display: flex;
  font-size: 16px;

  .tab {
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    margin: 0px 10px 10px 10px;
    cursor: pointer;
  }

  .tabBtn {
    border-bottom: 2px solid #014A9F;
    color: #014A9F;
  }
}
</style>