<template>
	<div>
		<i-page-header :title="pageTitle"></i-page-header>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<el-form ref="formData" :model="form" label-width="120px">

				<el-form-item label="文章标题" prop="title" :rules="[{ required: true, message: '请输入文章标题'}]">
					<el-input placeholder="请输入文章标题" autocomplete="off" v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="文章内容" prop="content" :rules="[{ required: true, message: '请输入文章内容'}]">
					<Toolbar style="border: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
					<!-- 编辑器 -->
					<Editor style="height: 400px; overflow-y: hidden;border: 1px solid #ccc;"
						:defaultConfig="editorConfig" v-model="form.content" @onChange="onChange"
						@onCreated="onCreated" />
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="tapOk(1)">{{form.id ? '修改提交': '保存发布'}}</el-button>
				</el-form-item>
			</el-form>

		</Card>
	</div>

</template>
<script>
	import {
		DomEditor
	} from '@wangeditor/editor'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import Setting from "@/setting";
	import axios from 'axios'
	import IPageHeader from "../../../layouts/system/page-header/index";
	import {
		SystemInfoAuditItem,
		SystemInfoAuditSub
	} from "../../../api/system/audit";
	import {
		upLoad
	} from '../../../api/system/sys'
	import {
		SystemAddArt,
		updateArticle,
		SystemArtDetail,
		SystemGetArtList,
		getArtDetail
	} from "../../../api/system/adver";
	import UiLoading from "../../../ui/loading/index";
	import {
		base64to2
	} from '../../../utils/comm.js'
	export default {
		name: "SystemInfoAuditItem",
		components: {
			UiLoading,
			IPageHeader,
			Editor,
			Toolbar
		},
		computed: {},
		data() {
			return {
				editor: null,

				toolbarConfig: {
					// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
					excludeKeys: ['group-video', 'emotion', 'fullScreen'],
				},
				editorConfig: {
					placeholder: "请输入内容...",
					// autoFocus: false,

					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						uploadImage: {
							base64LimitSize: 1024 * 1024 * 10
						},
					},
				},
				content: '',
				form: {
					content: '',
					title: '',
					id: ''
				},
				pageTitle: '文章详情',
				upHeaders: {},
				formActiveName: "tab_base",
				formData: {
					id: ""
				},
				title: "",
				dialogVisible: false,
				upUrl: ''
			}
		},
		created() {
			if (this.$route.query.title) {
				this.pageTitle = this.$route.query.title;
			}
			if (this.$route.query.id) {
				this.form.id = parseInt(this.$route.query.id);
			}
			this.initView();

		},
		mounted() {

		},
		methods: {

			onCreated(editor) {
				this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
				console.log(this.editor.getMenuConfig());

			},
			onChange(editor) {
				console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
			},
			getEditorText() {
				const editor = this.editor;
				if (editor == null) return;

				console.log(editor.getText()); // 执行 editor API
			},
			printEditorHtml() {
				const editor = this.editor;
				if (editor == null) return;

				console.log(editor.getHtml()); // 执行 editor API
			},
			initView: function() {

				if (this.form.id) {
					this.getData();
				}
			},
			getData: function() {
				let that = this
				var post = {};
				const token = this.$utils.util.cookies.get('system_token');
				console.log(token);
				console.log(axios);
				this.$utils.loading(this, "loading..");
				post.id = this.form.id;
				let loading = this.$loading('获取数据中..');
				// SystemArtDetail({},1).then(res => {
				// 	loading.close();
				// 	if (res.code == 200) {
				// 		this.data = res.data;
				// 	} else {
				// 		this.$alert(res.msg, '系统提示');
				// 	}
				// }).catch(err => {
				// 	loading.close();
				// 	this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
				// });

				try {
					getArtDetail({
						id: post.id
					}).then(res => {
						console.log(res.data.list[0]);
						let data = res.data.list[0]
						this.form.title = data.title
						// that.$set(that.form,title,)
						this.form.content = data.content
						loading.close();
					}).catch(err => {
						loading.close();
						console.log(err, 'sss');
					});
				} catch (e) {
					//TODO handle the exception

				}


			},
			/**
			 * 确认审核通过
			 */
			tapOk: function(type) {
				// this.form.id = this.data.id;
				// this.title = "审核通过";
				// this.form.mono = '';
				// this.form.type = type;
				// this.dialogVisible = true;
				// console.log(this.content);
				let that = this
				if (this.form.id) {
					updateArticle({
						id: that.form.id,
						title: that.form.title,
						content: that.form.content
					}).then(res => {
						this.$Message.success("修改成功");
					})
				} else {
					SystemAddArt({
						title: that.form.title,
						content: that.form.content
					}).then(res => {
						this.$Message.success("发布成功");
					})
				}

			},
			tapQr: function(type) {
				// this.form.id = this.data.id;
				// this.title = "审核拒绝";
				// this.form.mono = '';
				// this.form.type = type;
				// this.dialogVisible = true;
				this.$router.push('/')
			},
			/**
			 * ！提交 ！
			 */
			auditSub: function() {
				let loading = this.$loading('提交数据中..');
				SystemInfoAuditSub({
					mono: this.form.mono,
					id: this.form.id,
					type: this.form.type,
				}).then(res => {
					loading.close();
					if (res.code == 200) {
						this.$message({
							message: res.msg,
							type: 'success'
						});
						this.dialogVisible = false;
						this.initView();
					} else {
						this.$alert(res.msg, '系统提示');
					}
				}).catch(err => {
					this.isLoad = false;
					this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
				});
			},
		}
	}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
	@import "~vue2-editor/dist/vue2-editor.css";

	/* Import the Quill styles you want */
	@import '~quill/dist/quill.core.css';
	@import '~quill/dist/quill.bubble.css';
	@import '~quill/dist/quill.snow.css';

	iframe.videoIframe {
		border: 0px;
		padding: 0px;
	}

	.el-dialog__body {
		padding: 0px;
	}

	.el-dialog__body iframe body {
		padding: 0px;
	}

	.muser-tab-continer {
		border: 1px solid #EEEEEE
	}

	a.muser-tab-a {
		display: inline-block;
		padding: 0px 28px;
		height: 42px;
		line-height: 42px;
		border-bottom: 3px solid transparent;
		font-size: 17px;
		color: #595959;
	}

	a.muser-tab-a.active {
		border-bottom: 3px solid #EA312B;
		color: #EA312B
	}

	.upimg-item {
		width: 82px;
		height: 82px;
		margin-right: 12px;
		overflow: hidden;
		float: left;
		margin-bottom: 12px;
		position: relative;
		border: 1px solid grey;
	}

	.upimg-item img {
		width: 82px;
		cursor: pointer;
	}

	.img-remove-btn {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 24px;
	}

	.upvideo-item {
		width: 300px;
		margin-right: 5px;
		overflow: hidden;
		float: left;
		margin-bottom: 5px;
		position: relative;
		padding-right: 30px;
	}

	.upvideo-item video {
		width: 100%;
	}

	.upvideo-item audio {
		width: 100%;
	}
</style>