<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-13 17:32:40
 * @FilePath: /meihuaApp/src/pages/serverInfo/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="serverInfo-page">
    <view style="padding: 1rem;">
      <view v-if="showContent" class="book-list">
        <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true">
          <view v-for="(item, index) in serverList" :key="index">
            <server-card :key="index" :data="item"></server-card>
          </view>
        <view style="height: 2rem;"></view>
        </scroll-view>
      </view>
    </view>
    <nav-bar activated="serverInfo" />
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import navBar from '@/components/navBar.vue';
import serverCard from '@/components/serverCard.vue'
</script>

<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getListAPI } from '@/api/index'

export default {
  name: "serverPage",
  mixins: [mixin.init],
  async onShow () {
    // TODO：获取活动信息
    const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
    if (code) {
      this.serverList = data;
    }
  },
  onHide () { // 离开当前页面
  },
  computed: {
    scrollStyle() {
      return {
        refScrollView: null,
        height: this.indexCoverHeight + 'px',
      };
    },
  },
  mounted () {
    // 设置首页封面高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    // 处理切换显示白屏问题
    setTimeout(() => {
      this.showContent = true;
    }, 100);
    this.$nextTick(async () => {
      const navHeight = await $('#navbar-page').height();
      this.indexCoverHeight = windowHeight - navHeight;
    });
  },
  data() {
    return {
      showContent: false,
      indexCoverHeight: 0,
      serverList: [],
      page: 1,
      limit: 100,
    };
  },
};
</script>