<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>只读展示：formatter HTML、列/表级 titleStyle/valueStyle、extra 后缀、click + @valueClick。</view>
		</vol-alert>
		<vol-table direction="list" titleField="OrderNo" :table-data="tableData" :columns="columns"
			:titleStyle="titleStyle" :valueStyle="valueStyle" @valueClick="onValueClick" />
	</view>
</template>

<!--
更多表单配置：http://app.volcore.xyz/docs/app/form/
更多表格配置：http://app.volcore.xyz/docs/app/table/
-->
<script setup>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const titleStyle = (fields, item) => {
	if (item.field === 'TotalPrice') return 'color:#007aff;font-weight:600;'
}
const valueStyle = (fields, item) => {
	if (item.field === 'StatusText') return 'color:#16a34a;font-weight:600;'
}
const onValueClick = (item, row) => {
	proxy.$toast(`点击：${item.field}=${row[item.field]}`)
}

const columns = ref([
	{ field: 'OrderNo', title: '订单号' },
	{
		title: '总价', field: 'TotalPrice', type: 'text',
		formatter: (val) => `<span style="color:#dc2626;font-weight:700;">¥${Number(val).toFixed(2)}</span>`,
		extra: { text: '元', style: 'margin-left:8rpx;color:#94a3b8;' }
	},
	{ title: '数量', field: 'TotalQty', type: 'text', valueStyle: 'color:#0f172a;font-weight:600;' },
	{ title: '状态', field: 'StatusText', type: 'text', click: true },
	{ title: '备注', field: 'Remark', type: 'text', itemStyle: 'background:#f8fafc;' }
])

const tableData = ref([{ OrderNo: 'SO001', TotalPrice: 12800.5, TotalQty: 120, StatusText: '已发货', Remark: '演示' }])
</script>