<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>1、支持表格行内直接编辑，并支持分组编辑</view>
			<view>2、下拉框、日期等选择事件联动给其他字段设置值</view>
			<view>3、注意：大批量返回的数据不要使用行内编辑</view>
		</vol-alert>
		<u-search v-model="goodsName" @search="loadData" @custom="loadData" @clear="loadData" placeholder="请输商品名称"
			:showAction="true" clearabled actionText="搜索"></u-search>
		<vol-table :readonly="false" ref="tableRef" index url="api/Demo_Goods/getPageData" :height="0"
			direction="list" :loadBefore="loadBefore" :loadAfter="loadAfter" :columns="columns"
			:table-data="tableData" @onChange="onChange">
			<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">
						<vol-button size="small" type="error" @click="delClick(scope.data.row, scope.data.rowIndex)">删除</vol-button>
						<vol-button size="small" type="default" @click="saveClick(scope.data.row)">保存</vol-button>
					</view>
				</view>
			</template>
			<view class="add-btn">
				<vol-button type="primary" @click="addClick">添加数据</vol-button>
			</view>
		</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 = (res) => {
	res.rows.forEach(row => {
		row.Img = proxy.base.getImg(row.Img, proxy.http)
		// 多选 / 级联需要转数组：row.字段 = (row.字段 || '').split(',')
	})
	return true
}
const loadData = () => tableRef.value.load()
const addClick = () => tableData.value.push({ Img: [] })
const delClick = (row, index) => {
	uni.showModal({
		title: '提示', content: '确定要删除数据吗?',
		success: (res) => { if (res.confirm) { tableData.value.splice(index, 1); proxy.$toast('删除成功') } }
	})
}
const saveClick = (row) => proxy.$toast('保存成功')
const onChange = (field, value, row) => {
	proxy.$toast('选择了字段[' + field + '],值[' + value + ']')
	// 给其他字段设置值：row.字段 =
}

const columns = ref([
	{ field: 'GoodsCode', title: '商品编号', required: true, type: 'input' },
	{ field: 'GoodsName', title: '商品名称', type: 'input' },
	{ field: 'CatalogId', title: '商品分类', type: 'select', bind: { key: '分类级联', data: [] } },
	{ field: 'Price', title: '商品单价', type: 'decimal', extra: { text: '元', style: 'font-size:28rpx;margin-left:10rpx' } },
	{ field: 'CreateDate', title: '出厂时间', type: 'date' },
	{ field: 'Img', title: '商品图片', type: 'img', url: 'api/Demo_Goods/upload', multiple: true, maxCount: 3 }
])
</script>