<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-16 20:59:33
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-07 08:49:02
 * @FilePath: /fe-manage/src/views/examine/CourseReviewedN.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 待审核课程页面 coursereviewedn-->
<template>
	<div class="coursereviewedn">
		<div class="tmpl">
			<div class="tmpl_header">
				<div class="tmplh_inp">
					<div class="inpbox">
						<div class="inpbox1">
							<!--
              <a-select
                v-model:value="valueproj"
                :options="[
                  { label: '请选择内容分类', value: '' },
                  ...calssifyList,
                ]"
              />-->
							<a-tree-select 
								:fieldNames="{
									children: 'children',
									label: 'dictName',
									value: 'dictCode',
								}"
								:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
								v-model:value="valueproj" 
								show-search 
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								placeholder="请选择内容分类" 
								tree-default-expand-all 
								:tree-data="sysTypeOptions">
							</a-tree-select>
						</div>
						<div class="inpbox1">
							<a-input v-model:value="valuecreater" style="
								width: 270px;
								height: 40px;
								border-radius: 8px;
								margin-right: 14px;
								" placeholder="请输入创建人" />
						</div>
						<div class="inpbox1">
							<a-input v-model:value="valuename" style="
								width: 270px;
								height: 40px;
								border-radius: 8px;
								margin-right: 14px;
								" placeholder="请输入名称" />
						</div>
						<div class="select addTimeBox">
							<div class="addTime">创建时间：</div>
							<a-range-picker
								v-model:value="searchParam"
								style="width: 420px"
								format="YYYY-MM-DD"
								separator="至"
								:placeholder="['      开始时间', '        结束时间']"
							/>
						</div>
					</div>
				</div>
				<div class="tmplh_btn">
					<div class="btn btn1" @click="searchList">
						<div class="search"></div>
						<div class="btnText btnText1">搜索</div>
					</div>
					<div class="btn btn2" @click="reset">
						<div class="search"></div>
						<div class="btnText btnText2">重置</div>
					</div>
				</div>
			</div>
			<div class="tmpl_body">
				<div class="tmpl_tabbox">
					<a-table :columns="columns1" :data-source="tableData1" :loading="loading" expandRowByClick="true"
						@expand="expandTable" :scroll="{ x: 1300 }" :pagination="false" />
				</div>
				<div class="tableBox">
					<div class="pa">
						<a-pagination v-if="total > 10" :showSizeChanger="false" show-quick-jumper :pageSize="pageSize"
							v-model:current="currentPage" :total="total" class="pagination" @change="changePagination" />
					</div>
				</div>
			</div>
		</div>
		<!-- 审核弹窗 -->
		<a-modal v-model:visible="courAuditModal" :footer="null" :closable="closeBack" wrapClassName="courAuditModal"
			centered="true">
			<div class="delete">
				<div class="del_header"></div>
				<div class="del_main">
					<div class="header">
						<div class="icon"></div>
						<span>审核</span>
						<div class="close_exit" @click="closeCourAuditModal"></div>
					</div>
					<div class="body">
						<div class="item">
							<div class="left">审核：</div>
							<div class="rig">
								<a-radio-group name="radioGroup" v-model:value="valuepass">
									<a-radio value="1">通过</a-radio>
									<a-radio value="2" style="margin-left: 40px">不通过</a-radio>
								</a-radio-group>
							</div>
						</div>
						<div class="item" style="margin-top: 20px">
							<div class="sign" style="position: relative; left: 30px; top: -2px">
								<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
							</div>
							<div class="left">审核意见：</div>
							<div class="rig">
								<a-textarea v-model:value="valueSugg" :rows="4" show-count :maxlength="20" />
							</div>
						</div>
					</div>
					<div class="del_btnbox">
						<div class="del_btn btn1" @click="closeCourAuditModal">
							<div class="btnText">取消</div>
						</div>
						<div class="del_btn btn2" @click="sureCourAuditModal">
							<div class="btnText">确定</div>
						</div>
					</div>
				</div>
			</div>
		</a-modal>
		<!-- 预览弹窗 -->
		<SeeModal :visible="lookCourseModal" :detail="faceDetailObj" @cancel="ft_exit" />

		<!-- 审核在线课 -->
		<a-modal v-model:visible="onlineClassesVisible" :footer="null" :closable="false"
			wrapClassName="modalStyle onlineClassesStyle" :zIndex="9999">
			<iframe id="iframe" style="width: 100%; height: 100%" :src="iframeUrl + 'course/noapproved'" name="myframe"
				sandbox="allow-forms allow-scripts allow-same-origin allow-popups"></iframe>
		</a-modal>
	</div>
</template>
<script>
import {reactive, toRefs, onMounted, ref, computed} from "vue";
import { list, courseAuditView, courseDetail } from "../../api/indexAudit";
import { message } from "ant-design-vue";
import SeeModal from "../courselibrary/components/seeModal.vue";
import { iframeUrl } from "../../api/method";
import * as api1 from "@/api/index1";
import {useStore} from "vuex";
import dayjs from "dayjs";

export default {
	name: "CoursereViewedN",
	components: {
		SeeModal,
	},
	setup() {
		const state = reactive({
			loading: false,
			optionsproj: [
				{
					value: "jack",
					label: "Jack",
				},
				{
					value: "rose",
					label: "rose",
				},
			],
			calssifyList: [], //分类字典
			valueproj: null,
			valuecreater: "",
			valuename: "",
			// currentFacePage: 1,
			currentPage: 1,
			total: null,
			pageSize: 10,
			courAuditModal: false, //审核弹窗
			closeBack: false,
			valuepass: "1",
			valueSugg: null,
			chooseId: null,
			chooseCreater: null,
			chooseOffId: null,
			lookCourseModal: false, //预览
			faceDetailObj: {},
			columns1: [
				// {
				//  title: "序号",
				// dataIndex: "number",
				//  key: "number",
				// align: "center",
				// },
				{
					title: "名称",
					dataIndex: "name",
					key: "name",
					align: "center",
					ellipsis: true,
					width: "20%",
				},
				{
					title: "类型",
					dataIndex: "type",
					key: "type",
					align: "center",
					width: "10%",
				},
				{
					title: "内容分类",
					dataIndex: "content",
					key: "content",
					align: "center",
					ellipsis: true,
					width: "10%",
				},
				{
					title: "状态",
					dataIndex: "status",
					key: "status",
					align: "center",
					width: "10%",
				},
				// {
				//   title: "转审",
				//   dataIndex: "change",
				//   key: "change",
				//   align: "center",
				// },
				{
					title: "创建人",
					dataIndex: "creater",
					key: "creater",
					align: "center",
					ellipsis: true,
					width: "15%",
				},
				{
					title: "创建时间",
					dataIndex: "time",
					key: "time",
					align: "center",
					ellipsis: true,
					width: "15%",
				},

				{
					title: "操作",
					dataIndex: "opt",
					key: "opt",
					align: "center",
					width: "20%",
					customRender: (value) => {
						return (
							<div>
								<span
									style="cursor:pointer;color:#387DF7"
									onClick={() => {
										showAudit(
											value.record.createId,
											value.record.creater,
											value.record.offId
										);
									}}
								>
									审核
								</span>
								&nbsp;
								<span
									onClick={() => {
										getFaceDetail(value.record.offId);
									}}
									style="cursor:pointer;color:#387DF7"
								>
									预览
								</span>
							</div>
						);
					},
				},
			],
			// 待审核课程的数据
			tableData1: [],

			//审核在线课嵌套页面
			onlineClassesVisible: false,
			iframeUrl: iframeUrl,
			// 课程三级分类
			options2222: [
				{
					title: '领导力',
					value: '100',
					children: [
						{
							title: '管理业务',
							value: '1001',
						},
						{
							title: '管理团队',
							value: '1002',
						},
						{
							title: '管理自我',
							value: '1003',
						},
					],
				},
				{
					title: '专业力',
					value: '200',
					children: [
						{
							title: '研发',
							value: '2001',
						},
						{
							title: '系统和解决方案',
							value: '2002',
						},
						{
							title: '生产技术与制造',
							value: '2003',
						},
						{
							title: '供应链',
							value: '2004',
						},
						{
							title: '营销',
							value: '2005',
						},
						{
							title: '品质',
							value: '2006',
						},
						{
							title: '专业职能',
							value: '2007',
							children: [
								{
									title: '战略与企划',
									value: '200701',
								},
								{
									title: '流程管理',
									value: '200702',
								},
								{
									title: '业绩管理',
									value: '200703',
								},
								{
									title: '项目管理',
									value: '200704',
								},
								{
									title: '信息技术',
									value: '200705',
								},
								{
									title: '环境与安全',
									value: '200706',
								},
								{
									title: '人力资源',
									value: '200707',
								},
								{
									title: '企业文化',
									value: '200708',
								},
								{
									title: '品牌',
									value: '200709',
								},
								{
									title: '财务',
									value: '200710',
								},
								{
									title: '法务',
									value: '200711',
								},
								{
									title: '风险控制',
									value: '200712',
								},
								{
									title: '行政',
									value: '200713'
								},
							]
						},
						{
							title: '医工',
							value: '2008',
						}
					],
				},
				{
					title: '通用力',
					value: '300',
					children: [
						{
							title: '职业操守与道德',
							value: '3001',
						},
						{
							title: '职业素养与技能',
							value: '3002',
						},
						{
							title: '规章制度',
							value: '3003',
						},
					],
				}
			],
			searchParam:[], // 时间搜索
		});
    const store = useStore();

    const sysTypeOptions = computed(() => store.state.sysType);

    function findClassFullName(list,classify,name=''){
      return list && list.length && list.map(e=>{
        return  classify == e.dictCode ? name?name+'-'+e.dictName:e.dictName : findClassFullName(e.children,classify,name?name+'-'+e.dictName:e.dictName)
      }).filter(name=>name).join('')
    }

		// 课程三级分类回显
		const sHX = (classify) => {
      return findClassFullName(sysTypeOptions.value,classify) || '-'
		}

		/*
		 * 获取字典列表
		 * param faceclassPic | faceclassClass | faceclassScene
		 * */
		const getDictList = (param) =>
			api1
				.getDict({
					pageNo: 1,
					pageSize: 20,
					setCode: param,
				})
				.then((res) => res.data.data.rows);

		const getFaceList = () => {
			state.loading = true
			let objn = {
				auditStatus: 1,
				// categoryId: state.valueproj,
				sysTypeId: state.valueproj,
				createName: state.valuecreater,
				name: state.valuename,
				pageNo: state.currentPage,
				pageSize: 10,
				projectName: "",
			};

			console.log(objn);
			// 测试数据先放下
			// setFaceData([{ name: "面授课审核", category_id: "8", scene_id: "8" }]);

			list(objn)
				.then((res) => {
					console.log("获取面授列表成功", res);
					let result = res.data.data;
					state.total = result.total;
					if (result.total > 0) {
						setFaceData(result.rows);
					} else {
						setFaceData([]);
					}
					state.loading = false
				})
				.catch((err) => {
					console.log("获取面授列表失败", err);
				});
		};

		// 获取面授详情
		const heroImg = ref(null);
		const valueHtml = ref(null);
		const attachMap = ref([]);

		const getFaceDetail = (id) => {
			console.log(id);
			courseDetail(id)
				.then((res) => {
					console.log("获取面授详情信息成功", res);
					let result = res.data.data;
					state.lookCourseModal = true;
					result.attach = result.attach == "" ? [] : result.attach.split(",");
					state.faceDetailObj = result;

					heroImg.value.src = result.picUrl;
					valueHtml.value = result.outline;
					attachMap.value = result.attach == "" ? [] : result.attach.split(",");
					console.log(result, attachMap.value);
				})
				.catch((err) => {
					console.log("获取面授详情信息失败", err);
				});
		};

		//  内容分类 场景 -- 目前直接写死的
		const sceneist11 = [
			{ dictCode: "6", dictValue: "场景一" },
			{ dictCode: "7", dictValue: "场景二" },
		];
		const contentList11 = [
			{ dictCode: "8", dictValue: "分类一" },
			{ dictCode: "5", dictValue: "分类二" },
		];

		// contentList11.find(e => e.dictCode == text)?.dictValue

		const searchList = () => {
			console.log('searchParamsearchParamsearchParam', state.searchParam)
			console.log('searchParamsearchParamsearchParam', Math.ceil(new Date(state.searchParam[0]).getTime()))
			let objn = {
				auditStatus: 1,
				// categoryId: state.valueproj,
				// beginTime:state.searchParam.length!==0? Math.ceil(new Date(state.searchParam[0]).getTime()/1000): "",
				// endTime:state.searchParam.length!==0? Math.ceil(new Date(state.searchParam[1]).getTime()/1000): "",
				beginTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[0]).getTime()).format("YYYY-MM-DD"): "",
				endTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[1]).getTime()).format("YYYY-MM-DD"): "",
				sysTypeId: state.valueproj,
				createName: state.valuecreater,
				name: state.valuename,
				pageNo: state.currentPage,
				pageSize: 10,
				projectName: "",
			};

			console.log(objn);

			list(objn)
				.then((res) => {
					console.log("获取面授列表成功", res);
					let result = res.data.data;
					state.total = result.total;
					if (result.total > 0) {
						setFaceData(result.rows);
					} else {
						setFaceData([]);
					}
				})
				.catch((err) => {
					console.log("获取面授列表失败", err);
				});
		};

		// 预览弹框 开启和关闭
		const ft_exit = () => {
			state.lookCourseModal = false;
		};

		const setFaceData = (tableData) => {
			if (!tableData || !tableData.length) {
				state.tableData1 = [];
				return;
			}
			let data = tableData;
			let array = [];
			data.map((item, i) => {
				let obj = {
					number: i + 1 + (state.currentPage - 1) * 10,
					name: item.name,
					type: item.type == 1 ? "线上" : "线下",
					content: sHX(item.sysTypeId),
					status:
						item.status == 0
							? "未提交"
							: item.status == 1
								? "待审核"
								: item.status == 2
									? "通过"
									: item.status == -1
										? "拒绝"
										: "-",
					change: "-",
					creater: item.createName,
					time: item.processTime,
					createrId: item.createId,
					offId: item.offcourseId,
				};
				array.push(obj);
			});
			state.tableData1 = array;
		};
		const reset = () => {
			state.searchParam = [];
			state.valueproj = null;
			state.valuecreater = null;
			state.valuename = null;
			getFaceList();
		};
		const changePagination = (pagina) => {
			state.currentPage = pagina;
			getFaceList();
		};
		const showAudit = (id, creater, offId) => {
			state.courAuditModal = true;
			state.chooseId = id;
			state.chooseCreater = creater;
			state.chooseOffId = offId;
			getFaceList();
		};
		const closeCourAuditModal = () => {
			state.courAuditModal = false;
			state.valueSugg = null;
			state.valuepass = "1";
			state.chooseId = null;
			state.chooseCreater = null;
			state.chooseOffId = null;
		};
		const sureCourAuditModal = () => {
			console.log(state.valueSugg);
			if (
				state.valueSugg == null ||
				state.valueSugg == undefined ||
				state.valueSugg == ""
			) {
				message.destroy();
				message.error("请输入审核意见");
				return;
			}

			courseAuditView({
				createId: state.chooseId,
				createName: state.chooseCreater,
				description: state.valueSugg,
				offcourseId: state.chooseOffId,
				pass: state.valuepass == "1" ? 1 : 0,
			})
				.then((res) => {
					console.log(res);
					state.courAuditModal = false;
					message.destroy();
					message.success("审核提交成功");
					state.valueSugg = null;
					state.valuepass = "1";
					getFaceList();
				})
				.catch((err) => {
					console.log(err);
					message.destroy();
					message.warning("审核提交失败");
					state.valueSugg = null;
					state.valuepass = "1";
				});
		};
		onMounted(async () => {
			getFaceList();
			//获取分类列表
			state.calssifyList = (await getDictList("faceclassClass")).map((e) => ({
				label: e.dictName,
				value: e.dictCode,
			}));
		});

		// 禁止用户编辑文本框内容
		const onEditorFocus = (event) => {
			event.enable(false);
		};
		return {
			...toRefs(state),
			getFaceList,
			searchList,
			setFaceData,
			reset,
			changePagination,
			showAudit,
			closeCourAuditModal,
			sureCourAuditModal,
			ft_exit,
			getFaceDetail,
			heroImg,
			valueHtml,
			attachMap,
			contentList11,
			sceneist11,
			onEditorFocus,
			sHX,
			sysTypeOptions
		};
	},
};
</script>
<style lang="scss">
.addTimeBox {
	top: 4px;
	position: relative;
	display: flex;
	align-items: center;

	.addTime {
		position: absolute;
		z-index: 10;
		margin-left: 10px;
		color: rgba(0, 0, 0, 0.4);
	}

	.ant-picker {
		padding-left: 85px;
	}

	.ant-picker-range .ant-picker-active-bar {
		margin-left: 85px;
	}
}
.courAuditModal {
	.ant-modal {
		width: 640px !important;
		height: 400px !important;

		.ant-modal-content {
			width: 640px !important;
			height: 400px !important;

			.ant-modal-body {
				width: 640px !important;
				height: 400px !important;
				padding: 0 !important;

				.delete {
					z-index: 999;
					width: 640px;
					height: 400px;
					background: #ffffff;
					box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
					border-radius: 4px;

					// position: absolute;
					// left: 50%;
					// top: 10%;
					// transform: translate(-50%, -50%);
					.del_header {
						position: absolute;
						width: calc(100%);
						height: 68px;
						background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
								rgba(78, 166, 255, 0) 100%);
					}

					.del_main {
						width: 100%;
						position: relative;

						.header {
							display: flex;
							align-items: center;
							padding-top: 20px;
							padding-left: 26px;
							font-size: 16px;

							.icon {
								width: 16px;
								height: 16px;
								margin-right: 10px;
								background-image: url(@/assets/images/taskpage/gan.png);
								background-size: 100% 100%;
							}

							.close_exit {
								position: absolute;
								right: 42px;
								cursor: pointer;
								width: 20px;
								height: 20px;
								background-image: url(@/assets/images/coursewareManage/close.png);
								background-size: 100% 100%;
							}
						}

						.body {
							width: 100%;
							margin: 34px auto 56px auto;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							// background-color: red;
							position: relative;

							.item {
								display: flex;
								width: 100%;

								.left {
									width: 110px;
									text-align: right;
								}

								.rig {
									width: 450px;

									.ant-input {
										border-radius: 8px;
										resize: none !important;
									}
								}
							}
						}

						.del_btnbox {
							display: flex;
							margin: 30px auto;
							justify-content: center;

							.del_btn {
								width: 100px;
								height: 40px;
								background: rgba(64, 158, 255, 0);
								border-radius: 8px;
								display: flex;
								align-items: center;
								justify-content: center;

								flex-shrink: 0;
								cursor: pointer;

								.btnText {
									font-size: 14px;
									font-weight: 400;
									line-height: 40px;
								}
							}

							.btn1 {
								border: 1px solid rgba(64, 158, 255, 1);
								color: #4ea6ff;
								margin-right: 14px;
							}

							.btn2 {
								background-color: #4ea6ff;
								color: #ffffff;
							}
						}
					}
				}
			}
		}
	}
}

.lookCourseModal {
	.ant-modal {
		.ant-modal-content {

			// width:1358px !important;
			.ant-modal-body {
				.modalHeader {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.headerLeft {
						margin-left: 27px;
						display: flex;
						align-items: center;

						.headerLeftText {
							font-size: 16px;
							font-weight: 400;
							color: #000000;
							line-height: 36px;
						}
					}
				}

				.modalMain {
					.m_title {
						margin-bottom: 20px;
					}

					.m_body {
						display: flex;
						flex-wrap: wrap;

						.mb_left {
							width: 50%;

							.mbl_items {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								margin-bottom: 10px;

								.item_nam {
									width: 100px;
									display: flex;
									align-items: center;
									justify-content: flex-end;
									white-space: nowrap;

									.asterisk_icon {
										width: 10px;
										height: 10px;
										margin-right: 5px;
										margin-top: -15px;
									}
								}

								.item_inp {
									flex: 1;
									position: relative;

									.inp_num {
										position: absolute;
										left: 398px;
										top: 10px;
									}
								}
							}

							.mbl_items2 {
								display: flex;
								align-items: start;
								margin-top: 10px;
								margin-bottom: 10px;

								.item_nam {
									width: 100px;
									display: flex;
									align-items: center;
									justify-content: flex-end;
									white-space: nowrap;

									.asterisk_icon {
										width: 10px;
										height: 10px;
										margin-right: 5px;
										margin-top: -15px;
									}
								}

								.item_inp {
									flex: 1;

									.i_upload_img {
										width: 100px;
										height: 100px;
										border-radius: 8px;
									}

									.i_upload {
										width: 100px;
										height: 100px;
										border: 1px solid #4ea6ff;
										border-radius: 8px;
										text-align: center;
										align-items: center;
										cursor: pointer;

										.addimg {
											position: relative;

											.heng {
												position: absolute;
												top: 50px;
												left: 25px;
												width: 50px;
												border: 1px solid #4ea6ff;
											}

											.shu {
												position: absolute;
												top: 25px;
												left: 50px;
												height: 50px;
												border: 1px solid #4ea6ff;
											}
										}
									}
								}
							}

							.i2_cz {
								width: 440px;
								margin-left: 100px;

								.i2_top {
									display: flex;
									justify-content: space-between;
								}
							}

							.i8_bottom {
								display: flex;
								width: 440px;
								margin-left: 100px;
							}
						}

						.mb_right {
							width: 50%;

							.mbl_items {
								display: flex;
								align-items: flex-start;
								justify-content: flex-end;
								margin-bottom: 10px;

								.item_nam {
									width: 100px;
									display: flex;
									align-items: center;
									justify-content: flex-end;
									white-space: nowrap;

									.asterisk_icon {
										width: 10px;
										height: 10px;
										margin-top: -15px;
										margin-right: 5px;
									}
								}

								.item_inp {
									flex: 1;
								}

								.accessory {
									display: flex;
									align-items: center;

									.accessory_icon {
										width: 16px;
										height: 16px;
										margin-top: -8px;
										margin-right: 5px;
									}
								}
							}

							.mbl_items2 {
								display: flex;
								align-items: start;
								margin-bottom: 10px;

								.item_nam {
									width: 100px;
									display: flex;
									align-items: center;
									justify-content: flex-end;
									white-space: nowrap;

									.asterisk_icon {
										width: 10px;
										height: 10px;
										margin-right: 5px;
										margin-top: -15px;
									}
								}

								.item_inp {
									flex: 1;
									position: relative;

									.inp_num {
										position: absolute;
										left: 395px;
										bottom: 10px;
									}
								}
							}

							.mbl_items12 {
								width: 440px;
								margin-left: 100px;

								.i12_box1 {
									display: flex;
									align-items: center;
									padding: 17px 0px 17px 21px;
									border: 1px solid #eff4fc;
									border-radius: 8px;
									margin-bottom: 10px;

									.file_img {
										width: 27px;
										height: 32px;
										// background-image: url(@/assets/images/coursewareManage/imgs.png);
										margin-right: 22px;

										img {
											width: 100%;
											height: 100%;
										}
									}

									.file_detail {
										width: 250px;
										margin-right: 21px;

										.file_updata {
											display: flex;
											align-items: center;

											.updatabox {
												position: relative;
												width: 230px;
												height: 5px;
												background-color: rgba(192, 192, 192, 0.25);
												border-radius: 3px;

												.updatacolor {
													position: absolute;
													left: 0;
													width: 100%;
													height: 5px;
													background-color: #57c887;
													border-radius: 3px;
												}

												.updatacolor2 {
													position: absolute;
													left: 0;
													width: 80%;
													height: 5px;
													background-color: #ff7474;
													border-radius: 3px;
												}

												.updatacolor3 {
													position: absolute;
													left: 0;
													width: 60%;
													height: 5px;
													background-color: #4ea6ff;
													border-radius: 3px;
												}

												.updataxq {
													position: absolute;
													right: 2px;
													top: -30px;
													color: #57c887;
												}

												.updataxq2 {
													position: absolute;
													right: 2px;
													top: -30px;
													color: #ff7474;
												}

												.updataxq3 {
													position: absolute;
													right: 2px;
													top: -30px;
													color: #4ea6ff;
												}
											}
										}
									}

									.file_operation {
										display: flex;

										.fobox {
											margin-right: 5px;
											cursor: pointer;
										}
									}
								}
							}
						}
					}

					.m_footer {
						display: flex;
						margin: 20px 0;

						.fotnam {
							width: 100px;
							display: flex;
							justify-content: end;
							padding-right: 15px;
						}

						.fotarea {
							position: relative;

							.fuwenben {
								width: 90%;
								height: 20px;
								background-color: rgb(95, 95, 95);
								position: absolute;
								left: 50%;
								transform: translate(-50%, 0);
								top: 3px;
								z-index: 9999;
							}
						}
					}

					.m_btn {
						width: 100%;
						margin-top: 25px;
						margin-bottom: 20px;
						display: flex;
						justify-content: center;
						align-content: center;

						.btn {
							width: 100px;
							height: 40px;
							background: rgba(64, 158, 255, 0);
							border-radius: 8px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 14px;
							flex-shrink: 0;
							cursor: pointer;

							.btnText {
								font-size: 14px;
								font-weight: 400;
								line-height: 40px;
							}
						}

						.btn5 {
							border: 1px solid rgba(64, 158, 255, 1);
							color: #4ea6ff;
						}

						.btn6 {
							background-color: #4ea6ff;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
}

.coursereviewedn {
	width: 100%;

	.tmpl {
		width: 100%;

		.tmpl_header {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 32px;

			margin-left: 32px;
			margin-right: 32px;

			.tmplh_inp {
				.inpbox {
					display: flex;
					margin-top: 32px;
					flex-wrap: wrap;

					.inpbox1 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 24px;
						margin-top: 10px;

						.ant-select-selector {
							border-radius: 8px;
							width: 270px;
							height: 40px;
							padding-top: 5px;
						}

						span {
							white-space: nowrap;
						}
					}
				}
			}

			.tmplh_btn {
				display: flex;
				// margin-left: 38px;
				margin-top: 42px;

				.btn {
					padding: 0px 26px 0px 26px;
					height: 38px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 14px;
					cursor: pointer;
					flex-shrink: 0;

					.search {
						background-size: 100%;
					}

					.btnText {
						font-size: 14px;
						font-weight: 400;
						line-height: 36px;
						margin-left: 5px;
					}

					.btnText1 {
						color: rgb(255, 255, 255);
					}

					.btnText2 {
						color: rgba(64, 158, 255, 1);
					}
				}

				.btn1 {
					background: #4ea6ff;

					.search {
						width: 15px;
						height: 17px;
						background-image: url("../../assets/images/courseManage/search0.png");
					}
				}

				.btn2 {
					background: #ffffff;
					border: 1px solid #4ea6ff;

					.search {
						width: 16px;
						height: 18px;
						background-image: url("../../assets/images/courseManage/reset1.png");
					}
				}

				.btn1:hover {
					background: rgb(255, 255, 255);
					border: 1px solid #4ea6ff;

					.search {
						background-image: url("../../assets/images/courseManage/search1.png");
					}

					.btnText {
						color: rgba(64, 158, 255, 1);
					}
				}

				.btn2:hover {
					background: rgba(64, 158, 255, 1);

					.search {
						background-image: url("../../assets/images/courseManage/reset0.png");
					}

					.btnText {
						color: #ffffff;
					}
				}
			}
		}

		.tmpl_body {
			padding: 0px 30px;

			.tmpl_tabbox {
				.operation {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #4ea6ff;

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

						.jc {
							margin-left: 20px;
							white-space: nowrap;
							cursor: pointer;
						}
					}
				}
			}

			.pa {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;
			}
		}
	}
}
</style>