<template>
  <div class="">
    <div class="main bg-white px-4 pt-8 rounded-10px relative">
      <div class="flex items-center space-x-4 mx-10">
        <img class="avatar" :src="info?.user_avatar?.split('|')[0]" alt="" />
        <div>
          <div class="user mb-1">{{ info.user_name }}</div>
          <div class="flex space-x-4 pro">
            <div class="flex items-center space-x-1">
              <img class="iconImg" src="/images/icon/user.png" alt="" />
              <div>{{ info.role_name }}</div>
            </div>
            <div class="flex items-center space-x-1">
              <img class="iconImg" src="/images/icon/school.png" alt="" />
              <div>{{ info.school }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="production flex space-x-8 mt-8 mb-10 mx-10">
        <div class="pro-list flex items-center space-x-4 w-230px h-50px pl-4">
          <div>我的课程</div>
          <div class="val">{{ info.kc_num }}</div>
        </div>
        <div class="pro-list flex items-center space-x-4 w-230px h-50px pl-4">
          <div>课程被浏览次数</div>
          <div class="val">{{ info.watch_num }}</div>
        </div>
        <div class="pro-list flex items-center space-x-4 w-230px h-50px pl-4">
          <div>总积分</div>
          <div class="val">{{ info.user_score }}</div>
        </div>
      </div>
      <div class="tabDiv px-4 pt-2">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="linkTo">
          <el-tab-pane
            v-for="(item, index) in tabData"
            :key="index"
            :label="item.meta.title"
            :name="item.name"
          ></el-tab-pane>
        </el-tabs>
      </div>

      <div class="btnDiv absolute top-8 right-8">
        <el-button size="large" @click="linkTo('jsd_personal_xgmm')"
          >修改密码</el-button
        >
        <el-button size="large" @click="toSet('jsd_personal_set')"
          >设置</el-button
        >
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { user_info } from "./api";
import { user } from "@/store";
const router = useRouter();
let info = $ref({});
user_info({ user_id: user.value.user_id }).then((res) => {
  if (res.code == "1") {
    info = res.data;
  }
});
const modules = import.meta.glob("~/router/routes/jsd/*.ts", { eager: true });
const constantRoutes = [];
const asyncRoutes = [];
Object.keys(modules).forEach((path) => {
  const arr = path.split("/")
  const filename = arr[arr.length - 1];
  if (filename?.startsWith("_")) constantRoutes.push(modules[path].default);
  else asyncRoutes.push(modules[path].default);
});
const asyncFilteredRoutes = [...asyncRoutes];

const allRoutes = computed(() => {
  const routes = asyncFilteredRoutes;
  return routes.sort((a, b) => a.meta.sort - b.meta.sort);
});

const tabData = ref([]);
function initTabData(arg) {
  if (Array.isArray(arg)) {
    arg.map((item) => {
      initTabData(item);
    });
  } else {
    if (!arg.meta.hidden) {
      tabData.value.push(arg);
    }
    arg.children && initTabData(arg.children);
  }
}
initTabData(allRoutes.value);

const activeName = ref(router.currentRoute.value.name);

const linkTo = (name) => {
  router.push({ name });
};
const toSet = (name) => {
  router.push({ name });
};
</script>

<style lang="scss" scoped>
$color: #1259a1;
.main {
  box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
}
.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ccc;
}
.user {
  font-size: 18px;
}
.pro {
  color: #949494;
  font-size: 16px;
  .iconImg {
    width: 18px;
    height: 18px;
  }
}
.production {
  .pro-list {
    border: 1px dashed #e4e6e8;
    border-radius: 6px;
    font-size: 14px;
    .val {
      color: $color;
    }
  }
}
.btnDiv {
  .el-button {
    background: $color;
    border-color: $color;
    color: #fff;
  }
}
.tabDiv {
  border-top: 2px solid #f6f6fa;
  :deep(.el-tabs) {
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav {
      height: 50px;
    }
    .el-tabs__item {
      font-size: 16px;
      &:hover,
      &.is-active {
        color: $color;
      }
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .el-tabs__active-bar {
      background: $color;
    }
  }
}
</style>