<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>选择类列配置；字典 bind.key；onChange(value, item, row)。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" :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 tableData = ref([{ selectVal: '2', selectListVal: [], selectManual: '1', radioVal: '1', checkboxVal: ['1'], switchVal: 1 }])

const columns = ref([
	{
		title: '下拉单选(字典)', field: 'selectVal', type: 'select', required: true,
		bind: { key: '订单类型', data: [] },
		onChange: (value, item, row) => { proxy.$toast(value) }
	},
	{
		title: '下拉多选', field: 'selectListVal', type: 'selectList',
		bind: { key: '订单类型', data: [] },
		onChange: (value, item, row) => { proxy.$toast(value.join(',')) }
	},
	{
		title: '手写 data', field: 'selectManual', type: 'select',
		bind: { data: [{ key: '1', value: '选项一' }, { key: '2', value: '选项二' }] },
		onChange: (value, item, row) => { proxy.$toast(value) }
	},
	{
		title: '单选', field: 'radioVal', type: 'radio', placement: 'row',
		bind: { data: [{ key: '1', value: '正常' }, { key: '2', value: '异常' }] },
		onChange: (value, item, row) => { proxy.$toast(value) }
	},
	{
		title: '勾选', field: 'checkboxVal', type: 'checkbox',
		bind: { data: [{ key: '1', value: '短信' }, { key: '2', value: '邮件' }] },
		onChange: (value, item, row) => { proxy.$toast(value.join(',')) }
	},
	{
		title: '开关', field: 'switchVal', type: 'switch',
		onChange: (value, item, row) => { proxy.$toast(value + '') }
	}
])
</script>