<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、复选框、行号，获取选中行、删除行</view>
			<view>2、复选框:动态设置是否可以选择</view>
		</vol-alert>
		<view class="btns">
			<vol-button size="small" type="primary" @click="getRows">获取选中行</vol-button>
			<vol-button size="small" type="success" @click="setRows">设置选中行</vol-button>
			<vol-button size="small" type="error" @click="delRows">删除选中行</vol-button>
			<vol-button size="small" type="default" @click="clearRows">清除选中行</vol-button>
		</view>
		<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" ck index url="api/demo_order/getPageData" :height="0"
			direction="horizontal" :table-data="tableData" :loadBefore="loadBefore"
			:loadAfter="loadAfter" :columns="columns" :selectable="selectable"
			@ckChangeAll="ckChangeAll" @ckChange="ckChange">
		</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 orderNo = ref('')
const tableRef = ref(null)
const tableData = ref([])

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

const getRows = () => {
	const rows = tableData.value.filter(x => x.ck)
	proxy.$toast(`当前选中[${rows.length}]条数据`)
}
const setRows = () => {
	tableData.value.forEach((row, index) => { row.ck = index < 3 })
	proxy.$toast('设置了前3行数据选中')
}
const delRows = () => {
	const rows = tableRef.value.getSelectedRows()
	if (!rows.length) return proxy.$toast('请选中要删除的行')
	uni.showModal({
		title: '确定要删除选中的行吗',
		success: (res) => {
			if (res.confirm) {
				const deleted = tableRef.value.delRows()
				if (deleted.length) proxy.$toast(`删除了[${deleted.length}]条数据`)
			}
		}
	})
}
const clearRows = () => {
	tableRef.value.clearSelectedRows()
	proxy.$toast('清除成功')
}
const ckChangeAll = (rows, isChecked) => proxy.$toast(isChecked ? '全选' : '取消全选')
const ckChange = (row, isChecked, index) => {
	proxy.$toast(isChecked ? `选中了第${index + 1}行` : `取消选中第${index + 1}行`)
}
// 动态控制是否可选：奇数行可选（演示）
const selectable = (row, column, rowIndex) => rowIndex % 2 === 1

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