import { defineComponent, ref } from 'vue';
import { Check } from '@element-plus/icons-vue';
import './index.scss';

interface Item {
	name: string;
	value: number;
}

export default defineComponent({
	emits: ['checked'],

	setup(props, { emit, expose, slots }) {
		// 列表数据
		const list = ref<Item[]>([
			{
				name: '鸡腿堡',
				value: 1
			},
			{
				name: '牛肉堡',
				value: 2
			}
		]);

		// 选择值
		const active = ref();

		// 是否可见
		const visible = ref(false);

		// 打开
		function open() {
			visible.value = true;
		}

		// 选择
		function toCheck(item: Item) {
			active.value = item.value;

			// 自定义事件
			emit('checked', item);
		}

		// 暴露方法和变量，使上级可以使用 ref 的方式来调用
		expose({
			toCheck
		});

		// 必须返回一个方法
		return () => {
			return (
				<div class="scope">
					<div class="h">
						<el-tag size="small" effect="dark" disable-transitions>
							tsx
						</el-tag>
						<span>tsx示例</span>
					</div>

					<div class="c">
						<el-button onClick={open}>预览</el-button>
						<demo-code files={['other/tsx/index.tsx']} />

						{/* ref 的绑定值必须 .value */}
						<cl-dialog v-model={visible.value} title="tsx示例">
							<div class="tsx-list">
								{/* 循环的使用 */}
								{list.value.map(item => {
									// 插槽的使用
									return slots.default ? (
										slots.default(item)
									) : (
										<div
											// 动态样式的使用
											class={[
												'item',
												{
													'is-active': item.value == active.value
												}
											]}
											// 事件的使用
											onClick={() => toCheck(item)}
										>
											<span>{item.name}</span>

											<el-icon>
												<Check />
											</el-icon>
										</div>
									);
								})}
							</div>
						</cl-dialog>
					</div>

					<div class="f">
						<span class="date">2024-01-01</span>
					</div>
				</div>
			);
		};
	}

	// 不推荐用该方法，在 setup 中返回模板信息
	// render() {
	// 	return <div></div>;
	// }
});