<template>
  <div class="p-4 md:flex">
    <div
      class="md:w-7/10 w-full !mr-4 enter-y"
      :class="role !== RoleEnum.SYS_ADMIN && '!md:w-full !mr-0'"
    >
      <GrowCard :loading="loading" class="enter-y" :role="role" />
      <SiteAnalysisMessage class="!my-4 enter-y" :loading="loading" :role="role" />
      <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" />
      <div class="md:flex enter-y" v-if="!isAdmin(role)">
        <Card :title="t('home.index.coreProcessGuide')" style="width: 100%">
          <img :alt="t('home.index.coreProcessGuide')" src="/src/assets/images/flow.png" />
        </Card>
      </div>
    </div>
    <div v-if="role === RoleEnum.SYS_ADMIN" class="md:w-3/10 w-full enter-y">
      <Card
        :style="{ width: '100%', height: !isAdmin(role) ? '100%' : '98.4%' }"
        :title="!isAdmin(role) ? t('layout.header.helpDoc') : ''"
      >
        <HelpDoc :role="role" />
      </Card>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import SiteAnalysisMessage from './components/SiteAnalysisMessage.vue';
  import { Card } from 'ant-design-vue';
  import HelpDoc from './components/HelpDoc.vue';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  import { isAdmin, RoleEnum } from '/@/enums/roleEnum';
  import { useI18n } from '/@/hooks/web/useI18n';

  defineExpose({
    isAdmin,
  });

  const { t } = useI18n();

  const userInfo: any = getAuthCache(USER_INFO_KEY);

  const role: string = userInfo?.roles[0];

  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>