<template>
  <n-grid :item-responsive="true" :x-gap="16" :y-gap="16">
    <n-grid-item span="0:24 640:24 1024:16">
      <n-space :vertical="true" :size="16">
        <n-card title="项目主要菜单" :bordered="false" size="small" class="shadow-sm rounded-16px">
          <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
            <n-grid-item v-for="item in technology" :key="item.id">
              <technology-card v-bind="item" />
            </n-grid-item>
          </n-grid>
        </n-card>
      </n-space>
    </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:8">
      <n-space :vertical="true" :size="16">
        <n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px">
          <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
            <n-grid-item v-for="item in shortcuts" :key="item.id">
              <shortcuts-card v-bind="item" />
            </n-grid-item>
          </n-grid>
        </n-card>
      </n-space>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
import { useAppStore, useThemeStore } from '@/store';
import { ShortcutsCard, TechnologyCard } from './components';
defineOptions({ name: 'DashboardWorkbenchMain' });

interface Technology {
  id: number;
  name: string;
  description: string;
  author: string;
  site: string;
  icon: string;
  iconColor?: string;
  manager?: boolean;
}
const app = useAppStore();
const theme = useThemeStore();
const technology: Technology[] = [
  {
    id: 0,
    name: '周排课',
    description: '新增排课或者查询课程页面',
    author: '课程周历',
    site: '/lesson/schedule',
    icon: 'radix-icons:calendar',
    iconColor: getRandomColor(),
    manager: false
  },
  {
    id: 1,
    name: '月排课',
    description: '已月为单位查看课程情况',
    author: '课程日历',
    site: '/lesson/calendar',
    icon: 'healthicons:i-schedule-school-date-time',
    iconColor: getRandomColor(),
    manager: false
  },
  {
    id: 2,
    name: '查看考勤',
    description: '查看学员考勤, 或者查看自己的考勤',
    author: '考勤列表',
    site: '/lesson/attendance',
    icon: 'mdi:sign',
    iconColor: getRandomColor(),
    manager: false
  },
  {
    id: 3,
    name: '学员考核',
    description: '查看学员每个科目的成绩',
    author: '科目考试',
    site: '/lesson/score',
    icon: 'healthicons:i-exam-qualification-outline',
    iconColor: getRandomColor(),
    manager: false
  },
  {
    id: 4,
    name: '学生管理',
    description: '查看当前系统所有学员',
    author: '查看学员',
    site: '/system/student',
    icon: 'icons8:student',
    iconColor: getRandomColor(),
    manager: true
  },
  {
    id: 5,
    name: '科目管理',
    description: '对当前系统内所有的科目进行管理',
    author: '教学科目',
    site: '/system/subject',
    icon: 'material-symbols:route',
    iconColor: getRandomColor(),
    manager: true
  }
];

function getRandomColor(): string {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

type callback = () => void;

interface Shortcuts {
  id: number;
  label: string;
  icon: string;
  iconColor: string;
  siteOrfunc: string | callback;
  manager: boolean;
}

const shortcuts: Shortcuts[] = [
  {
    id: 0,
    label: '查档案',
    icon: 'icons8:student',
    iconColor: '#409eff',
    siteOrfunc: '/archives/students',
    manager: false
  },
  {
    id: 2,
    label: '查班级',
    icon: 'arcticons:classroom',
    iconColor: '#f56c6c',
    siteOrfunc: '/group/group',
    manager: true
  },
  {
    id: 1,
    label: '个性化',
    icon: 'ic:outline-settings',
    iconColor: '#7238d1',
    siteOrfunc: () => {
      app.toggleSettingDrawerVisible();
    },
    manager: false
  },
  {
    id: 3,
    label: '改密码',
    icon: 'teenyicons:password-solid',
    iconColor: '#19a2f1',
    siteOrfunc: '/system/profile',
    manager: false
  },
  {
    id: 4,
    label: '切主题',
    icon: 'icon-park-solid:theme',
    iconColor: '#fab251',
    siteOrfunc: () => {
      theme.setDarkMode(!theme.darkMode);
    },
    manager: false
  },
  { id: 5, label: '说明', icon: 'gg:readme', iconColor: '#8aca6b', siteOrfunc: '/about', manager: true }
];
</script>

<style scoped></style>
