<template>
  <div class="onepage-container">
    <div v-if="loading" class="loading">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>加载中...</span>
    </div>
    <div v-else-if="error" class="error">
      <el-icon><WarningFilled /></el-icon>
      <p>{{ error }}</p>
      <el-button @click="loadOnePage">重试</el-button>
    </div>
    <div v-else-if="onePage" class="content">
      <h1 class="title">{{ onePage.title }}</h1>
      <div class="page-content" v-html="onePage.content"></div>
    </div>
    <div v-else class="not-found">
      <el-icon><DocumentDelete /></el-icon>
      <p>单页内容不存在</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Loading, WarningFilled, DocumentDelete } from '@element-plus/icons-vue';
import { getOnePageByPath } from '@/api/onepage';

interface OnePage {
  id: number;
  title: string;
  content: string;
  path: string;
  sort: number;
  status: 0 | 1;
}

const route = useRoute();
const loading = ref(false);
const error = ref('');
const onePage = ref<OnePage | null>(null);

// 根据路由路径获取单页内容
const loadOnePage = async () => {
  const path = route.path;
  if (!path) {
    error.value = '路由路径不存在';
    return;
  }

  loading.value = true;
  error.value = '';
  
  try {
    const result = await getOnePageByPath(path);
    if (result.code === 200 && result.data) {
      onePage.value = result.data;
    } else {
      error.value = result.msg || '单页内容不存在';
      onePage.value = null;
    }
  } catch (err: any) {
    error.value = err.message || '加载单页内容失败';
    onePage.value = null;
  } finally {
    loading.value = false;
  }
};

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

<style lang="less" scoped>
.onepage-container {
  min-height: 100vh;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.loading,
.error,
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 16px;
  color: var(--el-text-color-secondary);
}

.loading {
  .el-icon {
    font-size: 32px;
  }
}

.error,
.not-found {
  .el-icon {
    font-size: 48px;
    color: var(--el-color-warning);
  }
  
  p {
    margin: 0;
    font-size: 16px;
  }
}

.content {
  .title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--el-text-color-primary);
  }

  .page-content {
    line-height: 1.8;
    color: var(--el-text-color-primary);
    font-size: 16px;
    
    :deep(p) {
      margin: 1em 0;
    }
    
    :deep(h1),
    :deep(h2),
    :deep(h3),
    :deep(h4),
    :deep(h5),
    :deep(h6) {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      font-weight: 600;
    }
    
    :deep(img) {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
    
    :deep(code) {
      background-color: var(--el-fill-color-light);
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
    }
    
    :deep(pre) {
      background-color: var(--el-fill-color-light);
      padding: 16px;
      border-radius: 4px;
      overflow-x: auto;
      
      code {
        background-color: transparent;
        padding: 0;
      }
    }
  }
}
</style>

