<template>
  <div class="home-page">
    <ElPageHeader content="首页" />
    <div class="home-card">
      <ElCard class="welcome-card">
        <div class="welcome-header">
          <div>
            <h3>欢迎，{{ auth.username || '访客' }}！</h3>
            <p>这是一个基于 Vue 3 + Element Plus + Pinia + Vue Router 的最佳实践示例。</p>
          </div>
          <ElButton type="primary" @click="gotoPage('/vueFlow')">画布</ElButton>
          <ElButton type="primary" @click="gotoPage('/video')">视频抽取图片</ElButton>
          <ElButton type="primary" @click="gotoPage('/video1')">视频截取</ElButton>
          <ElButton type="primary" @click="gotoPage('/3d')">3D效果</ElButton>
          <ElButton type="primary" @click="gotoPage('/shili')">示例</ElButton>
        </div>
      </ElCard>

      <ElCard class="request-card">
        <div class="card-title">
          <span>接口请求示例</span>
          <ElTag type="success">{{ env }}</ElTag>
        </div>
        <div class="request-actions">
          <ElButton type="primary" :loading="loading" @click="fetchUsers">刷新用户数据</ElButton>
        </div>
        <ElSkeleton :loading="loading" animated>
          <template #template>
            <ElSkeletonItem variant="text" style="width: 180px; margin-bottom: 16px" />
            <ElSkeletonItem variant="rect" style="height: 240px" />
          </template>
          <template #default>
            <ElTable v-if="users.length" :data="users" border size="small">
              <ElTableColumn prop="id" label="ID" width="80" />
              <ElTableColumn prop="name" label="姓名" />
              <ElTableColumn prop="username" label="用户名" />
              <ElTableColumn prop="email" label="邮箱" />
              <ElTableColumn prop="website" label="网站" />
            </ElTable>
            <div v-else class="empty-tip">暂无用户数据，请点击“刷新用户数据”获取。</div>
          </template>
        </ElSkeleton>
      </ElCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '../store';
import { getUsers, type User } from '../api/user';

const router = useRouter();
const auth = useAuthStore();
const users = ref<User[]>([]);
const loading = ref(false);
const env = import.meta.env.VITE_APP_ENV || 'production';

auth.restore();

async function fetchUsers() {
  loading.value = true;
  try {
    users.value = await getUsers();
  } catch (error) {
    const message = error instanceof Error ? error.message : String(error);
    ElMessage.error(`获取用户失败：${message}`);
  } finally {
    loading.value = false;
  }
}

function gotoPage(url: string) {
  router.push(url);
}

function shili() {
  router.push('/shili');
}

onMounted(() => {
  fetchUsers();
});
</script>

<style scoped>
.home-page {
  padding: 24px;
  background: #f0f2f5;
}

.home-card {
  max-width: 960px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.welcome-card {
  padding: 20px;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.request-card {
  padding: 20px;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.request-actions {
  margin-bottom: 18px;
}

.empty-tip {
  padding: 24px 0;
  text-align: center;
  color: #909399;
}

.container {
  /* 关键：设置透视距离 */
  perspective: 600px;
  perspective-origin: left center;
  /* 透视原点在左边 */
}

.trapezoid {
  width: 400px;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  /* 🎯 核心：绕 Y 轴旋转，右边会变小 */
  transform: rotateY(25deg);
  /* 保持 3D 空间 */
  transform-style: preserve-3d;

  /* 装饰 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  transition: transform 0.4s ease;
  cursor: pointer;
}

/* 悬浮时角度变化 */
.trapezoid:hover {
  transform: rotateY(30deg);
}
</style>
