<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、行、单元格点击事件、formatter格式化</view>
			<view>2、动态行/列样式/自定义渲染/单元格颜色</view>
			<view>3、数据插槽 #field（slot:true）；#custom 单元格追加</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="api/demo_order/getPageData" :height="0"
			direction="horizontal" :table-data="tableData" :loadBefore="loadBefore"
			:loadAfter="loadAfter" :columns="columns" :rowStyle="rowStyle">
			<template #field="{ data }">
				<view v-if="data.field === 'oper'" class="btns">
					<vol-button @click="viewClick(data)" size="small" type="primary">查看</vol-button>
					<vol-button size="small" type="default">按钮</vol-button>
				</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 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 viewClick = (data) => proxy.$toast(data.rowIndex + '按钮')

// 整行背景色
const rowStyle = (row, index) => {
	if (index == 1) return { background: '#daeef7' }
	if (index == 2) return { background: 'rgb(197 229 255)' }
	if (index == 3) return { background: '#ffefd7' }
}

const columns = ref([
	{
		field: 'OrderNo',
		title: '点击事件',
		width: 100,
		formatter: (row) => '<div style="color:#192fe8;">' + (row.OrderNo || '') + '</div>',
		click: (row, column, rowIndex) => {
			proxy.$toast(`点击了第${rowIndex + 1}行,${row.OrderNo || ''}`)
		}
	},
	{
		field: 'OrderType',
		title: '背景颜色',
		type: 'select',
		bind: { key: '订单类型', data: [] },
		width: 80,
		cellStyle: (row, rowIndex) => {
			if (rowIndex == 0 || rowIndex == 4) {
				return { background: '#3d85cf', color: '#fff' }
			}
		}
	},
	{
		field: 'TotalPrice',
		title: '格式化',
		type: 'decimal',
		width: 70,
		formatter: (row) => {
			const color = row.TotalQty > 1000 ? '#16a34a' : 'red'
			return `<div><span style="color:#3cae04;">¥</span> <span style="color:${color};">${row.TotalQty || 0}</span></div>`
		}
	},
	{ field: 'oper', title: '操作', width: 140, slot: true }
])
</script>