<script setup>
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
import { UserType } from '@af-mobile-client-vue3/types/auth'
import { PLATFORM_ROUTE_MAP } from '@af-mobile-client-vue3/types/platform'
import { Button as VanButton } from 'vant'

const userStore = useUserStore()

// 根据用户类型决定返回路径
function getHomePath() {
  const userType = userStore.getUserType()
  const platformType = userStore.getPlatformType()
  if (userType === UserType.EXTERNAL && platformType) {
    console.warn(PLATFORM_ROUTE_MAP[platformType])
    return PLATFORM_ROUTE_MAP[platformType]
  }
  else {
    return '/'
  }
}
</script>

<template>
  <div class="forbidden_main">
    <div class="container">
      <div class="forbidden i-svg:forbidden" />
    </div>
    <div class="text">
      您没有访问该页面的权限
    </div>
    <div class="sub-text">
      请联系管理员获取相应权限
    </div>
    <div class="button_group">
      <VanButton type="primary" size="small" @click="$router.replace(getHomePath())">
        返回首页
      </VanButton>
    </div>
  </div>
</template>

<style lang="less" scoped>
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.forbidden_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding-top: 30vh;
}

.container {
  width: 128px;
  height: 128px;
  animation: fadeInUp 0.8s ease-in-out;
  .forbidden {
    width: 128px;
    height: 128px;
    vertical-align: middle;
    color: #ff6b6b;
  }
}

.text {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  animation: fadeIn 1.2s ease-in-out;
}

.sub-text {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
  animation: fadeIn 1.4s ease-in-out;
}
</style>
