<template>
  <div
    :style="{ filter: isDisable ? 'grayscale(100%)' : 'grayscale(0%)' }"
    class="flex-col-center h-120px p-12px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
    @click="handClick"
  >
    <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
    <p class="py-8px text-16px">{{ label }}</p>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'DashboardWorkbenchMainShortcutsCard' });
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/store';
type callback = () => void;

interface Props {
  /** 快捷操作名称 */
  label: string;
  /** 图标 */
  icon: string;
  /** 图标颜色 */
  iconColor: string;
  siteOrfunc: string | callback;
  manager: boolean;
}

const props = defineProps<Props>();

const router = useRouter();
const auth = useAuthStore();
const { userType } = auth.userInfo;
const isStudent = userType === 'member';

const isDisable = isStudent && props.manager;

function handClick() {
  if (isDisable) {
    return;
  }
  if (typeof props.siteOrfunc === 'function') {
    props.siteOrfunc();
  } else {
    router.push({
      path: props.siteOrfunc
    });
  }
}
</script>

<style scoped></style>
