<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="user" :rules="[{ required: true, message: '请输入课程标题'}]">
					<el-select v-model="form.user" placeholder="请选择讲师" style="width: 100%;">
						<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="类型" prop="type1" :rules="[{ required: true, message: '请输入课程标题'}]">
					<el-select v-model="form.type1" placeholder="请选择类型" style="width: 100%;">
						<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- type2 -->
				<el-form-item label="分类" prop="type2" :rules="[{ required: true, message: '请选择分类'}]">
					<el-cascader v-model="form.type2" :options="options" @change="handleChange"
						:show-all-levels="false" style="width: 100%;" :props="propss"></el-cascader>
				</el-form-item>
				<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="indeximg" :rules="[{ required: true, message: '请上传封面图片'}]">
					<ui-upload :upUrl="upUrl" :img="form.indeximg" fileName="封面图片" :headers="upHeaders"
						:updata="{isz:0,code:'img'}" @onUpload="onUpload"></ui-upload>
				</el-form-item>
				<el-form-item label="组简介" prop="ins" :rules="[{ required: true, message: '请输入组简介'}]">
					<el-input placeholder="请输入组简介" autocomplete="off" v-model="form.ins"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="tapOk(1)">{{form.gr_id ? '修改提交': '保存发布'}}</el-button>
				</el-form-item>
			</el-form>
		</Card>
	</div>

</template>
<script>
	import UiUpload from "@/ui/upload/index";
	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,
		getCate,
		editGr,
		addGr
	} 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,
			UiUpload
		},
		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: {
					id: '',
					indeximg: '',
					title: '',
					user: '',
					type1: 0,
					type2: 0,
					ins: ''
				},
				pageTitle: '分组详情',
				upHeaders: {},
				formActiveName: "tab_base",
				formData: {
					id: ""
				},
				title: "",
				dialogVisible: false,
				upUrl: '',
				optionss: [{
					value: 0,
					label: '视频'
				}, {
					value: 1,
					label: '音频'
				}],
				options: [],
				propss: {
					value: 'id',
					label: 'name',
					checkStrictly: true
				}
				
			}
		},
		created() {
			if (this.$route.query.title) {
				this.pageTitle = this.$route.query.title;
			}
			if (this.$route.query.item) {
				// this.form = parseInt(this.$route.query.item);
				this.form = JSON.parse(this.$route.query.item)
				if(this.form.indeximg.indexOf('http') == -1 ) {
					this.form.indeximg = 'http://myj.liuniu946.com' + this.form.indeximg
				}
				console.log(this.$route.query.item,this.form);
			}
			this.initView();
			this.getCate()
		},
		mounted() {

		},
		methods: {
			getCate() {
				getCate().then(res => {
					this.options = res.data
					console.log(res.data);
				})
			},
			beforeUpload4(file) {
				console.log(file);
				if(file.type == 'video/mp4') {
					return file
				}else {
					this.$alert("只支持上传mp4文件", '系统提示');
					return false
				}
			},
			beforeUpload(file) {
				console.log(file);
				if(file.type == 'audio/mpeg') {
					return file
				}else {
					this.$alert("只支持上传mp3文件", '系统提示');
					return false
				}
			},
			/**
			 * 上传文件
			 * @param res
			 */
			onUpload: function(res) {
				if (res.code == -1) {
					// Notice.error({
					// 	title: "系统提示",
					// 	content: res.msg
					// });
				} else {
					this.form.indeximg = res.data.img;
					
				}
			},
			handleChange() {

			},
			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() {
				var upHeaders = {};
				this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
				const token = this.$utils.util.cookies.get('system_token');
				if (token) {
					upHeaders['SYSTEM-ACC-TOKEN'] = token;
				}
				this.upHeaders = upHeaders;
				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) {
				let that = this
				if (this.form.gr_id) {
					editGr(this.form).then(res => {
						this.$Message.success("修改成功");
					})
				} else {
					addGr(this.form).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>