<!-- 确定新建面授课弹窗 -->
<template>
	<a-modal v-model:visible="ft_hs" title="Title" :footer="null" :closable="false"
		wrapClassName="modalStyle facteachModal" width="80%" @cancel="visibleClose" @ok="handlePush">
		<div class="modalHeader">
			<div class="headerLeft">
				<img style="width: 17px; height: 18px; margin-right: 8px" src="@/assets/images/basicinfo/add.png" />
				<span v-if="ft_eidt" class="headerLeftText">编辑面授课</span>
				<span v-else class="headerLeftText">新建面授课</span>
			</div>
			<div style="margin-right: 57px; cursor: pointer">
				<img @click="noEditClose" style="width: 22px; height: 22px" src="@/assets/images/basicinfo/close22.png" />
			</div>
		</div>
		<div class="modalMain">
			<!-- 审核理由 -->
			<div v-if="statusJuJue" class="statusJuJue">
				<span>审核意见：</span>
				<span>{{ auditDescription }}</span>
			</div>
			<div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
				<div class="ft_main">
					<div class="m_title">课程信息</div>
					<div class="m_body">
						<div class="mb_left">
							<div class="mbl_items">
								<div class="item_nam">
									<div class="asterisk_icon">
										<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
									</div>
									<span style="margin-right: 14px">课程名称</span>
								</div>
								<div class="item_inp">
									<div class="i1_input">
										<NameInput ref="inputRef" placeholder="请输入课程名称" v-model:value="qdms_inputV1"
											v-model:validate="validate" :maxlength="20" show-count :type="2" :id="offcourseId"></NameInput>
										<!--                    <a-input-->
										<!--                        v-model:value="qdms_inputV1"-->
										<!--                        maxlength="90"-->
										<!--                        style="width: 440px; height: 40px; border-radius: 8px"-->
										<!--                        placeholder="请输入课程名称"-->
										<!--                    />-->
										<!--                    <div class="inp_num">-->
										<!--                      <span style="color: #c7cbd2">-->
										<!--                        {{ qdms_inputV1.length }}/90-->
										<!--                      </span>-->
										<!--                    </div>-->
									</div>
								</div>
							</div>
							<div class="i2_cz">
								<div class="i2_top">
									<div class="i2_left">
										<span style="color: #999ba3">课程命名规则</span>
									</div>
									<div class="i2_right" @click="hideShow" style="cursor: pointer">
										<div class="b_zk" :style="{ display: hideshow ? 'block' : 'none' }">
											<span style="color: #4ea6ff">收起</span>
										</div>
										<div class="b_sq" :style="{ display: hideshow ? 'none' : 'block' }">
											<span style="color: #4ea6ff">展开</span>
										</div>
										<div class="b_icon"></div>
									</div>
								</div>
								<div class="i2_detail" :style="{ display: hideshow ? 'block' : 'none' }">
									<span style="color: #999ba3">
										1、课程名称统一不加书名号。<br />
										2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
										之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
										看到的是课程内容主题。<br />
										3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
										版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
									</span>
								</div>
							</div>
							<div class="mbl_items2">
								<div class="item_nam" style="margin-top: 8px;">
									<div class="asterisk_icon">
										<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
									</div>
									<span style="margin-right: 14px">封面图</span>
								</div>
								<div class="item_inp">
									<div style="width:440px;height:70px;display: flex;justify-content: flex-start;align-items: center;">
										<img v-for="(item, index) in optionsUrl" :key="index" class="choiceoptionurl"
											:style="item.value == feng_mian_1 ? 'border:3px solid rgb(78, 166, 255);' : ''" :src="item.value"
											:alt="item.label" @click="choicePic(item.value)" />
									</div>
									<!-- <a-select
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    v-model:value="feng_mian_1"
                    dropdownClassName="dropdown-style"
                    style="width: 440px"
                    placeholder="请选择"
                    :options="optionsUrl"
                    allowClear
                    showSearch
                  /> -->
									<img class="i_upload_img" v-if="feng_mian_1" :src="feng_mian_1"
										style="width:220px;height:120px;border-radius: 8px;" alt="avatar" />
									<div class="i_bottom">
										<span style="color: #999ba3">
											高宽比为16:9 (如:800*450) png或jpg图片
										</span>
									</div>
								</div>
							</div>
							<div class="mbl_items">
								<div class="item_nam">
									<div class="asterisk_icon">
										<img style="width: 10px; height: 10px" src="@/assets/images/coursewareManage/asterisk.png" alt="" />
									</div>
									<span style="margin-right: 14px">目标人群</span>
								</div>
								<div class="item_inp">
									<div class="i1_input">
										<a-input v-model:value="qdms_inputV2" maxlength="50"
											style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入目标人群" />
										<div class="inp_num">
											<span style="color: #c7cbd2">
												{{ qdms_inputV2.length }}/50
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="mbl_items">
								<div class="item_nam">
									<div class="asterisk_icon">
										<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
									</div>
									<span style="margin-right: 14px">内容分类</span>
								</div>
								<div class="item_inp">
									<div class="select i6_input">
										<a-tree-select style="width: 440px" placeholder="请选择内容分类" :treeDefaultExpandAll="true"
											             :getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
                                   v-model:value="fen_lei"
                                   :tree-data="sysTypeOptions"
                                   :fieldNames="{
                                          children: 'children',
                                          label: 'dictName',
                                          value: 'dictCode',
                                        }">
										</a-tree-select>
									</div>
								</div>
							</div>
							<div v-if="fen_lei" class="mbl_items">
								<div class="item_nam">
									<div class="asterisk_icon">
									</div>
									<span style="margin-right: 14px"> </span>
								</div>
								<div class="item_inp">
									<div class="select i6_input">
										<div style="width:440px;height:26px;font-size: 14px;color: rgb(153, 155, 163);">
											所属层级：{{ fen_lei1 }}
										</div>
									</div>
								</div>
							</div>
							<div class="mbl_items">
								<div class="item_nam" style="margin-bottom:110px;">
									<span style="margin-right: 14px">课程价值</span>
								</div>
								<div class="item_inp">
									<div class="i1_input">
										<a-textarea v-model:value="qdms_inputV3" maxlength="200"
											style="width: 440px; height: 140px; border-radius: 8px" placeholder="请输入课程价值" />
										<div class="inp_num" style="top:110px;">
											<span style="color: #c7cbd2;">
												{{ qdms_inputV3.length }}/200
											</span>
										</div>
									</div>
								</div>
							</div>

							<div class="mbl_items">
								<div class="item_nam">
									<span style="margin-right: 14px">场景</span>
								</div>
								<div class="item_inp">
									<div class="i1_input">
										<a-input v-model:value="chang_jin" maxlength="50"
											style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入场景" />
										<div class="inp_num">
											<span style="color: #c7cbd2">
												{{ chang_jin.length }}/50
											</span>
										</div>
									</div>
								</div>
								<!-- <div class="item_inp">
									<div class="select i7_input">
										<a-select :getPopupContainer="
	(triggerNode) => {
		return triggerNode.parentNode || document.body;
	}
" v-model:value="chang_jin" dropdownClassName="dropdown-style" style="width: 440px" placeholder="请选择"
											:options="options3" allowClear showSearch />
									</div>
								</div> -->
							</div>

							<div class="mbl_items">
								<div class="item_nam">
									<span style="margin-right: 14px">内容标签</span>
								</div>
								<div class="item_inp">
									<a-input v-model:value="tags_val_single" style="width: 440px; height: 40px; border-radius: 8px"
										placeholder="请输入内容标签按回车键添加内容标签，可添加多个内容标签。" @pressEnter="handleTagChange" />
									<div class="tag-content">
										<a-tag v-for="(item, index) in tags_val" :key="index" closable @close="handleTagClose(item)">
											{{ item }}
										</a-tag>
									</div>
								</div>
							</div>
						</div>


						<div class="mb_right">

						<!--
							<div class="mbl_items">
								<div class="item_nam" style="margin-top:5px;">
									<div class="asterisk_icon">
										<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
									</div>
								
									<span style="margin-right: 14px">授课教师</span>
								</div>
								<div class="item_inp">
									<div class="select" style="width:88%;">
										<ProjectManager v-model:value="member.value" v-model:name="member.name" />
									</div>
								</div>
							</div>
-->

							<div class="mbl_items2">
								<div class="item_nam" style="margin-top: 8px;">
									<div class="asterisk_icon">
										<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
									</div>
									<span style="margin-right: 14px">课程简介</span>
								</div>
								<div class="item_inp">
									<div class="i10_textarea">
										<a-textarea v-model:value="qdms_inputV6" maxlength="150"
											style="width: 440px; height: 100px; border-radius: 8px" placeholder="请输入" />
										<div class="inp_num">
											<span style="color: #c7cbd2">
												{{ qdms_inputV6.length }}/150
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="mbl_items">
								<div class="item_nam" style="margin-top: 8px;">
									<span style="margin-right: 10px">附件</span>
								</div>
								<div class="item_inp">
									<FJUpload v-model:value="attach" @changevalue="changevalue" />
								</div>
							</div>
						</div>


					</div>
					<div class="m_footer">
						<div class="fotnam">
							<span>课程大纲</span>
						</div>
						<div v-if="ft_hs" class="fotarea">
							<div style="border: 1px solid #ccc">
								<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
									:mode="mode" />
								<Editor style="height: 250px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
									:mode="mode" @onCreated="handleCreated" />
							</div>
						</div>
					</div>
					<div class="m_btn">
						<div class="btn btn5" @click="noEditClose">
							<div class="btnText">取消</div>
						</div>
						<div class="btn btn6" @click="handlePush">
							<div class="btnText">保存</div>
						</div>
						<div class="btn btn6" v-if="statusTingQi == 1" @click="reviewClick">
							<div class="btnText">提交审核</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
			<a-spin :spinning="addLoading" tip="" />
		</div>
	</a-modal>
</template>
<script>
import {
  reactive,
  toRefs,
  defineComponent,
  ref,
  shallowRef,
  onUnmounted, computed, watch,
} from "vue";
import { validateName } from "@/api/index1";
import { message } from "ant-design-vue";
import { edit, detail, handle } from "@/api/indexCourse";
import { fileUp } from "../../api/indexEval";
import * as api1 from "../../api/index1";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import NameInput from "@/components/project/NameInput";
import FJUpload from "@/components/common/FJUpload";
import * as moment from "moment";
import * as api2 from "../../api/indexAudit";
import {useStore} from "vuex";

export default defineComponent({
	components: {
		Editor,
		Toolbar,
		FJUpload,
		NameInput,
	},
	props: {
		xzinputV1: {
			type: String,
			default: null,
		},
	},
	setup(props, { expose, emit }) {
		const state = reactive({
			hideshow: true,
			ft_eidt: false,
			attach: "",
			validate: true,
			ft_hs: false,
			addLoading: false,
			statusJuJue: 0,
			statusTingQi: 1,
			member: { name: "", value: "" },

			offcourseId: null,
			qdms_inputV1: "",
			qdms_inputV2: "",
			qdms_inputV3: "",
			fen_lei: null,
			fen_lei1: null,
			feng_mian_1: null,
			chang_jin: "",
			tags_val_single: "",
			tags_val: [],
			qdms_inputV6: "",
			imgList: [],
			auditDescription: "",
			contentClassify: [],
			// 课程三级分类
			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',
						},
					],
				}
			],
		});
    const store = useStore();

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

    watch(()=>state.fen_lei,()=>{
      state.fen_lei1 = findClassFullName(sysTypeOptions.value)
    })

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

		// 删除文件返回参数
		const changevalue = (e) => {
			let arr = state.attach.split(',')
			let newarr = []
			for (let i = 0; i < arr.length; i++) {
				if (i !== e) {
					newarr.push(arr[i])
				}
			}
			if (newarr.length == 0) {
				state.attach = "";
			} else {
				state.attach = newarr.toString()
			}
			console.log('changevalue', e, newarr, state.attach)
		}

		const visibleOpen = (offcourseId, name) => {
			state.offcourseId = offcourseId;

			if (state.offcourseId) {
				state.ft_hs = true;
				state.ft_eidt = true;
				handleEditInfo(state.offcourseId);
			} else {
				state.ft_hs = true;
				state.ft_eidt = false;
				state.qdms_inputV1 = name;
				console.log(" state.qdms_inputV1 ", state.qdms_inputV1);
			}
		};
		const visibleClose = () => {
			state.ft_hs = false;
			valueHtml.value = "";
			ft_exit();
			emit("visibleClose");
		};

		// 未编辑直接离开的 不予刷新
		const noEditClose = () => {
			state.ft_hs = false;
			ft_exit();
			emit("noEdit");
		}

		expose({
			visibleOpen,
			visibleClose,
		});

		const ft_exit = () => {
			state.hideshow = true;
			state.ft_hs = false;
			state.addLoading = false;
			state.statusJuJue = 0;
			state.statusTingQi = 1;
			state.member = { name: "", value: "" };

			state.offcourseId = null;
			state.qdms_inputV1 = "";
			state.qdms_inputV2 = "";
			state.qdms_inputV3 = "";
			state.fen_lei = null;
			state.fen_lei1 = null;
			state.feng_mian_1 = null;
			state.chang_jin = "";
			state.tags_val_single = "";
			state.tags_val = [];
			state.qdms_inputV6 = "";
			state.imgList = [];
			state.attach = "";
			state.auditDescription = "";

			valueHtml.value = "";

			// valueHtml.value = "";
		};

		//  富文本 sssssssssssssss
		// 编辑器实例，必须用 shallowRef
		const editorRef = shallowRef();
		// 内容 HTML
		const valueHtml = ref("");
		// // 模拟 ajax 异步获取内容
		// onMounted(() => {
		//   setTimeout(() => {
		//     //     valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
		//     console.log(editorRef.value);
		//     // const toolbar = DomEditor.getToolbar(editorRef.value);
		//     // const menu = editorRef.value.getAllMenuKeys();
		//     // const bar = toolbar.getConfig().toolbarKeys;
		//     // console.log(menu);
		//     // console.log(bar);
		//   }, 3500);
		// });
		const toolbarConfig = {
			excludeKeys: ["insertVideo", "insertImage"],
		};
		const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
		editorConfig.MENU_CONF["uploadImage"] = {
			// 自定义上传
			async customUpload(file, insertFn) {
				const formData = new FormData();
				formData.append("file", file);
				fileUp(formData).then((res) => {
					if (res.data.code === 200) {
						// 最后插入图片  url alt href
						insertFn(res.data.data, file.name, res.data.data);
					}
				});
			},
		};
		const handleCreated = (editor) => {
			editorRef.value = editor; // 记录 editor 实例，重要！
		};
		// const handleDestory = () => {
		//   const editor = editorRef.value;
		//   if (editor == null) return;
		//   editor.destroy();
		// };
		// 组件销毁时，也及时销毁编辑器
		onUnmounted(() => {
			console.log("组件销毁时，也及时销毁编辑器");
			// handleDestory();
		});
		//  富文本 eeeeeeeeeeeeee

		// 点击图片选择图片
		const choicePic = (value) => {
			state.feng_mian_1 = value;
		}

		//获取分类、场景、封面图、-----------字典配置-------------------------------
		const optionsUrl = ref([]);
		const options2 = ref([]);
		const options3 = ref([]);
		const options4 = ref([]);
		const getDictList = (param) => {
			let obj = {
				pageNo: 1,
				pageSize: 10000,
				setCode: param,
			};
			api1
				.getDict(obj)
				.then((res) => {
					console.log("获取字典成功", res);
					if (res.data.code === 200) {
						if (param === "faceclassPic") {
							let arr = res.data.data.rows;
							let newArr = [];
							arr.forEach((item) => {
								newArr.push({
									value: item.dictValue,
									label: item.dictName,
								});
							});
							optionsUrl.value = newArr;
						}
						if (param === "faceclassClass") {
							let arr = res.data.data.rows;
							let newArr = [];
							arr.forEach((item) => {
								newArr.push({
									value: item.dictCode,
									label: item.dictName,
								});
							});
							options2.value = newArr;
						}
						if (param === "faceclassScene") {
							let arr = res.data.data.rows;
							let newArr = [];
							arr.forEach((item) => {
								newArr.push({
									value: item.dictCode,
									label: item.dictName,
								});
							});
							options3.value = newArr;
						}
						if (param === "contentClassify") {
							state.contentClassify = dealDickTree(res.data.data.rows) || []
						}
					}
				})
				.catch((err) => {
					console.log("获取字典失败", err);
				});
		};

		function dealDickTree(data, level = 1) {
			return data?.filter(e => e.levelId == level).map(({ dictName, dictCode }) => ({
				title: dictName,
				value: dictCode,
				key: dictCode,
				children: dealDickTree(data, dictCode)
			}))
		}

		getDictList("faceclassClass");
		getDictList("faceclassScene");
		getDictList("faceclassPic");
		getDictList("contentClassify");
		//获取分类、场景、封面图、----------------字典配置---------------------------

		const hideShow = () => {
			if (state.hideshow == true) {
				state.hideshow = false;
			} else {
				state.hideshow = true;
			}
		};
		const checkVal = (checkList) => {
			let count = 0;
			for (const keyName of checkList) {
				if (!keyName) {
					count++;
					console.log("keyname", keyName);
				}
			}

			return count ? false : true;
		};

		//保存面授课
		const handlePush = async (param) => {

			let files = "";
			if (state.imgList.length) {
				state.imgList.forEach((item) => {
					files += item.img + ",";
				});
			}
			files = files.slice(0, files.length - 1);
			console.log("filesfiles", files);

			const offName = await validateName({ name: state.qdms_inputV1, type: 2, id: state.offcourseId }).then(res => {
				return res.data.data == 1;
			});
			if (offName) {
				message.destroy();
				return message.warning("课程名称重复，请重新填写");
			}

			const postData = {
				offcourseId: state.offcourseId, //不传代表新增
				name: state.qdms_inputV1,
				picUrl: state.feng_mian_1,
				targetUser: state.qdms_inputV2,
				meaning: state.qdms_inputV3,
				// categoryId: state.fen_lei,
				sysTypeId: state.fen_lei,
				sceneContent: state.chang_jin,
				tips: state.tags_val ? state.tags_val.join(",") : null,
				// teacherId: state.member.value,
				// teacher: state.member.name,
				intro: state.qdms_inputV6,
				attach: state.attach,
				outline: valueHtml.value,
			};
			console.log("postData");
			console.log(postData);
			const checkList = [
				postData.name,
				postData.targetUser,
				// postData.categoryId,
				postData.sysTypeId,
				// postData.teacherId,
				postData.picUrl,
				postData.intro,
			];
			console.log("checkList", checkList);
			if (!checkVal(checkList)) {
				message.destroy();
				return message.error("请输入必填项");
			} else {
				state.addLoading = true;
			}

			edit(postData).then((res) => {
				state.addLoading = false;
				if (res.data.code === 200) {
					state.statusTingQi = 1;
					if (param === "review") {
						//新建时点击审核按钮
						submitReview(res.data.data.offcourseId);
					} else {
						message.destroy();
						message.success("保存成功");
						visibleClose();
					}
				} else if (res.data.code === -1) {

					message.destroy();
					message.success("无此操作权限");
					visibleClose();


				}
			});
		};

		//编辑面授课渲染绑定
		const handleEditInfo = async (offcourseId) => {
			console.log("jjjaj");
			state.validate = true;
			state.qdms_inputV1 = "";
			const item = await detail({
				offcourseId: Number(offcourseId),
			}).then((res) => {
				if (res.data.code === 200) return res.data.data;
			});

			state.statusJuJue = Number(item.auditStatus) === -1 ? 1 : 0;

			if (Number(item.auditStatus) === 2 && Number(item.status) === 1) {
				state.statusTingQi = 1;
			}
			if (Number(item.auditStatus) === 2 && Number(item.status) === 0) {
				state.statusTingQi = 0;
			}
			if (Number(item.auditStatus) === -1) {
				let obj = {
					offcourseId: offcourseId,
					type: 2,
					pageNo: 1,
					pageSize: 1,
				};
				const res = await api2.auditList(obj).then((res) => {
					if (res.data.code === 200) return res.data.data;
				});
				if (res.rows && res.rows.length > 0) {
					let i = res.rows.length;
					state.auditDescription = res.rows[i - 1].description ? res.rows[i - 1].description : "-";
				}
			}

			state.qdms_inputV1 = item.name;
			state.feng_mian_1 = item.picUrl;
			state.qdms_inputV2 = item.targetUser;
			state.qdms_inputV3 = item.meaning;
			// state.fen_lei = item.categoryId;
			state.fen_lei = item.sysTypeId;
			state.chang_jin = String(item.sceneContent ? item.sceneContent : '');
			state.tags_val = item.tips ? item.tips.split(",") : [];
			state.qdms_inputV6 = item.intro;
			state.member = { value: item.teacherId, name: item.teacher };
			valueHtml.value = item.outline;
			let arrss = item.attach.split(',')
			let str = ''
			for (let i = 0; i < arrss.length; i++) {
				i == arrss.length - 1 ? str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) : str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) + ','
			}
			console.log(str)
			state.attach = str;
		};

		const handleTagChange = () => {
			if (state.tags_val_single) {
				state.tags_val.push(state.tags_val_single);
			}
			state.tags_val_single = "";
		};
		const handleTagClose = (item) => {
			const arr = state.tags_val.filter((itm) => itm !== item);
			state.tags_val = arr;
		};

		//提交审核
		const reviewClick = () => {
			handlePush("review");
		};
		const submitReview = (id) => {
			state.addLoading = true;

			if (id === "") {
				return message.error("请先完成保存");
			}
			let obj = {
				offcourseId: id ? id : state.offcourseId,
				type: 1,
			};
			console.log("提交审核参数", obj);
			handle(obj).then((res) => {
				console.log("提交审核成功", res.data);
				if (res.data.code === 200) {
					message.destroy();
					message.success("已提交审核");
					state.addLoading = false;
					visibleClose();
				} else if (res.data.code === -1) {
					message.destroy();
					message.success("无此操作权限");
				}
			});
		};

		return {
			...toRefs(state),
      sysTypeOptions,
			moment,
			options2,
			options3,
			options4,
			optionsUrl,
			hideShow,
			visibleOpen,
			visibleClose,
			handleTagChange,
			handleTagClose,
			handlePush,
			reviewClick,
			noEditClose,
			editorRef,
			valueHtml,
			mode: "simple", // 或 'simple'
			toolbarConfig,
			editorConfig,
			handleCreated,
			choicePic,
			changevalue,
		};
	},
});
</script>
<style lang="scss">
.facteachModal {
	.ant-modal {
		.ant-modal-content {
			.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 {
										margin-top: 10px;
										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;
									}
								
								}
							}
							.fujian{
								display: none;
							}
							.mbl_items12 {
								width: 440px;
								margin-right:56px;

								.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 {
							width: calc(100% - 150px);
							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;
						}
					}
				}
			}
		}
	}

	.statusJuJue {
		margin-bottom: 20px;
	}

	.choiceoptionurl {
		width: 60px;
		height: 60px;
		margin-right: 10px;
		border-radius: 8px;
	}

	.aeLoading {
		z-index: 10000;
	}
}
</style>
