<template>
  <el-dialog v-model="visible" title="选择课件" width="90%" :on-close="fnClose">
    <el-row :gutter="24">
      <el-col :span="type === 'multiple' ? 16 : 24">
        <el-form
          :model="searchForm"
          label-width="100px"
          @submit.prevent="fnResetPagination"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="课程名称" prop="KEYWORDS">
                <el-input v-model="searchForm.KEYWORDS" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="10px">
                <el-button type="primary" native-type="submit">搜索</el-button>
                <el-button native-type="reset" @click="fnResetPagination">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <layout-table
          ref="tableRef"
          v-model:pagination="pagination"
          row-key="VIDEOCOURSEWARE_ID"
          :data="list"
          :row-class-name="fnRowClassName"
          @get-data="fnGetData"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="fnIsDisabled"
          >
            <template v-if="type === 'radio'" #default="{ row }">
              <el-radio
                v-model="data.radioValue"
                :label="row.VIDEOCOURSEWARE_ID"
                :disabled="fnIsDisabled(row)"
                @change="fnRadioChange(row)"
              >
                <span />
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="60">
            <template #default="{ $index }">
              {{ serialNumber(pagination, $index) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="COURSEWARENAME"
            label="课程名称"
            show-overflow-tooltip
          />
          <el-table-column prop="POSTTYPE_NAME" label="岗位" />
          <el-table-column prop="INDUSTRY_END_NAME" label="行业类型" />
          <el-table-column prop="TRAININGTYPE_NAME" label="课件类型" />
          <el-table-column prop="TEACHERNAME" label="讲师" width="150" />
          <el-table-column prop="CLASSHOUR" label="课件学时" width="100" />
          <el-table-column prop="RELATEDTERMNAME" label="相关词条">
            <template #default="{ row }">
              {{ row.VIDEOCOURSEWARE_ID }}
            </template>
          </el-table-column>
        </layout-table>
      </el-col>
      <el-col v-if="type === 'multiple'" :span="8">
        <div>
          <el-divider content-position="left">课程章节</el-divider>
          <div>
            <div>
              <el-button
                :type="data.CATALOGUELEVEL === '1' ? 'success' : 'primary'"
                @click="fnChangeCatLevel('1')"
              >
                一级目录样式
              </el-button>
              <el-button
                :type="data.CATALOGUELEVEL === '2' ? 'success' : 'primary'"
                @click="fnChangeCatLevel('2')"
              >
                二级目录样式
              </el-button>
            </div>
            <el-scrollbar
              ref="scroll"
              :wrap-style="[{ 'overflow-x': 'hidden' }]"
              style="height: 325px; margin-bottom: 10px"
            >
              <div class="course_directory mt-10">
                <div v-if="data.chapterList.length === 0">
                  暂无数据，请在左侧选择数据。
                </div>
                <div
                  v-for="(item, index) in data.chapterList"
                  :key="item.no"
                  class="course_item"
                >
                  <div class="course_row">
                    <div class="course_icon">
                      <el-icon
                        v-if="
                          item.nodes &&
                          item.nodes.length !== 0 &&
                          item.iconDirection === '1'
                        "
                      >
                        <caret-bottom />
                      </el-icon>
                    </div>
                    <div class="course_number">{{ index + 1 }}</div>
                    <div class="course_play">
                      <el-icon v-if="item.VIDEOCOURSEWARE_ID" size="18">
                        <video-camera />
                      </el-icon>
                    </div>
                    <div class="course_input">
                      <el-input
                        v-if="item.showNameInput"
                        id="firstInput"
                        v-model="item.NAME"
                        @blur="fnInputBlur(item, $event)"
                      />
                      <template v-else>{{ item.NAME }}</template>
                    </div>
                    <div>
                      <el-button
                        type="primary"
                        @click="fnDeleteChapter(index, item, 'first')"
                      >
                        删除
                      </el-button>
                    </div>
                    <div>
                      <el-button
                        type="primary"
                        :disabled="item.showNameInput"
                        @click="fnRename(item, 'firstInput')"
                      >
                        重命名
                      </el-button>
                    </div>
                    <div v-if="data.CATALOGUELEVEL === '2'">
                      <el-button
                        type="primary"
                        :disabled="item.showNameInput"
                        @click="fnSaveCourseware(index)"
                      >
                        保存课件到此章节下
                      </el-button>
                    </div>
                    <div v-if="item.VIDEOCOURSEWARE_ID">
                      <el-button
                        type="primary"
                        @click="fnPreview(item.VIDEOCOURSEWARE_ID, '')"
                      >
                        预览
                      </el-button>
                    </div>
                  </div>
                  <div
                    v-for="(item1, index1) in item.nodes"
                    :key="item1.no"
                    class="course_row ml-30"
                  >
                    <div class="course_icon" />
                    <div class="course_number">
                      {{ index + 1 }}-{{ index1 + 1 }}
                    </div>
                    <div class="course_play">
                      <el-icon v-if="item1.VIDEOCOURSEWARE_ID" size="18">
                        <video-camera />
                      </el-icon>
                    </div>
                    <div class="course_input">
                      <el-input
                        v-if="item1.showNameInput"
                        id="secondInput"
                        v-model="item1.NAME"
                        @blur="fnInputBlur(item1, $event)"
                      />
                      <template v-else>{{ item1.NAME }}</template>
                    </div>
                    <div>
                      <el-button
                        type="primary"
                        @click="fnDeleteChapter(index1, item, 'second')"
                      >
                        删除
                      </el-button>
                    </div>
                    <div>
                      <el-button
                        type="primary"
                        :disabled="item1.showNameInput"
                        @click="fnRename(item, 'secondInput')"
                      >
                        重命名
                      </el-button>
                    </div>
                    <div v-if="item1.VIDEOCOURSEWARE_ID">
                      <el-button
                        type="primary"
                        @click="fnPreview(item1.VIDEOCOURSEWARE_ID, '')"
                      >
                        预览
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
            <div style="margin-top: 5px">
              <el-button
                v-if="data.CATALOGUELEVEL === '1'"
                :disabled="data.addFirstChapterFlag"
                type="primary"
                @click="fnSaveCourseware('')"
              >
                保存课件到此章节下
              </el-button>
              <el-button
                v-if="data.CATALOGUELEVEL === '2'"
                :disabled="data.addFirstChapterFlag"
                type="primary"
                @click="fnAddFirstChapter"
              >
                新增一级项
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnConfirm">确定</el-button>
    </template>
  </el-dialog>
  <layout-video
    v-model:visible="data.videoDialog.visible"
    :src="data.videoDialog.src"
  />
</template>

<script setup>
import { useVModels } from "@vueuse/core";
import useListData from "@/assets/js/useListData.js";
import {
  getPreviewingVideo,
  getSelectCourseManagementList,
} from "@/request/training_resource_management.js";
import { serialNumber } from "@/assets/js/utils.js";
import { nextTick, reactive, watch } from "vue";
import { CaretBottom, VideoCamera } from "@element-plus/icons-vue";
import LayoutVideo from "@/components/video/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  chapterIds: {
    type: Array,
    required: true,
    default: () => [],
  },
  type: {
    type: String,
    required: true,
    default: "",
  },
  chapterList: {
    type: Array,
    required: true,
    default: () => [],
  },
  catalogueLevel: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "confirm"]);
const { visible } = useVModels(props, emits);
const { list, searchForm, pagination, fnGetData, tableRef, fnResetPagination } =
  useListData(getSelectCourseManagementList, {
    otherParams: {
      CANUSE: "1",
      STATE: "0",
      ISCOMPLETE: "1",
    },
    immediate: false,
  });
let currentValue = {};
const data = reactive({
  radioValue: "",
  CATALOGUELEVEL: "",
  chapterList: [],
  addFirstChapterFlag: false,
  chapterIds: [],
  videoDialog: {
    visible: false,
    src: "",
  },
});
watch(
  () => props.visible,
  () => {
    if (props.visible) {
      list.value = [
        {
          COURSEWAREINTRODUCE: "有秒差",
          OPERATTIME: "2024-02-27 14:16:03",
          TEACHERNAME: "张迪",
          VIDEOCOURSEWARE_ID: "ee87b97b7cd64508bf0228c30740c363",
          ISDELETE: 0,
          QUESTIONCOUNT: 0,
          VIDEOFILES: "d0523eabd53771ee80441777b3ce0102",
          POSTTYPE: "",
          STATE: "0",
          SPEAKER: "012af2449ff247e1bf8749a4f4db5b5a",
          CORPINFO_ID: "",
          TRAINTYPE: "",
          ISCOMPLETE: "1",
          COURSEWARENAME: "视频时长课件",
          CLASSHOUR: 0.3,
          VIDEOTIME: "785.05",
          OPERATOR: "admin",
          CREATOR: "admin",
          SOURCE: "1",
          LIMIT_TIME: "自建课件",
          VIDEOCAPTURE: "",
          INDUSTRY_ALL_NAME: "",
          CREATTIME: "2024-02-27 14:16:03",
        },
        {
          COURSEWAREINTRODUCE: "11",
          OPERATTIME: "2024-01-18 19:40:24",
          TEACHERNAME: "张迪",
          VIDEOCOURSEWARE_ID: "551a8869e9c0438b9c76532ee36fe3a7",
          ISDELETE: 0,
          QUESTIONCOUNT: 30,
          VIDEOFILES: "50646463b5f671ee9e0f16b5feac0102",
          POSTTYPE: "",
          STATE: "0",
          SPEAKER: "012af2449ff247e1bf8749a4f4db5b5a",
          CORPINFO_ID: "",
          TRAINTYPE: "",
          ISCOMPLETE: "1",
          COURSEWARENAME: "0118-1",
          CLASSHOUR: 0,
          VIDEOTIME: "40.536",
          OPERATOR: "admin",
          CREATOR: "admin",
          SOURCE: "1",
          LIMIT_TIME: "自建课件",
          VIDEOCAPTURE: "",
          INDUSTRY_ALL_NAME: "",
          CREATTIME: "2024-01-18 19:40:24",
        },
        {
          POSTTYPE_NAME: "三级教育培训",
          COURSEWAREINTRODUCE: "1111",
          TEACHERNAME: "张迪",
          ISDELETE: 0,
          QUESTIONCOUNT: 6,
          VIDEOFILES: "004e87faa93b71ee9f661777b3de0102",
          POSTTYPE: "d302da12d8724faaa24e5008adab8ce8",
          STATE: "0",
          SPEAKER: "012af2449ff247e1bf8749a4f4db5b5a",
          TRAININGTYPE_NAME: "全员培训",
          INDUSTRY_END_NAME: "道路运输业",
          CREATOR: "admin",
          LIMIT_TIME: "自建课件",
          INDUSTRY_ALL_NAME: "道路运输业",
          OPERATTIME: "2024-01-02 14:55:57",
          VIDEOCOURSEWARE_ID: "cd455a17ff164e369c4a0bd45f88a6e6",
          CORPINFO_ID: "",
          TRAINTYPE: "6128172b7a1144c98cc196044281f66c",
          ISCOMPLETE: "1",
          COURSEWARENAME: "51秒视频",
          CLASSHOUR: 0,
          VIDEOTIME: "51.714",
          OPERATOR: "admin",
          SOURCE: "1",
          VIDEOCAPTURE: "",
          CREATTIME: "2024-01-02 14:55:57",
        },
        {
          COURSEWAREINTRODUCE:
            "术语；产品分类；应急喷淋器；洗眼器；洗眼/洗脸器；复合式装置 ；补充装置；标识和说明\n",
          OPERATTIME: "2023-12-21 14:13:45",
          TEACHERNAME: "李娜",
          VIDEOCOURSEWARE_ID: "a6e69f682a7e409b890912c2dfaf028f",
          ISDELETE: 0,
          QUESTIONCOUNT: 15,
          VIDEOFILES: "c9b18910c7ca71ed87e734b6fdcb0102",
          STATE: "0",
          SPEAKER: "abc501710070444f8a6cca7f4682bcdc",
          CURRICULUM_ID_REMOTE: "cf9a1f623cd74a9682243ccd9c958275",
          ISCOMPLETE: "1",
          COURSEWARENAME: "眼面部防护 应急喷淋和洗眼设备 第1部分：技术要求",
          CLASSHOUR: 1,
          VIDEOTIME: "2615.89",
          OPERATOR: "联安众超管",
          CREATOR: "admin",
          SOURCE: "2",
          LIMIT_TIME: "2026-04-30",
          VIDEOCOURSEWARE_ID_REMOTE: "64e06f64e20b4ed1ab3b5a0dcdae3bb1",
          CREATTIME: "2023-04-18 09:08:07",
        },
        {
          COURSEWAREINTRODUCE: "包装装潢印刷；其他印刷品印刷；出版物印刷",
          OPERATTIME: "2023-12-21 10:41:55",
          TEACHERNAME: "侯彩侠",
          VIDEOCOURSEWARE_ID: "77d5ac0920c14f07a918e0923e68dced",
          ISDELETE: 0,
          QUESTIONCOUNT: 10,
          VIDEOFILES: "93a42690cfa771edab9316b5feac0102",
          STATE: "0",
          SPEAKER: "474f287cf08d491ba3bd53a81aec4eaa",
          CURRICULUM_ID_REMOTE: "8226ea7cdd9c4231be3a02a00815ef7a",
          ISCOMPLETE: "1",
          COURSEWARENAME: "包装装潢及其他印刷业车间级安全生产培训",
          CLASSHOUR: 1.2,
          VIDEOTIME: "3214.08",
          OPERATOR: "admin",
          CREATOR: "联安众超管",
          SOURCE: "2",
          LIMIT_TIME: "2026-04-30",
          VIDEOCOURSEWARE_ID_REMOTE: "7a5090ef80824568a57f6aedb4e71871",
          CREATTIME: "2023-05-23 08:15:09",
        },
        {
          POSTTYPE_NAME: "职业健康管理人员",
          COURSEWAREINTRODUCE: "123",
          TEACHERNAME: "马博",
          ISDELETE: 0,
          QUESTIONCOUNT: 0,
          VIDEOFILES: "33151180883f71ee828d34b6fdcb0102",
          POSTTYPE: "79042228778146d9bb7f0547b48a7b14",
          STATE: "0",
          SPEAKER: "08122e584d53442d8f57417a8bd129c7",
          TRAININGTYPE_NAME: "职业健康",
          INDUSTRY_END_NAME: "公路旅客运输",
          CREATOR: "admin",
          LIMIT_TIME: "自建课件",
          INDUSTRY_ALL_NAME: "道路运输业-公路旅客运输",
          OPERATTIME: "2023-11-21 15:25:52",
          VIDEOCOURSEWARE_ID: "38d87d7908d945418e89e27ec77c28ad",
          CORPINFO_ID: "",
          TRAINTYPE: "c70bf859512241579a8a30fc5d1ae153",
          ISCOMPLETE: "1",
          COURSEWARENAME: "测试视频（此视频无法播放）",
          CLASSHOUR: 0,
          VIDEOTIME: "5.033",
          OPERATOR: "admin",
          SOURCE: "1",
          VIDEOCAPTURE: "",
          CREATTIME: "2023-11-21 15:25:52",
        },
        {
          COURSEWAREINTRODUCE:
            "51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件",
          OPERATTIME: "2023-10-17 16:58:51",
          TEACHERNAME: "张迪",
          VIDEOCOURSEWARE_ID: "2f8ae0ce434541848a571e5ecc0a44f8",
          ISDELETE: 0,
          QUESTIONCOUNT: 0,
          VIDEOFILES: "63eef6706ccb71eebfd10666a2ec0102",
          POSTTYPE: "",
          STATE: "0",
          SPEAKER: "012af2449ff247e1bf8749a4f4db5b5a",
          CORPINFO_ID: "",
          TRAINTYPE: "",
          ISCOMPLETE: "1",
          COURSEWARENAME:
            "51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件51秒课件",
          CLASSHOUR: 0,
          VIDEOTIME: "51.714",
          OPERATOR: "admin",
          CREATOR: "admin",
          SOURCE: "1",
          LIMIT_TIME: "自建课件",
          VIDEOCAPTURE: "",
          INDUSTRY_ALL_NAME: "",
          CREATTIME: "2023-10-17 16:58:51",
        },
        {
          POSTTYPE_NAME: "三级教育培训",
          COURSEWAREINTRODUCE: "1分30秒视频测试",
          TEACHERNAME: "刘敬英",
          ISDELETE: 0,
          QUESTIONCOUNT: 0,
          VIDEOFILES: "aa2664b0670e71ee825d1777b3ce0102",
          POSTTYPE: "d302da12d8724faaa24e5008adab8ce8",
          STATE: "0",
          SPEAKER: "01ea51f0b07a402b8a7785111bc79be7",
          TRAININGTYPE_NAME: "全员培训",
          INDUSTRY_END_NAME: "道路运输业",
          CREATOR: "admin",
          LIMIT_TIME: "自建课件",
          INDUSTRY_ALL_NAME: "道路运输业",
          OPERATTIME: "2023-10-17 15:24:36",
          VIDEOCOURSEWARE_ID: "19f3f065b67e4242906155a3eafc86ef",
          CORPINFO_ID: "",
          TRAINTYPE: "6128172b7a1144c98cc196044281f66c",
          ISCOMPLETE: "1",
          COURSEWARENAME: "1分30秒视频测试",
          CLASSHOUR: 0,
          VIDEOTIME: "88.542",
          OPERATOR: "admin",
          SOURCE: "1",
          VIDEOCAPTURE: "",
          CREATTIME: "2023-10-10 09:45:20",
        },
        {
          COURSEWAREINTRODUCE: "30秒视频",
          OPERATTIME: "2023-10-10 09:47:34",
          TEACHERNAME: "高静",
          VIDEOCOURSEWARE_ID: "5ec4aeec7178426caaac1cd5c4165858",
          ISDELETE: 0,
          QUESTIONCOUNT: 0,
          VIDEOFILES: "fa09e6a0670e71eebc35752281fd0102",
          POSTTYPE: "",
          STATE: "0",
          SPEAKER: "0a2324c8ffe74152b7ed2bbdb5c35dda",
          CORPINFO_ID: "",
          TRAINTYPE: "",
          ISCOMPLETE: "1",
          COURSEWARENAME: "30秒视频",
          CLASSHOUR: 0,
          VIDEOTIME: "31.0",
          OPERATOR: "admin",
          CREATOR: "admin",
          SOURCE: "1",
          LIMIT_TIME: "自建课件",
          VIDEOCAPTURE: "",
          INDUSTRY_ALL_NAME: "",
          CREATTIME: "2023-10-10 09:47:34",
        },
        {
          COURSEWAREINTRODUCE: "1分钟视频",
          TEACHERNAME: "张迪",
          ISDELETE: 0,
          QUESTIONCOUNT: 0,
          VIDEOFILES: "0513fe70664f71ee834c1776b3ce0102",
          POSTTYPE: "",
          STATE: "0",
          SPEAKER: "012af2449ff247e1bf8749a4f4db5b5a",
          TRAININGTYPE_NAME: "全员培训",
          INDUSTRY_END_NAME: "选矿厂",
          CREATOR: "admin",
          LIMIT_TIME: "自建课件",
          INDUSTRY_ALL_NAME: "高危行业-金属非金属矿山-选矿厂",
          OPERATTIME: "2023-10-09 10:53:28",
          VIDEOCOURSEWARE_ID: "5c097d1b383042728eb99fb6e5c982d3",
          CORPINFO_ID: "",
          TRAINTYPE: "6128172b7a1144c98cc196044281f66c",
          ISCOMPLETE: "1",
          COURSEWARENAME: "1分钟课件",
          CLASSHOUR: 0,
          VIDEOTIME: "54.547",
          OPERATOR: "admin",
          SOURCE: "1",
          VIDEOCAPTURE: "",
          CREATTIME: "2023-10-09 10:53:28",
        },
      ];
      data.CATALOGUELEVEL = props.catalogueLevel;
      data.chapterList = [...props.chapterList];
      data.chapterIds = [...props.chapterIds];
    }
  }
);
const fnRadioChange = (row) => {
  currentValue = row;
};
const fnRowClassName = ({ row }) => {
  return data.chapterIds.some((item) => item === row.VIDEOCOURSEWARE_ID)
    ? "text-red"
    : "";
};
const fnIsDisabled = (row) => {
  if (props.type === "radio")
    return data.chapterIds.some((item) => item === row.VIDEOCOURSEWARE_ID);
  else return !data.chapterIds.some((item) => item === row.VIDEOCOURSEWARE_ID);
};
const fnPreview = async (VIDEOCOURSEWARE_ID, VIDEOFILES) => {
  const resData = await getPreviewingVideo({
    VIDEOCOURSEWARE_ID,
    VIDEOFILES,
  });
  data.videoDialog.src = JSON.stringify(resData.urlList);
  data.videoDialog.visible = true;
};
const fnChangeCatLevel = async (level) => {
  if (data.CATALOGUELEVEL === level) return;
  if (data.chapterList.length > 0) {
    await ElMessageBox.confirm("切换目录样式后，将清空目录内容，是否继续？", {
      type: "warning",
    });
  }
  data.addFirstChapterFlag = false;
  data.CATALOGUELEVEL = level;
  data.chapterList = [];
  data.chapterIds = [];
};
const fnInputBlur = (item, event) => {
  if (item.NAME) {
    data.addFirstChapterFlag = false;
    item.showNameInput = false;
  } else {
    ElMessage.warning("请输入名称");
    event.target.focus();
  }
};
const fnRename = async (item, element) => {
  item.showNameInput = true;
  await nextTick();
  document.getElementById(element).focus();
};
const fnDeleteChapter = async (index, item, whichNumber) => {
  await ElMessageBox.confirm(
    whichNumber === "first"
      ? "你确定删除该一级项及下面所有二级项内容？"
      : "你确定删除该二级项及关联的所有课件和试卷？",
    {
      type: "warning",
    }
  );
  if (whichNumber === "first") {
    data.chapterList.splice(index, 1);
  } else {
    item.nodes.splice(index, 1);
  }
  data.addFirstChapterFlag = false;
};
const fnAddFirstChapter = () => {
  const firstChapter = {
    VIDEOCOURSEWARE_ID: "",
    NAME: "",
    showNameInput: true,
    SORT: data.chapterList.length + 1,
    iconDirection: "1",
    nodes: [],
    no: Math.random(),
  };
  data.addFirstChapterFlag = true;
  data.chapterList.push(firstChapter);
};
const fnSaveCourseware = (index) => {
  const selectionData = tableRef.value.getSelectionRows();
  if (selectionData.length === 0) {
    ElMessage.warning("请选择要添加的课件");
    return;
  }
  for (let i = 0; i < selectionData.length; i++) {
    selectionData[i].NAME = selectionData[i].COURSEWARENAME;
    data.chapterIds.push(selectionData[i].VIDEOCOURSEWARE_ID);
  }
  if (data.CATALOGUELEVEL === "1") {
    data.chapterList = [...data.chapterList, ...selectionData];
  } else {
    data.chapterList[index].nodes = [
      ...data.chapterList[index].nodes,
      ...selectionData,
    ];
  }
  ElMessage.success("添加成功");
  tableRef.value.clearSelection();
};
const fnClose = () => {
  data.radioValue = "";
  data.CATALOGUELEVEL = "";
  data.chapterList = [];
  data.addFirstChapterFlag = false;
  data.chapterIds = [];
  currentValue = {};
  searchForm.value.KEYWORDS = "";
  visible.value = false;
  tableRef.value.clearSelection();
};
const fnConfirm = debounce(
  1000,
  () => {
    const value = props.type === "radio" ? currentValue : data.chapterList;
    emits("confirm", value);
    fnClose();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss">
.course_directory {
  .course_item {
    .course_row {
      display: flex;
      align-items: center;
      padding: 3px 10px;
      margin-bottom: 10px;

      &:hover {
        background-color: var(--el-fill-color-light);
        cursor: pointer;
      }

      div + div {
        margin-left: 10px;
      }

      .course_icon {
        color: #c0c4cc;
        font-size: 12px;
        width: 12px;
        height: 14px;
        display: block;
      }

      .course_play {
        color: #fff;
        font-size: 16px;
        width: 16px;
        height: 15px;
        display: block;
      }

      .course_number {
        width: 100px;
        background-color: #0d5aa3;
        font-size: 13px;
        text-align: center;
        padding: 4px 5px;
        border-radius: 4px;
      }

      .course_input {
        width: 300px;
        font-size: 13px;
      }
    }
  }
}
</style>
