<template>
	<div class="app-content summary-wrap">
		<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
			<el-form-item label="商品通用简介" prop="desc">
				<cl-editor-quill v-model="form.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('form')">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'goods-summary',
	data() {
		return {
			form: {
				desc: ''
			},
			rules: {},
			data: ''
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this._getData();
		},
		_getData() {
			this.$service.single.getGoodsIntro().then(res => {
				this.form.desc = res.introduce;
			});
		},
		_updateFn() {
			this.$service.single.editGoodsIntro({ introduce: this.form.desc }).then(res => {
				this.form.desc = res.introduce;
			});
		},
		editor() {},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log(this.form);
					this._updateFn();
				} 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>
