<template>
	<div class="assembly-title">
		<div class="text mb-10 flex">
			<div class="w-120">文字</div>
			<el-input
				type="text"
				:maxlength="maxlength"
				:show-word-limit="showWordLimit"
				v-model="value.text"
				@change="onChange"
			/>
		</div>
		<div class="color mb-10 flex">
			<div class="w-120">文字颜色</div>
			<el-color-picker v-model="value.color" @change="onChange" />
		</div>
		<div class="icon mb-10 flex">
			<div class="w-120">图标</div>
			<cl-upload text="上传图标" v-model="value.icon" :size="[60, 60]" @success="onChange" />
		</div>
		<div class="link mb-10">
			<div>跳转链接</div>
			<assembly-link v-model="value.link" @change="onChange" />
		</div>
	</div>
</template>

<script lang="ts" name="assembly-title" setup>
import { ref, type PropType } from "vue";
import { Form } from "../../types/form";

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

const value = ref(props.modelValue);

function onChange() {
	emit("update:modelValue", value.value);
}
</script>

<style lang="scss" scoped>
.assembly-title {
	padding: 10px;
	border: 1px solid var(--el-border-color);
	border-radius: 6px;
	box-sizing: border-box;
	margin-bottom: 10px;

	.mb-10 {
		margin-bottom: 10px;
	}
	.w-120 {
		width: 120px;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
