<template>
    <PullRefresh v-model="refreshing" @refresh="onRefresh" style="height:100%">
        <app-list :columns="columns" :data-list="dataList" v-if="dataList.length" />
        <Empty v-else />
    </PullRefresh>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { PullRefresh, Empty } from 'vant'
import { useSpotGoodsPriceList } from '@/business/market'
import AppList from '@mobile/components/base/list/index.vue'

const { dataList, getSpotGoodsPriceList } = useSpotGoodsPriceList()
const refreshing = shallowRef(false) // 是否处于加载中状态

const columns: Model.TableColumn[] = [
    { prop: 'wrstandardname', label: '名称' },
    { prop: 'spotgoodsprice', label: '最新价' },
    { prop: 'tradedate', label: '日期' },
]

// 下拉刷新
const onRefresh = () => {
    getSpotGoodsPriceList().finally(() => {
        refreshing.value = false
    })
}

onRefresh()
</script>