<!-- 确定新建面授课弹窗 -->
<template>
  <a-modal
    v-model:visible="ft_hs"
    title="Title"
    :footer="null"
    :closable="false"
    wrapClassName="modalStyle facteachModal coursemodal"
    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:validated="validated"
                      :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: 100px;
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                    "
                  >
                    <img
                      v-for="(item, index) in optionsUrl"
                      :key="index"
                      class="choiceoptionurl"
                      :style="{
                        border:
                          pathBgId === item.id
                            ? '3px solid rgba(78, 166, 255, 1)'
                            : '1px solid #ccc',
                        display: index >= 3 ? 'none' : 'flex',
                      }"
                      :src="item.value"
                      :alt="item.name"
                      @click="chooseImg(item)"
                    />
                    <div
                      @click="showLearnBgMore"
                      class="learnBgItem learnBgMore"
                    >
                      查看更多
                      <img src="../../assets/images/projectadd/go.png" />
                    </div>
                  </div>

                  <!-- <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" style="margin-bottom: 102px">
                  <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>
                      <OrgClassCheck
                        v-model:value="orgSelect"
                        v-model:name="orgSelectName"
                      ></OrgClassCheck>
                    </div>
                    <div style="margin-top: 10px">
                      <a-select
                        v-model:value="selectJobId"
                        mode="multiple"
                        style="width: 440px; min-height: 40px"
                        placeholder="请选择岗位"
                        :options="jobType"
                        @change="handleChangeJob"
                        :fieldNames="{
                          key: 'id',
                          label: 'name',
                          value: 'id',
                        }"
                      ></a-select>
                    </div>
                    <div style="margin-top: 10px">
                      <a-select
                        v-model:value="selectBandId"
                        mode="multiple"
                        style="width: 440px; min-height: 40px"
                        placeholder="请选择Band"
                        :options="bandList"
                        @change="handleChangeBand"
                        :fieldNames="{
                          key: 'id',
                          label: 'name',
                          value: 'id',
                        }"
                      ></a-select>
                    </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" style="width: 440px">
                    <OrgClass
                      v-model:value="sourceBelongId"
                      v-model:name="sourceBelongName"
                    ></OrgClass>
                  </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: 'name',
                        value: 'code',
                      }"
                    >
                    </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">

                  <div
                  style="cursor: pointer"
                  @click="handleTagChange"
                >
                <a-input
                v-model:value="tags_val_single"
                style="width: 440px; height: 40px; border-radius: 8px"
                placeholder="请输入内容标签按回车键添加内容标签，可添加多个内容标签。"
                @pressEnter="handleTagChange"
              />
                  <img
                    style="width: 20px; height: 20px;margin-left: 20px; "
                    src="../../assets/images/courseManage/add1.png"
                  />
                </div>
                  <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 btn6" @click="noEditClose">
              <div class="btnText">取消</div>
            </div>
            <a-button
              class="btn btn6"
              @click="handlePush"
              :loading="validated === 1"
            >
              <div class="btnText">保存</div>
            </a-button>
          </div>
        </div>
      </div>
    </div>
    <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
      <a-spin :spinning="addLoading" tip="" />
    </div>
  </a-modal>

  <!-- 更多背景图 v-model:visible="learnBgMore"  -->
  <a-modal
    :closable="sh"
    centered="true"
    v-model:visible="learnBgMore"
    :footer="null"
    wrapClassName="courseBgMoreModal"
    :z-index="9999"
  >
    <div class="main">
      <div class="top">
        <div class="topc">面授课封面</div>
        <div @click="closeLearnBgMore">
          <img
            style="width: 20px; height: 20px"
            src="../../assets/images/basicinfo/close.png"
          />
        </div>
      </div>
      <div class="imagesBox">
        <div
          @click="chooseImg(item)"
          v-for="item in optionsUrl"
          :key="item.id"
          class="learnBgItem"
          :style="{
            border:
              pathBgId === item.id
                ? '3px solid rgba(78, 166, 255, 1)'
                : '1px solid #ccc',
            'background-image': 'url(' + item.value + ')',
          }"
        >
          <!-- <img class="im" :src="item.source" /> -->
        </div>
      </div>
      <div class="btn">
        <button class="samtn btn2" @click="closeLearnBgMore">取消</button>
        <a-button class="samtn btn2" @click="closeLearnBgMore">确定</a-button>
      </div>
    </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 "@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";
import OrgClassCheck from "@/components/project/OrgClassCheck";
import OrgClass from "@/components/project/OrgClass";
export default defineComponent({
  components: {
    Editor,
    Toolbar,
    FJUpload,
    NameInput,
    OrgClassCheck,
    OrgClass,
  },
  props: {
    xzinputV1: {
      type: String,
      default: null,
    },
  },
  setup(props, { expose, emit }) {
    const state = reactive({
      hideshow: true,
      ft_eidt: false,
      attach: "",
      validated: 2,
      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: [],
      // 课程三级分类
      projectInfo: { id: "" },
      //选择的封面图id及url
      pathBgId: null,
      pathBgUrl: null,
      learnBgMore: false, //封面图弹窗

      //目标任务
      orgSelect: [],
      orgSelectName: [],
      orgSelectFullName: [],
      selectJobName: [],
      selectJobId: [],
      selectBandName: [],
      selectBandId: [],
      //资源归属
      sourceBelongId: null,
      sourceBelongName: null,
      sourceBelongFullName: null,
    });
    const store = useStore();
    console.log(store, 666);
    const sysTypeOptions = computed(() => store.state.content_type);
    const optionsUrl = computed(() => store.state.course_pic);
    console.log("optionsUrl", optionsUrl);
    //获取岗位
    const jobType = computed(() => store.state.job_type);
    //获取band
    const bandList = computed(() => store.state.band);
    const userInfo = computed(() => store.state.userInfo);
    console.log("jobTypebandList", jobType, bandList);
    if (userInfo.value.departId && userInfo.value.departName) {
      state.sourceBelongName = userInfo.value.departName;
      state.sourceBelongId = userInfo.value.departId;
    }
    watch(
      () => state.fen_lei,
      () => {
        state.fen_lei1 = findClassFullName(sysTypeOptions.value);
      }
    );

    function findClassFullName(list, name = "") {
      return (
        list &&
        list.length > 0 &&
        list
          .map((e) => {
            return state.fen_lei === e.code
              ? name
                ? name + "-" + e.name
                : e.name
              : findClassFullName(
                  e.children,
                  name ? name + "-" + e.name : e.name
                );
          })
          .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 = "";

      //目标任务
      state.orgSelect = [];
      state.orgSelectName = [];
      state.orgSelectFullName = [];
      state.selectJobName = [];
      state.selectJobId = [];
      state.selectBandName = [];
      state.selectBandId = [];
      //资源归属
      state.sourceBelongId = null;
      state.sourceBelongName = null;
      state.sourceBelongFullName = null;
      // valueHtml.value = "";
      console.log("清空");
    };

    //  富文本 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
            console.log(
              "上传图片结果",
              process.env.VUE_APP_FILE_PATH + res.data.data
            );
            insertFn(
              process.env.VUE_APP_FILE_PATH + 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 chooseImg = (item) => {
      console.log(item);
      state.pathBgId = item.id;
      state.feng_mian_1 = item.value;
    };

    //获取分类、场景、封面图、-----------字典配置-------------------------------
    const options2 = ref([]);
    const options3 = ref([]);
    const options4 = ref([]);

    //获取分类、场景、封面图、----------------字典配置---------------------------

    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;
    };

    //保存面授课
    const handlePush = async (param) => {
      console.log(
        "组织、岗位、Band、资源归属选择" + JSON.stringify(state)
        // state.orgSelect,
        // state.selectJobId,
        // state.selectBandId,
        // state.sourceBelongId
      );
      let files = "";
      if (state.imgList.length) {
        state.imgList.forEach((item) => {
          files += item.img + ",";
        });
      }
      files = files.slice(0, files.length - 1);

      let orgSelectIds = "";
      let orgSelectNames = "";
      if (state.orgSelect && state.orgSelect.length) {
        state.orgSelect.forEach((item) => {
          orgSelectIds += item.value + ",";
        });
        state.orgSelect.forEach((item) => {
          orgSelectNames += item.label + ",";
        });
      }
      console.log("orgSelectIds&orgSelectNames2", orgSelectIds, orgSelectNames);
      orgSelectIds = orgSelectIds.slice(0, orgSelectIds.length - 1);
      orgSelectNames = orgSelectNames.slice(0, orgSelectNames.length - 1);

      let selectJobId = "";
      if (state.selectJobId.length) {
        state.selectJobId.forEach((item) => {
          selectJobId += item + ",";
        });
      }
      selectJobId = selectJobId.slice(0, selectJobId.length - 1);

      let selectBandId = "";
      if (state.selectBandId.length) {
        state.selectBandId.forEach((item) => {
          selectBandId += item + ",";
        });
      }
      selectBandId = selectBandId.slice(0, selectBandId.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;
      });
      console.log("校验重复", offName);
      if (offName) {
        message.destroy();
        return message.warning("课程名称重复，请重新填写");
      }

      const postData = {
        id: 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,
        // organizationIds: orgSelect, //todo 传的不对
        organizationIds: orgSelectIds,
        organizationNames: orgSelectNames,
        jobTypeIds: selectJobId,
        bandIds: selectBandId,
        sourceBelongId: state.sourceBelongId,
        sourceBelongFullName: state.sourceBelongName,
      };
      console.log("postData", postData);
      const checkList = [
        postData.name,
        // postData.targetUser,
        // postData.categoryId,
        postData.sysTypeId,
        // postData.teacherId,
        postData.picUrl,
        postData.intro,
        postData.sourceBelongId,
      ];
      console.log("checkList", checkList);
      if (
        (!postData.organizationIds &&
          !postData.jobTypeIds &&
          !postData.bandIds) ||
        !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.id);
          } 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;

      if (item.jobTypeIds) {
        state.selectJobId = item.jobTypeIds.split(",");
      }
      if (item.bandIds) {
        state.selectBandId = item.bandIds.split(",");
      }
      console.log("state.selectBandId", state.selectBandId);
      state.sourceBelongId = item.sourceBelongId;
      state.sourceBelongName = item.sourceBelongFullName;
      if (item.organizationIds && item.organizationNames) {
        let orgSelectIds = item.organizationIds;
        let orgSelectNames = item.organizationNames;
        orgSelectIds = orgSelectIds.split(",");
        orgSelectNames = orgSelectNames.split(",");
        console.log(
          "orgSelectIds&orgSelectNames",
          orgSelectIds,
          orgSelectNames
        );
        let arrObj = [];
        arrObj = orgSelectIds.map((item, index) => {
          return { value: item, label: orgSelectNames[index] };
        });
        console.log("arrObj-------------", arrObj);
        state.orgSelect = arrObj;
      }
      const imgDict = optionsUrl.value.find(
        (img) => img.value.split(",")[0] === item.picUrl
      );
      console.log("imgDict", imgDict);
      if (imgDict) {
        state.pathBgId = imgDict.id;
      }
    };

    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 = () => {
      if (state.offcourseId) {
        submitReview(state.offcourseId);
      } else {
        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("无此操作权限");
        }
      });
    };
    //目标人群
    const handleChangeJob = (e, k) => {
      console.log("eeee", e, k);
      state.selectJobId = e;
    };
    const handleChangeBand = (e, k) => {
      console.log("eeeeeeeeeee", e, k);
      state.selectBandId = e;
    };
    //封面图
    const showLearnBgMore = () => {
      state.learnBgMore = true;
    };
    //关闭更多路径背景弹窗
    const closeLearnBgMore = () => {
      state.learnBgMore = false;
    };

    return {
      ...toRefs(state),
      sysTypeOptions,
      moment,
      options2,
      options3,
      options4,
      optionsUrl,
      jobType,
      bandList,
      hideShow,
      visibleOpen,
      visibleClose,
      handleTagChange,
      handleTagClose,
      handlePush,
      reviewClick,
      noEditClose,
      editorRef,
      valueHtml,
      mode: "simple", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      chooseImg,
      changevalue,
      showLearnBgMore,
      closeLearnBgMore,
      handleChangeJob,
      handleChangeBand,
    };
  },
});
</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: 100px;
    height: 100px;
    margin-right: 10px;
    border-radius: 8px;
  }
  .learnBgItem {
    border-radius: 8px;
    width: 100px;
    height: 100px;
    background-size: 100%;
    background-repeat: no-repeat;
    // margin-bottom: 20px;
    margin-right: 6px;
  }

  .learnBgMore {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c7cbd2;
    font-size: 14px;
    font-weight: 400;
    color: #4ea6ff;
    line-height: 36px;
    cursor: pointer;
  }

  .aeLoading {
    z-index: 10000;
  }
}
.coursemodal {
  .i1_input {
    .ant-select-selector {
      min-height: 40px !important;
      border-radius: 8px !important;
      border: 1px solid #c7cbd2 !important;
    }
  }
}
.courseBgMoreModal {
  .ant-modal {
    width: 680px !important;
    height: 528px !important;

    .ant-modal-content {
      width: 680px !important;
      height: 528px !important;

      .ant-modal-body {
        width: 680px !important;
        height: 528px !important;
        padding: 0 !important;

        .main {
          display: flex;
          flex-direction: column;

          .top {
            padding-left: 51px;
            padding-right: 51px;
            padding-top: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;

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

          .imagesBox {
            display: flex;
            //  justify-content: space-between;
            flex-wrap: wrap;
            padding-left: 51px;
            padding-right: 39px;
            margin-top: 20px;
            height: 350px;
            overflow-y: auto;

            .learnBgItem {
              border-radius: 8px;
              width: 136px;
              height: 106px;
              background-size: 100%;
              background-repeat: no-repeat;
              margin-bottom: 20px;
              margin-right: 10px;
            }
          }

          .btn {
            width: 100%;
            position: absolute;
            bottom: 30px;
            margin-top: 30px;
            display: flex;
            justify-content: center;

            .samtn {
              width: 100px;
              height: 40px;
              font-size: 14px;
              border: 1px solid #4ea6ff;
              border-radius: 8px;
              cursor: pointer;
            }

            .btn1 {
              background-color: #fff;
              color: #4ea6ff;
            }

            .btn2 {
              background-color: #4ea6ff;
              color: #fff;
              margin-left: 16px;
            }
          }
        }
      }
    }
    .ant-modal-close-x {
      display: none;
    }
  }
}
</style>
