<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>hidden 支持函数：(row, item, rowIndex) => true 隐藏 / false 显示；可配合 #field 插槽提示。</view>
		</vol-alert>
		<vol-table :readonly="false" direction="list" titleField="OrderNo" :table-data="tableData" :columns="columns">
			<template #field="{ data }">
				<view v-if="data.field === 'urgentTip'" class="urgent-tip">选择后动态控制[加急备注]显隐</view>
			</template>
		</vol-table>
	</view>
</template>

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

const columns = ref([
	{ field: 'OrderNo', title: '订单编号' },
	{ title: '客户名称', field: 'Customer', type: 'input', required: true },
	{
		title: '是否加急', field: 'IsUrgent', type: 'radio', placement: 'row',
		bind: { data: [{ key: '1', value: '是' }, { key: '0', value: '否' }] }
	},
	{ title: '', field: 'urgentTip', slot: true, itemStyle: 'padding-top:0;margin-top:-6px;' },
	{
		title: '加急备注', field: 'UrgentNote', type: 'input', placeholder: '请填写加急说明',
		titleStyle: 'color:#007aff;',
		hidden: (row, item, rowIndex) => row.IsUrgent != '1'
	},
	{
		title: '奇数行备注', field: 'OddRemark', type: 'input',
		titleStyle: 'color:#16a34a;',
		hidden: (row, item, rowIndex) => (rowIndex + 1) % 2 === 0 // 仅第 1/3/… 行
	}
])

const tableData = ref([
	{ OrderNo: 'SO001', Customer: '华东贸易', IsUrgent: '0', UrgentNote: '', OddRemark: '奇数行-1' },
	{ OrderNo: 'SO002', Customer: '深圳创科', IsUrgent: '1', UrgentNote: '明日送达', OddRemark: '奇数行-2' }
])
</script>