<template>
	<div style="display: flex;justify-content: center;">
		<div style="width: 950px;">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
				:size="formSize" status-icon>
				<el-form-item label="发送到：" prop="name">
					<el-input style="width: 750px; margin-right: 10px" placeholder="请选择收件人" v-model="ruleForm.name" />
					<el-button style="display: inline-block" type="primary">选择</el-button>
				</el-form-item>
				<el-form-item label="邮箱标题：" prop="name">
					<el-input style="width: 820px; margin-right: 10px" placeholder="请输入邮箱标题" v-model="ruleForm.name" />
				</el-form-item>
				<el-form-item label="邮件内容：">
					<editor height="380" :min-height="380" />
				</el-form-item>
				<el-form-item label="附件：">
					<el-upload ref="uploadRef" class="upload-demo"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :auto-upload="false">
						<template #trigger>
							<el-button>
								上传<el-icon>
									<Upload />
								</el-icon>
							</el-button>
						</template>
					</el-upload>
				</el-form-item>
				<el-form-item >
					<el-button type="primary" @click=""><el-icon>
							<Promotion />
						</el-icon>发送</el-button>
					<el-button type="primary"><el-icon>
							<Promotion />
						</el-icon>发送继续</el-button>
					<el-button><el-icon>
							<Checked />
						</el-icon>存为草稿</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import type { FormInstance, FormRules } from "element-plus";

	interface RuleForm {
		name : string;
	}
	const checked1 = ref(false);
	const checked2 = ref(false);
	const formSize = ref("default");
	const ruleFormRef = ref<FormInstance>();
	const ruleForm = reactive<RuleForm>({
		name: "",
	});

	const rules = reactive<FormRules>({
		name: [
			{ required: true, message: "Please input Activity name", trigger: "blur" },
			{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
		],
	});
</script>
<style lang="scss" scoped></style>