<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>课程管理</span>
		</div>
		<div class="pb_content_body" style="height: calc(100% - 150px)">
			<div class="student_head">
				<div class="student_search">
					<span>课程分类</span>

					<el-select
						v-model="groupA"
						placeholder="请选择要筛选的分类"
						@change="search"
					>
						<el-option value="" label="所有分类"></el-option>
						<el-option
							v-for="item in groupList"
							:key="item.id"
							:value="item.id"
							:label="item.name"
						></el-option>
					</el-select>
				</div>
				<div class="student_button">
					<el-button type="primary" @click="goTo('/course/addCourse')"
						>添加课程</el-button
					>
				</div>
			</div>
			<div class="student_table">
				<div class="course_box">
					<div class="out_box" v-for="(item, index) in course" :key="index">
						<div class="tup">
							<img
								:src="item.cover != null && item.cover != '' ? JSON.parse(item.cover).length > 0 ? JSON.parse(item.cover)[0].url : mr : mr"
								alt=""
							/>
						</div>
						<div class="bottom_box">
							<div>{{ item.title }}</div>
							<div class="kc_time">{{ item.time }}</div>
						</div>
						<div class="three_bottom">
							<div @click="jump">开始教学</div>
							<div>修改文档模板</div>
							<div>作业</div>
						</div>
					</div>
					<!-- <div class="out_box">
						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
						<div class="bottom_box">
							<div>制作一台太阳能路灯</div>
							<div class="kc_time">2021-09-02 10:42:57</div>
						</div>
						<div class="three_bottom">
							<div @click="jump">开始教学</div>
							<div>修改文档模板</div>
							<div>作业</div>
						</div>
					</div>
					<div class="out_box">
						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
						<div class="bottom_box">
							<div>制作一台太阳能路灯</div>
							<div class="kc_time">2021-09-02 10:42:57</div>
						</div>
						<div class="three_bottom">
							<div @click="jump">开始教学</div>
							<div>修改文档模板</div>
							<div>作业</div>
						</div>
					</div>
					<div class="out_box">
						<div class="tup"><img src="../../assets/kc1.png" alt="" /></div>
						<div class="bottom_box">
							<div>制作一台太阳能路灯</div>
							<div class="kc_time">2021-09-02 10:42:57</div>
						</div>
						<div class="three_bottom">
							<div @click="jump">开始教学</div>
							<div>修改文档模板</div>
							<div>作业</div>
						</div>
					</div> -->
				</div>
				<!-- <div class="course_empty" >暂无数据</div> -->
			</div>
		</div>
		<div class="student_page">
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="10"
				:total="total"
				v-if="!isLoading && page"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
		<el-dialog :visible.sync="dialogVisible1" size="tiny">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>

<script>
	import "../../common/aws-sdk-2.235.1.min";
	import EditorBar from "../../components/tools/wangEnduit";
	export default {
		components: { EditorBar },
		data() {
			return {
				itemCount: 1,
				courseTitle: "",
				courseText: "",
				courseTime: "",
				isLoading: false,
				fileList: [],
				fileList1: [],
				homeworkList: [{ name: "" }],
				formLabelWidth: "100px",
				dialogVisible: false,
				dialogVisible1: false,
				dialogImageUrl: "",
				group: "",
				Juri: "",
				groupList: [],
				JuriList: [],
				page: 1,
				total: 0,
				tableData: [],
				now: "",
				courseDetail: {},
				addCourse: {},
				groupA: "",
				classX: "",
				course: [],
				mr: require("../../assets/icon/kc1.png"),
			};
		},
		methods: {
			change(val) {
				console.log(val);
			},
			addHomeworkBox() {
				this.homeworkList.push({ name: "" });
				this.itemCount++;
			},
			reduceHomeworkBox() {
				var a = this.homeworkList;
				a.splice(a.length - 1);
				this.itemCount--;
			},
			goTo(path) {
				this.$router.push(path);
			},
			tableRowClassName({ row, rowIndex }) {
				if ((rowIndex + 1) % 2 === 0) {
					return "even_row";
				} else {
					return "";
				}
			},
			jump() {
				window.open("");
			},
			handle_remove(file, fileList) {
				var _tmp = this.fileList;
				for (var i = 0, len = _tmp.length; i < len; i++) {
					if (_tmp[i].uid == file.uid) {
						_tmp.splice(i, 1);
						break;
					}
					this.fileList = _tmp;
				}
			},
			handle_remove1(file, fileList) {
				var _tmp = this.fileList1;
				for (var i = 0, len = _tmp.length; i < len; i++) {
					if (_tmp[i].uid == file.uid) {
						_tmp.splice(i, 1);
						break;
					}
					this.fileList1 = _tmp;
				}
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.page = val;
			},
			init() {
				this.itemCount = 1;
				this.courseTitle = "";
				this.courseText = "";
				this.homeworkList = [{ name: "" }];
				this.fileList = [];
				this.fileList1 = [];
				this.group = "";
				this.Juri = "";
				this.classX = "";
				this.$refs.upload1 ? (this.$refs.upload1.uploadFiles.length = 0) : "";
				this.$refs.upload ? (this.$refs.upload.uploadFiles.length = 0) : "";
			},
			handleClose(done) {
				this.init();

				done();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible1 = true;
			},
			onExceed() {
				this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
			},
			//获取分组分类
			getGroup() {
				let params = {};
				this.ajax
					.get(this.$store.state.api + "getGroup", params)
					.then((res) => {
						this.groupList = res.data[0];
						console.log(this.groupList);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			//获取权限
			getJuri() {
				let params = { cid: this.$store.state.userInfo.organizeid };
				this.ajax
					.get(this.$store.state.api + "getJuri", params)
					.then((res) => {
						this.JuriList = res.data[0];
						console.log(this.JuriList);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			//uuid生成
			guid() {
				return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
					/[xy]/g,
					function (c) {
						var r = (Math.random() * 16) | 0,
							v = c == "x" ? r : (r & 0x3) | 0x8;
						return v.toString(16);
					}
				);
			},
			time() {
				if (!this.now) {
					this.now = new Date().getTime();
					return true;
				} else {
					let time = new Date().getTime();
					if (time - this.now > 3000) {
						this.now = time;
						return true;
					} else {
						return false;
					}
				}
			},
			getCourse() {
				this.ajax
					.get(this.$store.state.api + "selectCourse", "")
					.then((res) => {
						this.course = res.data[0];
						console.log(res.data);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			search() {
				this.page = 1;
				this.isLoading = true;
			},
		},
		created() {
			this.page = 1;
			this.getCourse();
		},
	};
</script>

<style scoped>
	.dialog_diy >>> .el-dialog__header {
		background: #3d67bc !important;
		padding: 15px 20px;
	}
	.dialog_diy >>> .el-dialog__title {
		color: #fff;
	}
	.dialog_diy >>> .el-dialog__headerbtn {
		top: 19px;
	}
	.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
		color: #fff;
	}
	.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
		color: #fff;
	}
	.student_head >>> .el-button--primary {
		background-color: #2268bc;
	}

	.xls_button {
		font-size: 14px;
		cursor: pointer;
		text-decoration: underline;
		color: rgb(34, 104, 188);
	}
	.student_head {
		display: flex;
		justify-content: space-between;
	}
	.student_search {
		display: flex;
		align-items: center;
		width: 300px;
	}
	.student_search span {
		margin: 0 10px 0 0;
	}
	.student_button {
		display: flex;
		overflow: hidden;
		height: 40px;
	}
	.upload-demo {
		display: flex;
		flex-direction: column;
		align-items: end;
		/* position: relative; */
		width: 100px;
		overflow: hidden;
	}
	.student_table {
		margin: 10px 0;
		min-height: 530px;
		height: 93%;
		overflow: auto;
	}

	.student_empty {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.el-table >>> .even_row {
		background-color: #f1f1f1;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.course_button {
		padding: 10px 20px;
	}
	.course_button_box {
		display: flex;
		margin-top: 5px;
		justify-content: space-between;
	}
	.course_rate {
		margin-top: 5px;
	}
	.course_view {
		display: flex;
		align-items: center;
		margin: 5px 0 0 0;
	}
	.course_view i {
		background-image: url("../../assets/liulan.png");
		width: 25px;
		height: 25px;
		background-size: 100% 100%;
		/* margin-top: 1px; */
		line-height: 25px;
		vertical-align: text-top;
		background-repeat: no-repeat;
	}
	.image {
		width: 100%;
		height: 150px;
		display: block;
	}
	.course_box {
		display: flex;
		flex-wrap: wrap;
	}
	.student_page {
		width: 95%;
		margin: 0 auto;
	}
	.course_create_box {
		font-size: 18px;
	}
	.course_name {
		margin-top: 10px;
	}
	.course_name span {
		margin-bottom: 10px;
		display: block;
	}
	.homework_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.course_homework {
		width: 130px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 0 10px 10px 0;
	}
	.course_type {
		margin-top: 10px;
		display: flex;
	}
	.course_type1 span {
		margin-bottom: 10px;
		display: block;
	}
	.course_type2 {
		margin-left: 20px;
	}
	.course_type2 span {
		margin-bottom: 10px;
		display: block;
	}
	.course_empty {
		color: rgb(110, 110, 110);
	}
	.el_cards >>> .el-card__body {
		height: 100%;
	}
	.courseBtnBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 170px);
		padding: 10px;
	}

	.wordUpload {
		display: flex;
	}

	.wordUpload > .buttonUp {
		margin-right: 5px;
	}

	.out_box {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 250px;
		padding: 10px 0;
		background: #fff;
		margin-left: 25px;
	}

	.bottom_box {
		display: flex;
		padding: 10px 0 10px 10px;
		flex-direction: column;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		box-sizing: border-box;
	}
	.bottom_box > div:nth-child(1) {
		width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tup {
		width: 100%;
		height: 141.06px;
		margin: 0 auto;
	}

	.tup > img {
		width: 100%;
		height: 100%;
	}

	.kc_time {
		margin-top: 8px;
		font-size: 14px;
		color: #999;
	}

	.three_bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		border-bottom: 1px solid #ccc;
		height: 60px;
		background: #f5f4f4;
		line-height: 60px;
		border-radius: 5px;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		font-size: 14px;
	}
	.three_bottom > div:nth-child(1) {
		cursor: pointer;
	}
</style>
