<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、表格自动分页、数据字典自动转换、api查询数据</view>
			<view>2、表头固定、滚动、自适应高度(可手动设置高度)</view>
		</vol-alert>
		<view class="search">
			<u-search @search="loadData" placeholder="请输订单编号" v-model="orderNo"
				@custom="loadData" @clear="loadData" :showAction="true" clearabled actionText="搜索">
			</u-search>
		</view>
		<vol-table ref="tableRef" index :url="apiUrl" :height="0" direction="horizontal"
			:text-inline="true" :table-data="tableData" :loadBefore="loadBefore" :loadAfter="loadAfter"
			:columns="columns">
		</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 orderNo = ref('')
const tableRef = ref(null)
const apiUrl = ref('api/demo_order/getPageData')
const tableData = ref([])

const loadBefore = (params) => {
	params.wheres.push({
		name: 'OrderNo',
		value: orderNo.value,
		displayType: 'like'
	})
	return true
}
const loadAfter = (res) => true
const loadData = () => tableRef.value.load()

const columns = ref([
	{ field: 'Order_Id', title: 'Order_Id', type: 'guid', hidden: true },
	{ field: 'OrderNo', title: '订单编号', width: 90 },
	{
		field: 'OrderType',
		title: '订单类型',
		type: 'select',
		bind: { key: '订单类型', data: [] },
		width: 90
	},
	{ field: 'TotalPrice', title: '总价', type: 'decimal', width: 70 },
	{ field: 'TotalQty', title: '总数量', type: 'int', width: 80 },
	{ field: 'OrderDate', title: '订单日期', type: 'date', width: 100 }
])
</script>