<template>
	<cl-form ref="Form" inner>
		<template #slot-options="{ scope }">
			<ai-mention v-model="scope.options" :options="options.users">
				<template #popper-item="{ item }">
					<div class="flex items-center">
						<cl-avatar :size="24" />
						<span class="ml-2">{{ item.label }}</span>
					</div>
				</template>
			</ai-mention>
		</template>

		<template #slot-popper="{ scope }">
			<ai-mention v-model="scope.popper" :options="options.users">
				<template #popper-prefix>
					<el-text type="info" class="p-1" size="small" tag="p">Header</el-text>
				</template>

				<template #popper-suffix>
					<el-text type="info" class="p-1" size="small" tag="p">Footer</el-text>
				</template>
			</ai-mention>
		</template>
	</cl-form>
</template>

<script setup lang="ts">
import { useForm } from '@cool-vue/crud';
import { onMounted, reactive } from 'vue';

const Form = useForm();

const options = reactive({
	users: [
		{
			label: '张三',
			value: 'zhangsan'
		},
		{
			label: '李四',
			value: 'lisi'
		},
		{
			label: '王五',
			value: 'wangwu'
		},
		{
			label: '赵六',
			value: 'zhaoliu'
		},
		{
			label: '孙七',
			value: 'sunqi'
		},
		{
			label: '周八',
			value: 'zhouba'
		},
		{
			label: '吴九',
			value: 'wujiu'
		},
		{
			label: '郑十',
			value: 'zhengshi'
		}
	]
});

onMounted(() => {
	Form.value.open({
		items: [
			{
				label: '基础用法',
				prop: 'content',
				value: '测试回显值',
				component: {
					name: 'ai-mention',
					props: {
						autoFocus: true,
						options: options.users,
						onChange(val) {
							console.log(val);
						}
					}
				}
			},
			{
				label: '自定义触发字符',
				prop: 'prefix',
				component: {
					name: 'ai-mention',
					props: {
						options: options.users,
						prefix: '/',
						placeholder: '请输入 / 选择',
						labelFormatter(item: any) {
							return `${item.label}`;
						}
					}
				}
			},
			{
				label: '自定义标签格式',
				prop: 'labelFormatter',
				component: {
					name: 'ai-mention',
					props: {
						options: options.users,
						labelFormatter(item: any) {
							return `{${item.label}}`;
						}
					}
				}
			},
			{
				label: '自定义弹窗样式',
				prop: 'popperClass',
				component: {
					name: 'ai-mention',
					props: {
						options: options.users,
						popperClass: 'custom-mention-popper'
					}
				}
			},
			{
				label: '自定义选项列表',
				prop: 'options',
				component: {
					name: 'slot-options'
				}
			},
			{
				label: '插槽',
				prop: 'popper',
				component: {
					name: 'slot-popper'
				}
			}
		],
		op: {
			hidden: true
		},
		on: {
			open() {
				setTimeout(() => {
					Form.value.setForm('content', '测试回显值{zhangsan}，okk');
				}, 1000);
			}
		}
	});
});
</script>

<style lang="scss">
.custom-mention-popper {
	width: 300px !important;
	background-color: #333 !important;
	border: 0 !important;

	.ai-mention__popper-item {
		color: #fff;

		&:hover {
			background-color: #444;
		}

		&.is-focus {
			background-color: #222;
		}
	}
}
</style>
