<template>
	<div class="assembly-picture">
		<div class="box">
			<cl-upload v-model="value.pic" :size="[80, 80]" @success="onChange"></cl-upload>
			<div class="link">
				<assembly-link v-model="value.link" :prepend="false" @change="onChange" />
				<div class="tips">建议图片宽度750px</div>
			</div>
		</div>
	</div>
</template>

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

const props = defineProps({
	modelValue: {
		type: Object as PropType<Form.Picture>,
		default: () => {
			return {
				pic: "",
				link: {
					name: "",
					type: "",
					appid: "",
					page: ""
				}
			};
		}
	}
});

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

const value = ref(props.modelValue);

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

<style lang="scss" scoped>
.assembly-picture {
	box-sizing: border-box;
	background-color: #f6f7fa;
	border-radius: 10px;
	padding: 6px;
	margin-bottom: 10px;

	.box {
		box-sizing: border-box;
		display: flex;
		background-color: #ffffff;
		padding: 10px;
		.link {
			box-sizing: border-box;
			margin-left: 10px;
		}
		.tips {
			font-size: 14px;
			margin-top: 10px;
			color: var(--el-color-warning);
		}
	}
}
</style>
