<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>事件写在 columns 列配置；readonly=false 可编辑。列级 onChange(value, item, row)、extraClick(item, row)。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="OrderNo" :table-data="tableData" :columns="columns" />
	</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 columns = ref([
	{ field: 'OrderNo', title: '订单编号' },
	{
		title: '客户名称', field: 'Customer', type: 'input', required: true,
		onFocus: (value, item, row) => { proxy.$toast(`onFocus：${item.title}`) }
	},
	{
		title: '联系电话', field: 'Phone', type: 'input',
		extra: { text: '拨打', button: true, type: 'primary', size: 12 },
		extraClick: (item, row) => { proxy.$toast(`拨打 ${row.Customer}：${row.Phone}`) }
	},
	{
		title: '交货日期', field: 'OrderDate', type: 'date',
		onChange: (value, item, row) => { proxy.$toast(`日期：${value}`) }
	},
	{
		title: '订单类型', field: 'OrderType', type: 'select', bind: { key: '订单类型', data: [] },
		onChange: (value, item, row) => { proxy.$toast(`下拉：${value}`) }
	},
	{
		title: '输入事件', field: 'KeyPressDemo', type: 'input', placeholder: '输入时触发',
		onKeyPress: (value, item, row) => { proxy.$toast(`onKeyPress：${value}`) },
		onFocus: (value, item, row) => { proxy.$toast(`onFocus：${item.title}`) }
	},
	{
		title: '回车事件', field: 'ConfirmDemo', type: 'input',
		inputConfirm: (value, item, row) => { proxy.$toast(`inputConfirm：${value}`) }
		// 与 onInputConfirm 等价
	},
	{
		title: '备注', field: 'Remark', type: 'input',
		onInputConfirm: (value, item, row) => { proxy.$toast(`onInputConfirm：${value}`) }
	}
])

const tableData = ref([
	{ OrderNo: 'SO20260728001', Customer: '华东贸易', Phone: '13800138001', OrderType: '1', OrderDate: '2026-07-30' }
])
</script>