<template>
	<div class="app-content summary-wrap">
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="100px"
			class="demo-ruleForm"
		>
			<el-form-item label="商品通用简介" prop="resource">
				<cl-editor-quill v-model="ruleForm.desc" @load="editor"></cl-editor-quill>
			</el-form-item>
			<el-form-item>
				<div class="app-color-3">
					<i class="el-icon-warning" style="margin-right: 4px"></i>
					<span>说明：商品介绍的后半部分，将会显示上面的内容。</span>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'goods-summary',
	data() {
		return {
			ruleForm: {},
			rules: {}
		};
	},
	methods: {
		editor() {},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
<style lang="scss">
.summary-wrap {
	.prompt-text {
		margin: 0 10px;
	}
	.cl-editor-quill {
		/deep/ .editor {
			height: 300px;
		}
	}
}
</style>
