<template>
	<div class="assembly-menu">
		<div class="mode mb-10">
			<div class="w-80">模式</div>
			<el-radio-group v-model="value.mode" @change="onChange">
				<el-radio value="mode-1">文字+图标</el-radio>
				<el-radio value="mode-2">单图片</el-radio>
			</el-radio-group>
		</div>
		<template v-if="value.mode == 'mode-1'">
			<div class="text mb-10">
				<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="col-cen">
					<div>图标</div>
					<cl-upload
						text="上传图标"
						v-model="value.icon"
						:size="[60, 60]"
						@success="onChange"
					/>
				</div>
				<div class="col-cen">
					<div>文字颜色</div>
					<el-color-picker v-model="value.color" @change="onChange" />
				</div>
				<div class="col-cen">
					<div>背景颜色</div>
					<el-color-picker
						show-alpha
						v-model="value.backgroundColor"
						:predefine="['rgba(255, 255, 255, 0)']"
						@change="onChange"
					/>
				</div>
			</div>
		</template>
		<template v-else>
			<div class="icon">
				<div>
					<span class="mr-10">按钮的图片</span>
					<span class="tips" v-if="iconTips">{{ iconTips }}</span>
				</div>
				<cl-upload
					text="上传图片"
					v-model="value.icon"
					:size="[80, 80]"
					@success="onChange"
				/>
			</div>
		</template>
		<div class="link mb-10">
			<div>跳转链接</div>
			<assembly-link v-model="value.link" @change="onChange" />
		</div>
	</div>
</template>

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

const props = defineProps({
	modelValue: {
		type: Object as PropType<Form.Menu>,
		default: function () {
			return {
				text: "按钮",
				useText: true,
				mode: "mode-1",
				link: {
					page: "",
					appid: "",
					type: "",
					name: ""
				},
				icon: "",
				color: "#000",
				backgroundColor: "#fff"
			};
		}
	},
	iconTips: {
		type: String,
		default: ""
	},
	showWordLimit: {
		type: Boolean,
		default: true
	},
	maxlength: {
		type: Number,
		default: 8
	}
});

const emit = defineEmits(["update:modelValue", "change"]);

const value = ref(props.modelValue);

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

<style lang="scss" scoped>
.assembly-menu {
	padding: 10px;
	border: 1px solid var(--el-border-color);
	border-radius: 6px;
	box-sizing: border-box;
	margin-bottom: 10px;
	.mode {
		display: flex;
		align-items: center;
		.w-80 {
			width: 80px;
		}
	}
	.text {
		display: flex;
		align-items: center;
		.w-120 {
			width: 120px;
		}
	}
	.flex {
		display: flex;
		justify-content: space-between;
		.col-cen {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mr-10 {
		margin-right: 10px;
	}
	.tips {
		font-size: 12px;
		color: #bfbfbf;
	}
}
</style>
