<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>自定义渲染、自定义显示、自定义按钮</view>
		</vol-alert>
		<vol-table :readonly="true" direction="list" titleField="OrderNo" :table-data="tableData" :columns="columns"
			@extraClick="onExtraClick">
			<template #header="{ data }">
				<view class="list-header-tip">第 {{ data.rowIndex + 1 }} 行</view>
			</template>
			<!-- #title：列须 titleSlot: true -->
			<template #title="{ data }">
				<view v-if="data.field === 'Customer'" class="slot-title">
					<text>{{ data.column.title }}</text>
					<text class="slot-title-tip">#{{ data.rowIndex + 1 }}</text>
				</view>
			</template>
			<!-- #field：列须 slot: true；整行自定义 title 为空字符串 -->
			<template #field="{ data }">
				<view v-if="data.field === 'Remark'" class="slot-field" @click.stop="onRemarkClick(data)">
					(自定义渲染) {{ data.row.Remark || '--' }}(行{{ data.rowIndex + 1 }})
				</view>
				<view v-else-if="data.field === 'customRow'" class="slot-row">
					整行自定义 · 第 {{ data.rowIndex + 1 }} 行 · 订单 {{ data.row.OrderNo }}
				</view>
			</template>
			<!-- #extra：列须 extraSlot: true -->
			<template #extra="{ data }">
				<view v-if="data.field === 'PhoneNo'" class="slot-extra" @click.stop="onCallClick(data)">拨打</view>
			</template>
			<template #bottom="{ data }">
				<view class="fx buttons">
					<view class="btn">
						<vol-button size="small" type="default" :plain="true"
							@click="rowBtnClick(data.row, data.rowIndex)">查看</vol-button>
					</view>
					<view class="btn">
						<vol-button size="small" type="primary" :plain="true"
							@click="rowBtnClick(data.row, data.rowIndex)">签收</vol-button>
					</view>
				</view>
			</template>
		</vol-table>
	</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 rowBtnClick = (row, index) => proxy.$toast('点击了第' + (index + 1) + '行按钮')
const onRemarkClick = (data) => proxy.$toast(`第${data.rowIndex + 1}行备注：${data.row.Remark || '空'}`)
const onCallClick = (data) => proxy.$toast(`第${data.rowIndex + 1}行拨打：${data.row.PhoneNo || ''}`)
const onExtraClick = (item, row, index) => proxy.$toast(`extra按钮：第${index + 1}行 · ${item.field}`)

const columns = ref([
	{ field: 'OrderNo', title: '订单编号', type: 'string', readonly: true },
	{ field: 'Customer', title: '客户', type: 'input', titleSlot: true },
	{ field: 'PhoneNo', title: '电话', type: 'input', extraSlot: true },
	{
		field: 'OrderType', title: '订单类型', type: 'select', bind: { key: '订单类型', data: [] },
		extra: { text: '查询', button: true, type: 'primary', icon: 'search', color: '#fff', size: 12 }
	},
	{ field: 'TotalPrice', title: '总价', type: 'decimal' },
	{ field: 'TotalQty', title: '总数量', type: 'int' },
	{ field: 'OrderDate', title: '订单日期', type: 'date' },
	{ field: 'Remark', title: '备注', type: 'string', slot: true },
	{ title: '', field: 'customRow', slot: true }
])

const tableData = ref([
	{
		OrderNo: 'P-20241114-000005', Customer: '王语嫣', PhoneNo: '18612349000',
		OrderType: 5, TotalPrice: 50089, TotalQty: 150, Remark: '加急'
	}
])
</script>