<template>
	<div class="scope">
		<div class="h">
			<el-tag size="small" effect="dark" disable-transitions>select-table</el-tag>
			<span>选择表格</span>
		</div>

		<div class="c">
			<el-button @click="open">预览</el-button>
			<demo-code :files="['crud/select-table.vue']" />

			<!-- 自定义表格组件 -->
			<cl-form ref="Form" />
		</div>

		<div class="f">
			<span class="date">2025-02-07</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useForm } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import UserSelect from '/$/user/components/user-select.vue';

const { service } = useCool();
const Form = useForm();

const columns = [
	{
		label: '头像',
		prop: 'headImg',
		component: {
			name: 'cl-avatar'
		}
	},
	{
		label: '昵称',
		prop: 'nickName'
	},
	{
		label: '创建时间',
		prop: 'createTime'
	}
];

function open() {
	Form.value?.open({
		width: '800px',
		title: '选择表格',
		items: [
			{
				label: '多选 - default',
				prop: 'a',
				value: [],
				component: {
					vm: UserSelect,
					props: {
						multiple: true
					}
				},
				span: 12
			},
			{
				label: '单选 - default',
				prop: 'b',
				component: {
					name: 'cl-select-table',
					props: {
						pickerType: 'default',
						multiple: false,
						columns,
						service: service.base.sys.user
					}
				},
				span: 12
			},
			{
				label: '多选 - text',
				prop: 'c',
				value: [],
				component: {
					name: 'cl-select-table',
					props: {
						pickerType: 'text',
						multiple: true,
						columns,
						service: service.base.sys.user
					}
				},
				span: 12
			},
			{
				label: '单选 - text',
				prop: 'd',
				component: {
					name: 'cl-select-table',
					props: {
						pickerType: 'text',
						multiple: false,
						columns,
						service: service.base.sys.user
					}
				},
				span: 12
			},
			{
				label: '多选 - table',
				prop: 'e',
				value: [],
				component: {
					name: 'cl-select-table',
					props: {
						pickerType: 'table',
						multiple: true,
						columns,
						service: service.base.sys.user
					}
				}
			}
		]
	});
}
</script>
