<template>
  <app-scroll-view class="home-main">
    <template #beforeHeader>
      <app-navbar title="首页" :show-back-button="false">
        <template #footer>
          <Search v-model="keyword" placeholder="请输入搜索关键词" shape="round" />
        </template>
      </app-navbar>
    </template>
    <template #afterHeader>
      <app-navbar class="home-main__navbar" title="多元世纪" :show-back-button="false" />
    </template>
    <Banner :images="images">
      <template #default="{ value }">
        <span>{{ value }}</span>
      </template>
    </Banner>
    <Block>
      时的破发
    </Block>
    <PullRefresh class="home-main__container" v-model="refreshing" @refresh="onRefresh">
      <CellGroup title="卡片风格" v-for="index in 8" :key="index" inset>
        <Cell title="单元格" value="内容" />
        <Cell title="单元格" value="内容" label="描述信息" />
      </CellGroup>
    </PullRefresh>
  </app-scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Cell, CellGroup, Search, PullRefresh } from 'vant'
import Banner from '@mobile/components/base/banner/index.vue'
import Block from '@mobile/components/layouts/block/index.vue'

const keyword = ref('')
const refreshing = ref(false)
const images = Object.keys(Array.from({ length: 4 }))

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

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