<template>
  <view class="page">
    <custom-navbar ref="customNavbar" title="基础页面" />
    <tile-grid />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!-- 状态展示 -->
      <status-display v-if="loading" loading-text="加载中..." type="loading" />
      <!-- 页面内容将在这里添加 -->
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";

export default {
  components: {},
  data() {
    return {
      CommonEnum,
      loading: false,
    };
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData();
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true;
      try {
        // TODO: 调用页面数据API
        // const response = await getPageData()
        // 模拟加载
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      } catch (error) {
        console.error("获取页面数据失败:", error);
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #f5f0e7;
}

.header {
  width: 100%;
  //min-height: 100vh;//可能导致页面留白
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx 40rpx;
}
</style>
