<template>
    <div class="market-quote">
        <app-list :columns="columns" :data-list="dataList" v-if="dataList.length">
            <!-- 最新价 -->
            <template #last="{ row }">
                <span :class="handlePriceColor(row.last, row.presettle)">{{
                        handleNumberValue(formatDecimal(row.last, row.decimalplace))
                }}</span>
            </template>
            <!-- 涨跌幅 -->
            <template #change="{ row }">
                <span :class="handlePriceColor(row.last, row.presettle)">{{
                        handleNumberValue(formatDecimal(row.change, row.decimalplace))
                }}</span>
            </template>
            <!-- 涨跌幅 -->
            <template #amplitude="{ row }">
                <span :class="handlePriceColor(row.last, row.presettle)">{{ parsePercent(row.amplitude) }}</span>
            </template>
        </app-list>
        <Empty v-else />
    </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'
import { Empty } from 'vant'
import { formatDecimal, handlePriceColor, handleNumberValue, parsePercent } from '@/filters'
import { useFuturesList } from '@/business/market'
import AppList from '@mobile/components/base/list/index.vue'

const { dataList, quoteSubscribe } = useFuturesList()

const columns: Model.TableColumn[] = [
    { prop: 'goodsname', label: '名称' },
    { prop: 'last', label: '最新价' },
    { prop: 'change', label: '涨跌' },
    { prop: 'amplitude', label: '涨跌幅' },
]

onMounted(() => quoteSubscribe.start())
onUnmounted(() => quoteSubscribe.stop())
</script>