<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、列表显示，表头、表尾自定义按钮或内容</view>
			<view>2、每行同时可以自定义按钮、背景颜色、字体颜色</view>
		</vol-alert>
		<view class="search">
			<u-search @search="loadData" placeholder="请输商品名称" v-model="goodsName"
				@custom="loadData" @clear="loadData" :showAction="true" clearabled actionText="搜索">
			</u-search>
		</view>
		<vol-table ref="tableRef" index url="api/Demo_Goods/getPageData" :height="0" direction="list"
			titleField="GoodsName" :table-data="tableData" :columns="columns"
			:loadBefore="loadBefore" :loadAfter="loadAfter" @rowClick="rowClick" @extraClick="extraClick">
			<template #header="scope">
				<view class="scope-header">第[{{ scope.data.rowIndex + 1 }}]行</view>
			</template>
			<template #bottom="scope">
				<view class="scope-header">
					<view class="fx-1" style="text-align: left;">￥<text class="scope-price">{{ scope.data.row.Price }}</text></view>
					<view class="btns">
						<view class="btn">
							<vol-button size="small" type="default"
								@click="rowBtnClick(scope.data.row, scope.data.rowIndex)">取消</vol-button>
						</view>
						<view class="btn">
							<vol-button size="small" type="primary"
								@click="rowBtnClick(scope.data.row, scope.data.rowIndex)">收藏</vol-button>
						</view>
					</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 tableRef = ref(null)
const goodsName = ref('')
const tableData = ref([])

const loadBefore = (params) => {
	params.wheres.push({ name: 'GoodsName', value: goodsName.value, displayType: 'like' })
	return true
}
const loadAfter = () => true
const loadData = () => tableRef.value.load()
const rowBtnClick = (row, index) => proxy.$toast('点击了第[' + (index + 1) + ']行')
const rowClick = () => proxy.$toast('rowClick')
const extraClick = (row, column, index) => {
	if (column.field == 'GoodsCode') {
		proxy.$toast('点击了第[' + (index + 1) + ']行,字段[' + column.title + '],[' + row.GoodsCode + ']')
	} else {
		proxy.$toast('点击了第[' + (index + 1) + ']行,字段[' + column.title + '],[' + row.Price + ']')
	}
}

const columns = ref([
	{ field: 'GoodsName', title: '商品名称' },
	{ field: 'GoodsCode', title: '商品编号' },
	{
		field: 'CatalogId', title: '商品分类', valueStyle: 'color:#007aff',
		bind: { key: '分类级联', data: [] },
		extra: { text: '按钮', button: true, type: 'error', icon: 'search', color: '#ffff', size: 13 }
	},
	{
		field: 'Price', title: '商品单价', type: 'decimal',
		titleStyle: 'color:#007aff', valueStyle: 'color:#f70202;font-weight:bolder',
		extra: { text: '元', style: 'font-size:28rpx;color:#5b5c5c;margin-left:10rpx' }
	},
	{ field: 'CreateDate', title: '创建时间', type: 'datetime', itemStyle: 'background:#fff9f0' },
	{ field: 'Remark', title: '商品描述' },
	{ field: 'Img', title: '商品图片', type: 'img' }
])
</script>