<!-- 确定新建面授课弹窗 -->
<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">
                    <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">
                  <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-select-->
                    <!--                        :getPopupContainer="-->
                    <!--                        (triggerNode) => {-->
                    <!--                          return triggerNode.parentNode || document.body;-->
                    <!--                        }-->
                    <!--                      "-->
                    <!--                        v-model:value="fen_lei"-->
                    <!--                        dropdownClassName="dropdown-style"-->
                    <!--                        style="width: 440px"-->
                    <!--                        placeholder="请选择"-->
                    <!--                        :options="options2"-->
                    <!--                        allowClear-->
                    <!--                        showSearch-->
                    <!--                    />-->
                    <a-tree-select
                        style="width: 440px"
                        placeholder="请选择内容分类"
                        :treeDefaultExpandAll="true"
                        :getPopupContainer="
                          (triggerNode) => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
                        v-model:value="fen_lei"
                        :tree-data="options2222"
                    >
                    </a-tree-select>
                  </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="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>
                  <!-- 授课教师1 -->
                  <span style="margin-right: 14px">授课教师</span>
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    <ProjectManager
                        v-model:value="member.value"
                        v-model:name="member.name"
                    />
                  </div>
                </div>
              </div>
              <div class="mbl_items2">
                <div class="item_nam">
                  <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">
                  <span style="margin-right: 10px">附件</span>
                </div>
                <div class="item_inp">
                  <FJUpload v-model:value="attach"/>
                </div>
              </div>
            </div>
          </div>
          <div class="m_footer">
            <div class="fotnam">
              <span>课程大纲</span>
            </div>
            <div 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>
  </a-modal>
</template>
<script>
import {
  reactive,
  toRefs,
  defineComponent,
  ref,
  shallowRef,
  // onMounted,
  onUnmounted,
} from "vue";
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 ProjectManager from "@/components/project/ProjectManagerNew";
import FJUpload from "@/components/common/FJUpload";
import * as moment from "moment";
import * as api2 from "../../api/indexAudit";

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

      offcourseId: null,
      qdms_inputV1: "",
      qdms_inputV2: "",
      qdms_inputV3: "",
      fen_lei: null,
      feng_mian_1: null,
      chang_jin: null,
      tags_val_single: "",
      tags_val: [],
      qdms_inputV6: "",
      imgList: [],
      auditDescription: "",
      contentClassify: [],
      // 课程三级分类
      options2222:[
        {
          title: '领导力',
          value: '100',
          selectable:false,
          children: [
            {
              title: '领导业务',
              value: '1001',
            },
            {
              title: '领导团队',
              value: '1002',
            },
            {
              title: '领导自我',
              value: '1003',
            },
          ],
        },
        {
          title: '专业力',
          value: '200',
          selectable:false,
          children: [
            {
              title: '研发',
              value: '2001',
            },
            {
              title: '产品和解决方案',
              value: '2002',
            },
            {
              title: '生产技术与制造',
              value: '2003',
            },
            {
              title: '供应链',
              value: '2004',
            },
            {
              title: '营销',
              value: '2005',
            },
            {
              title: '品质',
              value: '2006',
            },
            {
              title: '战略与企划',
              value: '2007',
            },
            {
              title: '流程管理',
              value: '2008',
            },
            {
              title: '业绩管理',
              value: '2009',
            },
            {
              title: '项目管理',
              value: '20010',
            },
            {
              title: '信息技术',
              value: '20011',
            },
            {
              title: '环境与安全',
              value: '20012',
            },
            {
              title: '人力资源',
              value: '20013',
            },
            {
              title: '企业文化',
              value: '20014',
            },
            {
              title: '品牌',
              value: '20015',
            },
            {
              title: '财务',
              value: '20016',
            },
            {
              title: '法务',
              value: '20017',
            },
            {
              title: '行政',
              value: '20018',
            },
            {
              title: '医工',
              value: '20019',
            }
          ],
        },
        {
          title: '通用力',
          value: '300',
          selectable:false,
          children: [
            {
              title: '职业操守与道德',
              value: '3001',
            },
            {
              title: '职业素养与技能',
              value: '3002',
            },
            {
              title: '规章制度',
              value: '3003',
            },
          ], 
        }
      ],
    });

    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;
      }
    };
    const visibleClose = () => {
      state.ft_hs = false;
      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.feng_mian_1 = null;
      state.chang_jin = null;
      state.tags_val_single = "";
      state.tags_val = [];
      state.qdms_inputV6 = "";
      state.imgList = [];
      state.attach = "";
      state.auditDescription = "";

      // 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++;
        }
      }
      return count ? false : true;
    };

    //保存面授课
    const handlePush = (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 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,
        sceneId: 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.teacherId,
      ];
      if (!checkVal(checkList)) {
        message.destroy();
        return message.error("请输入必填项");
      } else {
        state.addLoading = true;
      }

      edit(postData).then((res) => {
        if (res.data.code === 200) {
          state.addLoading = false;

          state.statusTingQi = 1;
          if (param === "review") {
            //新建时点击审核按钮
            submitReview(res.data.data.offcourseId);
          } else {
            visibleClose();
          }
        }
      });
    };

    //编辑面授课渲染绑定
    const handleEditInfo = async (offcourseId) => {
      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 = String(item.categoryId);
      state.chang_jin = String(item.sceneId);
      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) {
          state.addLoading = false;
          visibleClose();
        }
      });
    };

    return {
      ...toRefs(state),
      moment,
      options2,
      options3,
      options4,
      optionsUrl,
      hideShow,
      visibleOpen,
      visibleClose,
      handleTagChange,
      handleTagClose,
      handlePush,
      reviewClick,
      noEditClose,
      editorRef,
      valueHtml,
      mode: "simple", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      choicePic
    };
  },
});
</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;
                  }
                }
              }

              .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: #388be1;
                          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: #388be1;
                        }
                      }
                    }
                  }

                  .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;
  }
}
</style>
