<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="course_topic" :rules="[{ required: true, message: '请输入课程标题'}]">
					<el-input placeholder="请输入课程标题" autocomplete="off" v-model="form.course_topic"></el-input>
				</el-form-item>
				<el-form-item label="封面图片" prop="course_cover" :rules="[{ required: true, message: '请上传封面图片'}]">
					<ui-upload :upUrl="upUrl" :img="form.course_cover" fileName="封面图片" :headers="upHeaders"
						:updata="{isz:0,code:'img'}" @onUpload="onUpload"></ui-upload>
				</el-form-item>
				<el-form-item label="课程简介" prop="course_speaker_intro" :rules="[{ required: true, message: '请输入课程简介'}]">
					<el-input placeholder="请输入课程简介" autocomplete="off" v-model="form.course_speaker_intro"></el-input>
				</el-form-item>
				<el-form-item label="分类" prop="course_cate_id" :rules="[{ required: true, message: '请选择分类'}]">
					<el-cascader v-model="form.course_cate_id" :options="options" @change="handleChange" :show-all-levels="false"
						style="width: 100%;" :props="propss"></el-cascader>
				</el-form-item>
				<el-form-item label="课程分组" prop="gr_id" :rules="[{ required: true, message: '请选择课程分组'}]">
					<el-select v-model="form.gr_id" placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in optionss" :key="item.gr_id" :label="item.title" :value="item.gr_id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序" prop="sort" :rules="[{ required: true, message: '请输入课程排序'}]">
					<el-input placeholder="请输入课程标题" autocomplete="off" v-model="form.sort" type="number"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="course_price" :rules="[{ required: true, message: '请输入价格'}]">
					<el-input placeholder="请输入价格" autocomplete="off" v-model="form.course_price" type="number"></el-input>
				</el-form-item>
				<el-form-item label="认证价格" prop="course_price_2" :rules="[{ required: true, message: '请输入价格'}]">
					<el-input placeholder="请输入价格" autocomplete="off" v-model="form.course_price_2" type="number"></el-input>
				</el-form-item>
				<el-form-item label="二次认证价格" prop="course_price_3" :rules="[{ required: true, message: '请输入价格'}]">
					<el-input placeholder="请输入价格" autocomplete="off" v-model="form.course_price_3" type="number"></el-input>
				</el-form-item>
				<!-- 				<el-form-item label="积分最多抵扣" prop="deduct" >
					<el-input placeholder="请输入抵扣数量" autocomplete="off" v-model="form.deduct"></el-input>
				</el-form-item> -->
				<el-form-item label="从业人员专用" prop="course_only_for_employee"
					:rules="[{ required: true, message: '请选择是否从业人员专用'}]">
					<el-radio v-model="form.course_only_for_employee" :label="0">否</el-radio>
					<el-radio v-model="form.course_only_for_employee" :label="1">是</el-radio>
				</el-form-item>
				<el-form-item label="生成线下核销码" prop="make_code" :rules="[{ required: true, message: '请选择是否生成线下核销码'}]">
					<el-radio v-model="form.make_code" :label="0">否</el-radio>
					<el-radio v-model="form.make_code" :label="1">是</el-radio>
				</el-form-item>
				<!-- parent_course -->
				<el-form-item label="前置课程" prop="parent_course">
					<!-- <div style="display: flex;"> -->
					<el-input placeholder="请选择前置课程(留空即为无条件)" autocomplete="off" v-model="form.parent_course"
						disabled></el-input>
					<el-button type="primary" style="margin-top: 10px;" @click="chooseKc = true">选择前置课程(留空或-1即为无条件)</el-button>
					<!-- </div> -->
				</el-form-item>
				<!-- <el-form-item label="积分商城广告" prop="ad_pid">
					<el-select v-model="form.ad_pid" 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="course_intro" :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.course_intro" @onChange="onChange"
						@onCreated="onCreated" />
				</el-form-item>
				<!-- audio_file -->
				<el-form-item label="课程文件" prop="course_audio" >
					<el-upload class="upload-demo" drag :action="upUrl" :multiple="false" :headers="upHeaders"
						:data="{isz:0,code:'files'}" :before-upload="beforeUpload" :show-file-list="false" :on-success="afterUpload">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">只能上传mp3文件</div>
					</el-upload>
				</el-form-item>
				<audio controls :src="form.course_audio" v-if="form.course_audio" style="margin-left: 120px;">
				</audio>
				<el-form-item label="课程视频" prop="course_sp" >
					<el-upload class="upload-demo" drag :action="upUrl" :multiple="false" :before-upload="beforeUpload4" :on-success="afterUpload4"
						:headers="upHeaders" :data="{isz:0,code:'files'}" :show-file-list="false">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">只能上传mp4文件</div>
					</el-upload>
				</el-form-item>
				<video   height="300px" :src="form.course_sp" controls style="margin-left: 120px;" v-if="form.course_sp">
				</video>
				<el-form-item>
					<el-button type="primary" @click="tapOk(1)">{{form.id ? '修改提交': '保存发布'}}</el-button>
				</el-form-item>
			</el-form>

		</Card>
		<el-dialog v-model="chooseKc" :visible.sync="chooseKc" title="选择前置课程" @on-cancel="chooseClose" >
			<div style="display: flex;align-items: center;margin-bottom: 20px;">
				<span style="flex-shrink: 0;margin-right: 30px;">已选课程</span>
				<el-input
				  placeholder=""
				  v-model="form.parent_course"
				  :disabled="true"
				 >
				</el-input>
			</div>
			
			<el-input placeholder="请输入课程名称" v-model="eduction.keyword" class="input-with-select" style="margin-bottom: 30px;">
			    <el-button slot="append" icon="el-icon-search"></el-button>
			  </el-input>
			  
			  <!-- <el-button type="primary" @click="chooseEduction">选择</el-button> -->
			<el-table :data="eductionList" style="width: 100%" @select="chooseEduction" @select-all="chooseEduction">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="course_id" label="ID" width="60">
				</el-table-column>
				<el-table-column prop="course_topic" label="课题" width="300">
				</el-table-column>
			</el-table>
			<div class="acea-row row-right page">
				<Page :total="eduction.count" show-elevator show-total @on-change="tapPage" :page-size="eduction.pageSize" />
			</div>
			
			<!-- <span slot="footer" class="dialog-footer">
			    <el-button @click="chooseKc = false">取 消</el-button>
			    <el-button type="primary" @click="chooseKc = false">确 定</el-button>
			  </span> -->
		</el-dialog>
	</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,
		searchCourse,
		getCate,
		getGrlist,
		getCourseList,
		editCourse,
		addCourse,
	} 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 {
				eduction: {
					keyword: '',
					count: 0,
					page: 1,
					pageSize: 10
				},
				eductionList: [],
				chooseKc: false, //选择课程弹窗
				propss: {
					value: 'id',
					label: 'name',
					// checkStrictly: true
				},
				editor: null,

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

					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						uploadImage: {
							base64LimitSize: 1024 * 1024 * 10
						},
					},
				},
				content: '',
				form: {
					course_id: '',
					course_cover: '',
					course_topic: '',
					course_speaker_intro: '',
					course_cate_id: '',
					gr_id: '',
					sort: '',
					course_price: '',
					course_price_2: '',
					course_price_3: '',
					course_only_for_employee: 0,
					make_code: 0,
					parent_course: '',
					course_intro: '',
					course_audio: '',
					course_sp: ''
				},
				pageTitle: '课程详情',
				upHeaders: {},
				formActiveName: "tab_base",
				formData: {
					course_id: ""
				},
				title: "",
				dialogVisible: false,
				upUrl: '',
				optionss: [],
				options: []
			}
		},
		created() {
			if (this.$route.query.title) {
				this.pageTitle = this.$route.query.title;
			}
			if (this.$route.query.id) {
				this.form.course_id = parseInt(this.$route.query.id);
			}
			this.initView();
			this.getCate()
			this.getEduction()
		},
		mounted() {

		},
		methods: {
			chooseEduction(item) {
				console.log(item);
				let str = ''
				item.forEach((bb,index)=> {
					console.log(bb,index);
					str = str + bb.course_id + (index ==  (item.length - 1) ? '': ',')
				})
				this.form.parent_course = str
			},
			tapPage: function(index) {
				this.eduction.page = index;
				this.getEduction();
			},
			getEduction() {
				getCourseList({
					page: this.eduction.page,
					pageSize: this.eduction.pageSize,
					course_topic: this.eduction.keyword
				}).then(res => {
					console.log(res);
					this.eductionList = res.data.list
					this.eduction.count = res.data.total
				})
			},
			chooseClose(item) {
				console.log(item,'ddd');
			},
			getCate() {
				getCate().then(res => {
					this.options = res.data
					console.log(res.data);
				})
				getGrlist({
					page: 1,
					pageSize: 1000
				}).then(res => {
					this.optionss = res.data.list

				})
			},
			beforeUpload4(file) {
				console.log(file);
				if (file.type == 'video/mp4') {
					return file
				} else {
					this.$alert("只支持上传mp4文件", '系统提示');
					return false
				}
			},
			afterUpload(res) {
				console.log(res);
				if(res.code == 200) {
					this.form.course_audio = res.data.img
				}
			},
			afterUpload4(res) {
				console.log(res);
				if(res.code == 200) {
					this.form.course_sp = res.data.img
				}
			},
			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.course_cover = res.data.img;
					console.log(this.form.course_cover, 'this.form.course_cover');
				}
			},
			onUploads(res) {
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					// this.form.course_cover = res.data.img;
					// console.log(this.form.course_cover, 'this.form.course_cover');
					console.log(res);
				}
			},
			handleChange(val) {
				console.log(val[val.length-1],'ddd');
				this.form.course_cate_id = val[val.length-1]
			},
			handleChangeGr(val) {
				console.log(val);
			},
			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.course_id) {
					this.getData();
				}
			},
			getData: function() {
				let that = this
				var post = {};
				const token = this.$utils.util.cookies.get('system_token');
				this.$utils.loading(this, "loading..");
				post.id = this.form.course_id;
				let loading = this.$loading('获取数据中..');
				try {
					searchCourse({
						course_id: post.id
					}).then(res => {
						this.form = res.data
						if (this.form.course_cover && this.form.course_cover.indexOf('http') == -1) {
							this.form.course_cover = 'http://myj.liuniu946.com' + this.form.course_cover
						}
						loading.close();
						console.log(res);
					}).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.course_id) {
					editCourse(that.form).then(res => {
						this.$Message.success("修改成功");
					})
				} else {
					addCourse(that.form).then(res => {
						this.$Message.success("保存成功");
					})
					// 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>