<template>
  <div class="content-box">
    <div class="left">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="校友组织列表" name="first"></el-tab-pane>
        <el-tab-pane label="组织分类管理" name="second"></el-tab-pane>
        <el-tab-pane label="入会申请审核" name="third"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 'first'">
      <OrganizationList></OrganizationList>
    </template>
    <template v-if="activeName == 'second'">
      <CategoryManage></CategoryManage>
    </template>
    <template v-if="activeName == 'third'">
      <ApplicationAudit></ApplicationAudit>
    </template>
  </div>
</template>

<script setup>
import { ref, watch, reactive, onBeforeMount, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import OrganizationList from "./OrganizationList.vue";
import CategoryManage from "./CategoryManage.vue";
import ApplicationAudit from "./ApplicationAudit.vue";

import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";

const router = useRouter();
const store = useCounterStore();

// 为避免解构时失去响应性
const { name, age, isCollapse, realAge, collegeRole } = storeToRefs(store);

const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab.props.name, event);
};

onBeforeMount(() => {});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;

  .svg {
    width: 22px;
    height: 22px;
  }

  .left {
    width: calc(100% - 60px);
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
    :deep(.demo-tabs) {
      .el-tabs__header {
        margin: 0;
        .el-tabs__nav-wrap::after {
          display: none;
        }
        .el-tabs__item {
          color: #000;
          font-size: 18px;
          font-weight: 600;
          height: 60px;
        }
      }
      .el-tabs__content {
        display: none;
      }
    }
  }
}
</style>
