<template>
  <div class="home-main g-flex">
    <app-navbar class="home-main__navbar" title="企业风管" :show-back-button="false" fixed />
    <app-navbar title="首页" :show-back-button="false" @ready="navbarReady" fixed>
      <template #footer>
        <Search v-model="keyword" placeholder="请输入搜索关键词" shape="round" />
      </template>
    </app-navbar>
    <app-scroll-view class="g-flex__body" :style="scrollElementStyles" v-model:scroll-top="scrollTop">
      <PullRefresh class="home-main__container" v-model="refreshing" @refresh="onRefresh">
        <Swipe class="banner" :autoplay="3000" indicator-color="white">
          <SwipeItem v-for="index in 4" :key="index">{{ index }}</SwipeItem>
        </Swipe>
        <CellGroup title="卡片风格" v-for="index in 8" :key="index" inset>
          <Cell title="单元格" value="内容" />
          <Cell title="单元格" value="内容" label="描述信息" />
        </CellGroup>
      </PullRefresh>
    </app-scroll-view>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Cell, CellGroup, Swipe, SwipeItem, Search, PullRefresh } from 'vant'
import { useScrollVisibility } from '@/hooks/scroll-visibility'

const keyword = ref('');
const refreshing = ref(false);

const { bindVisibilityElement, scrollElementStyles, scrollTop } = useScrollVisibility();
const navbarReady = (el: HTMLElement) => bindVisibilityElement(el);

const onRefresh = () => {
  setTimeout(() => {
    refreshing.value = false;
  }, 1000);
}
</script>

<style lang="less">
@import './index.less';
</style>