<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>日期列 type：date/datetime/time/month；range 区间；@onChange(field, value, row)。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="rowTitle" :table-data="tableData"
			:columns="columns" @onChange="onChange" />
	</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 onChange = (field, value, row) => {
	proxy.$toast(`${field}=${Array.isArray(value) ? value.join(' ~ ') : value}`)
}

const columns = ref([
	{ field: 'rowTitle', title: '标题', hidden: true },
	{ type: 'group', title: '单值' },
	{
		title: '日期', field: 'dateVal', type: 'date', required: true,
		min: proxy.base.addDays(proxy.base.getDate(), -15), max: proxy.base.getDate()
	},
	{ title: '日期时分', field: 'datetimeVal', type: 'datetime' },
	{ title: '时分', field: 'timeVal', type: 'time' },
	{ title: '年月', field: 'monthVal', type: 'month' },
	{ type: 'group', title: '区间 range' },
	{ title: '日期区间', field: 'dateRange', type: 'date', range: true },
	{ title: '时间区间', field: 'datetimeRange', type: 'datetime', range: true }
])

const tableData = ref([{
	rowTitle: '日期时间示例',
	dateVal: proxy.base.getDate(), datetimeVal: '2022-03-27 20:15', timeVal: '09:30', monthVal: '2024-06',
	dateRange: ['2022-03-10', '2022-06-20'], datetimeRange: ['2022-03-10 08:00', '2022-03-12 18:00']
}])
</script>