<template>
  <div
    :style="{ filter: isDisable ? 'grayscale(100%)' : 'grayscale(0%)' }"
    class="h-120px p-4px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
    @click="handleOpenSite"
  >
    <header class="flex-y-center">
      <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
      <h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
    </header>
    <p class="py-8px h-56px text-#999">{{ description }}</p>
    <div class="flex justify-end">
      <span>{{ author }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'DashboardWorkbenchMainTechnologyCard' });
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/store';
interface Props {
  /** 技术名称 */
  name: string;
  /** 技术描述 */
  description: string;
  /** 技术作者 */
  author: string;
  /** 技术官网 */
  site: string;
  /** 技术图标 */
  icon: string;
  /** 图标颜色 */
  iconColor?: string;

  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 handleOpenSite() {
  if (isDisable) return;
  router.push({
    path: props.site
  });
}
</script>

<style scoped></style>
