<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、headerFormatter：表头返回文本或HTML。</view>
			<view>2、#columnHeader表头插槽,自定义表头内容。</view>
			<view>3、align：表头与内容对齐,可选 center/right。</view>
		</vol-alert>
		<vol-table ref="tableRef" index url="api/demo_order/getPageData" :height="0"
			direction="horizontal" :table-data="tableData" :loadBefore="loadBefore"
			:loadAfter="loadAfter" :columns="columns">
			<!-- #columnHeader：对应列必须配置 headerSlot: true，否则不生效 -->
			<template #columnHeader="{ data }">
				<view v-if="data.field === 'OrderType'" class="header-slot">
					<text class="header-slot-text">类型</text>
					<text class="header-slot-tip">插槽</text>
				</view>
				<view v-else-if="data.field === 'oper'" class="header-slot header-slot-oper">
					操作栏
				</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 tableRef = ref(null)
const tableData = ref([])

const loadBefore = () => true
const loadAfter = () => true

const columns = ref([
	{
		field: 'OrderNo',
		title: '自定义表头',
		width: 120,
		headerFormatter: (column) => {
			return `<span style="color:#192fe8;font-weight:600;">${column.title}</span>`
		}
	},
	{
		field: 'OrderType',
		title: '订单类型',
		type: 'select',
		bind: { key: '订单类型', data: [] },
		width: 90,
		align: 'center',
		headerSlot: true // 使用 #columnHeader 时必须配置
	},
	{
		field: 'TotalPrice',
		title: '居中显示',
		type: 'decimal',
		width: 75,
		align: 'center'
	},
	{
		field: 'oper',
		title: '操作',
		width: 60,
		align: 'center',
		headerSlot: true,
		formatter: () => '<div style="color:#192fe8;">查看</div>',
		click: (row, column, rowIndex) => {
			proxy.$toast(`点击了第${rowIndex + 1}行,${row.OrderNo || ''}`)
		}
	}
])
</script>