<template>
  <a-card :bordered="false" class="task-card" title="快捷入口">
    <a-row type="flex" justify="start" align="top">
      <a-col
        v-bind="
          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
        "
      >
        <a-button class="tools-btn" @click="openUrl('/oa/task')"
          >管理首页</a-button
        >
      </a-col>
      <a-col
        v-bind="
          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
        "
      >
        <a-button class="tools-btn" @click="openUrl('/oa/task/hall')"
          >任务大厅</a-button
        >
      </a-col>
      <a-col
        v-bind="
          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
        "
      >
        <a-button class="tools-btn" @click="openUrl('/oa/task/dict')"
          >分类设置</a-button
        >
      </a-col>
      <a-col
        v-bind="
          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
        "
      >
        <a-button class="tools-btn" @click="openUrl('/oa/task/add')"
          >提交工单</a-button
        >
      </a-col>
      <a-col
        v-bind="
          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
        "
        v-if="appId > 0"
      >
        <a-button class="tools-btn" @click="openUrl('/oa/app/detail/' + appId)"
          >项目信息</a-button
        >
      </a-col>
      <a-col
        v-bind="
          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
        "
      >
        <a-button
          class="tools-btn"
          @click="openUrl('https://modules.gxwebsoft.com/oa/task')"
          >小程序版</a-button
        >
      </a-col>
    </a-row>
  </a-card>
</template>

<script setup lang="ts">
  import { openUrl } from '@/utils/common';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { useRouter } from 'vue-router';
  const { currentRoute } = useRouter();

  defineProps<{
    appId: number | 0;
  }>();

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
</script>
<style lang="less" scoped>
  .tools-btn {
    margin-bottom: 10px;
  }
</style>
