<template>
	<div class="assembly-list-menu">
		<div
			class="box"
			v-for="(item, index) in value"
			:key="index"
			@contextmenu.stop.prevent="open($event, index)"
		>
			<div class="text mb-10 flex">
				<div class="w-120">左侧文字</div>
				<el-input
					type="text"
					:maxlength="12"
					:show-word-limit="true"
					v-model="value[index].text"
					@change="onChange"
				/>
			</div>
			<div class="text mb-10 flex">
				<div class="w-120">右侧文字</div>
				<el-input
					type="text"
					:maxlength="4"
					:show-word-limit="true"
					v-model="value[index].text2"
					@change="onChange"
				/>
			</div>
			<div class="color mb-10 flex">
				<div class="w-120">文字颜色</div>
				<el-color-picker v-model="value[index].color" @change="onChange" />
			</div>
			<div class="icon mb-10 flex">
				<div class="w-120">图标</div>
				<cl-upload
					text="上传图标"
					v-model="value[index].icon"
					:size="[60, 60]"
					@success="onChange"
				/>
			</div>
			<div class="link mb-10">
				<div>跳转链接</div>
				<assembly-link v-model="value[index].link" @change="onChange" />
			</div>
		</div>
		<div class="add" @click="add">
			<el-button link type="primary">添加</el-button>
		</div>
	</div>
</template>

<script lang="ts" name="assembly-list-menu" setup>
import { ref, type PropType } from "vue";
import { cloneDeep } from "lodash-es";
import { ContextMenu } from "@cool-vue/crud";
import { Form } from "../../types/form";

const props = defineProps({
	modelValue: {
		type: Object as PropType<Form.Title[]>,
		default: () => {
			return [
				{
					text: "",
					text2: "",
					color: "",
					icon: "",
					link: {
						name: "",
						type: "",
						appid: "",
						page: ""
					}
				}
			];
		}
	}
});
const emit = defineEmits(["update:modelValue"]);

const value = ref(props.modelValue);
function add() {
	value.value.push({
		text: "标题",
		text2: "查看",
		color: "#000",
		icon: "",
		link: {
			name: "",
			type: "",
			appid: "",
			page: ""
		}
	});
	onChange();
}

function open(e: any, index: number) {
	ContextMenu.open(e, {
		list: [
			{
				label: "删除按钮",
				callback(done) {
					value.value.splice(index, 1);
					onChange();
					done();
				}
			},
			{
				label: "复制按钮",
				callback(done) {
					const clonedItem = cloneDeep(value.value[index]);
					// 在index之后的位置插入clonedItem
					value.value.splice(index + 1, 0, clonedItem);
					onChange();
					done();
				}
			}
		]
	});
}
function onChange() {
	emit("update:modelValue", value.value);
}
</script>

<style lang="scss" scoped>
.assembly-list-menu {
	margin-bottom: 10px;

	.box {
		padding: 10px;
		border: 1px solid var(--el-border-color);
		border-radius: 6px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	.add {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
		border: 1px solid var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.w-120 {
		width: 120px;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
