<template>
  <div class="p-4 md:flex">
    <div class="md:w-7/10 w-full !mr-4 enter-y">
      <GrowCard :loading="loading" class="enter-y" :role="role" />
      <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" />
      <div class="md:flex enter-y" v-if="role === 'TENANT_ADMIN'">
        <Card title="核心流程指南" style="width: 100%">
          <img alt="核心流程指南" src="../../../assets/images/flow.png" />
        </Card>
      </div>
    </div>
    <div class="md:w-3/10 w-full enter-y">
      <HelpDoc :role="role" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.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';
  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const role = userInfo.roles[0];
  console.log(role);
  const loading = ref(true);
  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>