<template>
  <app-view class="cart">
    <template #header>
      <app-navbar title="购物车">
        <template #footer>
          <Search v-model="state.keyword" placeholder="请输入搜索关键词" shape="round" />
        </template>
      </app-navbar>
    </template>
    <app-pull-refresh v-model:loading="state.loading" v-model:pageIndex="state.pageIndex" :page-count="state.pageCount"
      @refresh="onRefresh">
      <template v-for="(item, index) in state.list" :key="index">
        <Cell :title="item" :to="{ name: 'CartDetail', params: { id: 1 } }" />
      </template>
    </app-pull-refresh>
  </app-view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { Search, Cell } from 'vant'
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'

const state = reactive({
  list: [],
  loading: false,
  keyword: '',
  pageIndex: 1,
  pageCount: 3,
})

const onRefresh = () => {
  state.loading = true
  setTimeout(() => {
    state.list = Array.from({ length: 20 }, (v, k) => k + 1) as never[]
    state.loading = false
  }, 1000);
}
</script>

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