<template>
  <div class="home-container">
    <img class="container-bg" :src="bgImage" />
    <div class="container-info">
      <div class="info-title">{{ config.web_title }}</div>
      <div class="info-desc">"代码是写给人看的，只是恰好能被机器执行。"</div>
      <div class="info-auth">— 罗伯特·C·马丁</div>
      <el-button class="info-btn" type="primary" size="large" @click="handleToUser">会员中心</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDark } from '@vueuse/core'
import { useAppStore } from '~/stores/app'
import { useUserStore } from '~/stores/user'
import { useRouter } from 'vue-router'

const isDark = useDark()
const bgImage = computed(() => {
  return isDark.value
    ? new URL('@/assets/images/bg_dark.jpg', import.meta.url).href
    : new URL('@/assets/images/bg.jpg', import.meta.url).href
})

const appStore = useAppStore()
const config = computed(() => appStore.config)

const router = useRouter()
const handleToUser = () => {
  if (useUserStore().token) {
    router.push('/user')
  } else {
    router.push('/login')
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  @apply flex items-center justify-start py-12;
  min-height: calc(100vh - var(--nav-height));

  .container-bg {
    @apply fixed left-0 w-full h-full object-cover;
    top: var(--nav-height);
  }

  .container-info {
    @apply max-w-[32rem] flex flex-col relative z-[1];

    .info-title {
      @apply text-[3rem] leading-[3.5rem] font-semibold;
    }

    .info-desc {
      @apply mt-8 text-[2rem] leading-[2.5rem];
    }

    .info-auth {
      @apply mt-8 text-[1.5rem] leading-[2rem] text-right;
    }

    .info-btn {
      @apply mt-16 w-[10rem] h-[3.5rem] text-[1rem] rounded-[1rem];
    }
  }

  @media screen and (max-width: 768px) {
    background: none;

    .container-info {
      .info-title {
        @apply text-[2rem];
      }

      .info-desc {
        @apply text-[1.25rem];
      }

      .info-auth {
        @apply text-[1rem];
      }
    }
  }
}
</style>
