<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>数量/单价/运费/折扣变化时 calcRow(row)；@onChange 与 @onKeyPress 均可触发。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="rowTitle" :table-data="tableData"
			:columns="columns" @onChange="onChange" @onKeyPress="onKeyPress" />
	</view>
</template>

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

const calcRow = (row) => {
	const qty = Number(row.qty) || 0, price = Number(row.price) || 0
	const freight = Number(row.freight) || 0, discount = Number(row.discount) || 1
	row.subtotal = Number((qty * price + freight).toFixed(2))
	row.payable = Number((row.subtotal * discount).toFixed(2))
}
const onChange = (field, value, row) => {
	if (['qty', 'price', 'freight', 'discount'].includes(field)) calcRow(row)
}
const onKeyPress = (field, value, column, row) => {
	if (['qty', 'price', 'freight', 'discount'].includes(field)) calcRow(row)
}

const columns = ref([
	{ field: 'rowTitle', title: '标题', hidden: true },
	{ type: 'group', title: '输入项' },
	{ title: '数量', field: 'qty', type: 'number', required: true, extra: { text: '件' } },
	{ title: '单价', field: 'price', type: 'decimal', required: true, extra: { text: '元' } },
	{ title: '运费', field: 'freight', type: 'decimal', extra: { text: '元' } },
	{ type: 'group', title: '结果' },
	{
		title: '小计', field: 'subtotal', type: 'text', readonly: true,
		formatter: (val) => `<span style="font-weight:700;">¥${Number(val || 0).toFixed(2)}</span>`
	},
	{ title: '折扣', field: 'discount', type: 'decimal' },
	{
		title: '应付', field: 'payable', type: 'text', readonly: true, itemStyle: 'background:rgb(232,244,255);',
		formatter: (val) => `<span style="color:#dc2626;font-weight:700;">¥${Number(val || 0).toFixed(2)}</span>`
	}
])

const tableData = ref([{ rowTitle: '计算示例', qty: 10, price: 25.5, freight: 12, subtotal: 267, discount: 0.95, payable: 253.65 }])
</script>