<template>
  <div class="order g-flex">
    <app-navbar title="行情">
      <template #footer>
        <Search v-model="state.keyword" placeholder="请输入搜索关键词" shape="round" />
      </template>
    </app-navbar>
    <app-scroll-view class="g-flex__body">
      <PullRefresh class="order__container" v-model="state.refreshing" @refresh="onRefresh">
        <List v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
          <Cell v-for="item in state.list" :key="item" :title="item" :to="{ name: 'orderDetail', params: { id: 1 } }" />
        </List>
      </PullRefresh>
    </app-scroll-view>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { Search, List, Cell, PullRefresh } from 'vant'

const state: {
  list: number[];
  loading: boolean;
  finished: boolean;
  refreshing: boolean;
  keyword: string;
} = reactive({
  list: [],
  loading: false,
  finished: false,
  refreshing: false,
  keyword: ''
});

const onLoad = () => {
  setTimeout(() => {
    if (state.refreshing) {
      state.list = [];
      state.refreshing = false;
    }

    for (let i = 0; i < 20; i++) {
      state.list.push(state.list.length + 1);
    }
    state.loading = false;

    if (state.list.length >= 60) {
      state.finished = true;
    }
  }, 1000);
}

const onRefresh = () => {
  // 清空列表数据
  state.finished = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  state.loading = true;
  onLoad();
}
</script>

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