pbl-teacher-table/src/components/pages/synergyCourse/course.vue

<template>
  <div style="width: 100%;height: 100vh;">
    <div v-if="!futureClassurl" class="pb_content" style="height: auto; width: 94%; margin: 10px auto;background: unset;box-sizing: border-box;" :class="[gotype ? 'liyuan' :'']" >
        <backPage style="padding: 40px 0 0;" v-if="gotype" tit="协同建构"></backPage>
      
        <div style="width:100%;padding:0 21px;background:#fff;border-radius: 5px;box-sizing: border-box;">
          <div class="pb_head top">
            <div style="
                display: flex;
                align-items: center;
            ">
              <span>协同建构</span>
            </div>
            <div class="student_button">
              <button class="r_pub_button_course" @mouseenter="btnDisplay = true" @mouseleave="btnDisplay = false">
                <span>创建协同建构</span>
                <div v-show="btnDisplay" class="buttonBox">
                  <div type="primary" @click="goToCourse3()">标准创建</div>
                  <div type="primary" @click="goToCourseSimple()">快速创建</div>
                </div>
              </button>
            </div>
          </div>
          <div class="reBox">
            <div class="reTop">
              <!-- <div>分类筛选</div> -->
              <div class="reTopCh">
                <el-select v-model="groupA" @change="search" v-if="false">
                  <el-option value="4" label="全部"></el-option>
                  <el-option value="2" label="我的课程"></el-option>
                  <el-option value="3" label="协同课程"></el-option>
                  <el-option value="1" label="他人课程"></el-option>
                </el-select>
                <el-select v-model="groupA" @change="search" v-if="false">
                  <el-option value="0" label="全部"></el-option>
                  <el-option value="2" label="我的课程"></el-option>
                  <el-option value="3" label="协同课程"></el-option>
                </el-select>
                <div class="searchI" style="margin: 0;">
                  <div class="search">
                    <img src="../../../assets/icon/search.png" alt="" />
                  </div>
                  <input class="sInput" type="text" placeholder="请输入关键字" v-model="courseName" @change="getCourse()" @input="getCourse()" />
                </div>
                <el-button type="primary" class="bgColor" style="margin-left: 10px;" @click="reset">重置</el-button>
              </div>
            </div>
            <div class="pType_box all_choose" v-if="oid == '69893dca-1d47-11ed-8c78-005056b86db5'">
              <span><span>类型</span></span>
              <el-radio-group v-model="pTypeCheckName" style="display: flex; align-items: center">
                <div class="all_choose" style="width: 100px" v-for="(item, index) in CourseType2" :key="index">
                  <el-radio :label="item.name" @click.native.prevent="CourseType2Click(item.name)">{{ item.name }}</el-radio>
                </div>
              </el-radio-group>
            </div>
            <div class="choose">
              <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
                :style="{ margin: !CourseTypeJson[item.id].length && 0 }">
                <span v-if="CourseTypeJson[item.id].length &&
                  (oid == '69893dca-1d47-11ed-8c78-005056b86db5'
                    ? pTypeCheck.indexOf(item.id) != -1
                    : true)
                  "><span>{{ item.name }}</span></span>
                <div class="typeCss" v-if="CourseTypeJson[item.id].length &&
                  (oid == '69893dca-1d47-11ed-8c78-005056b86db5'
                    ? pTypeCheck.indexOf(item.id) != -1
                    : true)
                  ">
                  <div class="cName" @click="getCourse2(item.name, '', item.id, 1)"
                    :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''">
                    全部
                  </div>
                  <div v-for="(item1, index1) in CourseTypeJson[item.id]" :key="index + '-' + index1" :label="item1.id"
                    @click="getCourse2(item.name, item.id, item1.id, 2)">
                    <div class="cName" :class="typea == item1.id || typeb == item1.id || typed == item1.id
                      ? 'isCType'
                      : ''
                      ">
                      {{ item1.name }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="all_choose" v-if="false">
                <span><span>所有者</span></span>
                <div class="typeCss">
                  <div class="cName" :class="groupA == '4' ? 'isCType' : ''" @click="groupA = '4'; search();">
                    全部
                  </div>
                  <div class="cName" :class="groupA == '2' ? 'isCType' : ''" @click="groupA = '2'; search();">
                    我的课程
                  </div>
                  <div class="cName" :class="groupA == '3' ? 'isCType' : ''" @click="groupA = '3'; search();">
                    协同课程
                  </div>
                  <div class="cName" :class="groupA == '1' ? 'isCType' : ''" @click="groupA = '1'; search();">
                    他人课程
                  </div>
                </div>
              </div>
              <div class="all_choose" v-if="false">
                <span><span>所有者</span></span>
                <div class="typeCss">
                  <div class="cName" :class="groupA == '0' ? 'isCType' : ''" @click="groupA = '0'; search();">
                    全部
                  </div>
                  <div class="cName" :class="groupA == '2' ? 'isCType' : ''" @click="groupA = '2'; search();">
                    我的课程
                  </div>
                  <div class="cName" :class="groupA == '3' ? 'isCType' : ''" @click="groupA = '3'; search();">
                    协同课程
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="pb_content_body" style="height: 100%;width: 100%;background: #e6eaf0;margin: 0 auto;">
          <div class="student_head" v-if="false">
            <div class="choose">
              <div class="student_search">
                <span>课程筛选</span>
                <el-select v-model="groupA" @change="search">
                  <el-option value="0" label="我的课程"></el-option>
                  <el-option value="1" label="他人课程"></el-option>
                </el-select>
              </div>
              <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index">
                <span v-if="CourseTypeJson[item.id].length">{{ item.name }}</span>
                <el-select v-if="CourseTypeJson[item.id].length" v-model="courseTypeId[item.id]" placeholder="请选择"
                  @change="getTypeName">
                  <el-option label="全部" value="1">全部</el-option>
                  <el-option v-for="item1 in CourseTypeJson[item.id]" :key="item1.id" :label="item1.name" :value="item1.id">
                  </el-option>
                </el-select>
              </div>
              <div @click="clear" class="clear">重置</div>
            </div>

            <div class="student_right">
              <div class="head_left">
                <el-input v-model="courseName" class="student_input" placeholder="请输入课程名称"></el-input>
                <el-button class="course_button" @click="searchCourse">查询</el-button>
              </div>
            </div>
          </div>
          <div class="student_table">
            <div class="course_box">
              <div class="out_box" v-for="(item, index) in course" :key="index">
                <div class="myCourse" v-if="item.userid == userid">我的创建</div>
                <div class="myCourse" style="background: #4187f0" v-else-if="!item.course_teacher ||
                  (item.course_teacher &&
                    item.course_teacher.indexOf(userid) == -1)
                  ">
                  他人创建
                </div>
                <div class="xtCourse" v-else>协同建构</div>
                <div class="tup" @click="open(item.courseId, item.userid)" style="cursor: pointer;">
                  <img :src="item.cover != null && item.cover != ''
                    ? JSON.parse(item.cover).length > 0
                      ? JSON.parse(item.cover)[0].url
                      : mr
                    : mr
                    " alt />
                </div>
                <div class="bottom_box">
                  <div>
                    <el-tooltip :content="item.title" popper-class="text_tooltip" placement="top" effect="dark">
                      <span>{{ item.title }}</span>
                    </el-tooltip>
                    <!-- <span>{{ item.state == 1 ? '阶段模式' : item.state == 2 ? '任务模式' : '极简模式' }}</span> -->
                  </div>
                  <!-- <div class="kc_t">
                    负责老师：{{ item.uname }}
                  </div> -->
                  <div class="kc_time">
                    <!-- <span style="color: #717C8D">创建日期:</span> -->
                    {{ item.time }}
                  </div>
                  <!-- <div class="kc_time">
                    <span style="color: #717C8D">修改日期:</span>{{ item.utime }}
                  </div> -->
                </div>
                <div class="three_bottom">
                  <!-- v-if="role == '1'" @click="get(item)"-->
                  <div @click="open(item.courseId, item.userid)">打开</div>
                  <!-- <div @click="jump(item.courseId)" v-else>评课</div> -->
                  <!-- <div v-if="((item.userid == userid) ||
                    (item.course_teacher &&
                      item.course_teacher.indexOf(userid) !== -1) || role == '1') &&
                    item.state == 1
                    " @click="goToCourse(item.courseId)">
                    修改
                  </div>
                  <div v-if="((item.userid == userid) ||
                    (item.course_teacher &&
                      item.course_teacher.indexOf(userid) !== -1) || role == '1') &&
                    item.state == 2
                    " @click="goToCourse2(item.courseId)">
                    修改
                  </div> -->
                  <!-- ||
                    (item.course_teacher &&
                      item.course_teacher.indexOf(userid) !== -1) || role == '1' -->
                  <div v-if="((item.userid == userid)) &&
                    item.state == 1
                    " @click="goToCourse3(item.courseId)">
                    修改
                  </div>
                  <!-- <div v-if="groupA == '0'" @click="
                    goTo(
                      '/works?cid=' +
                      item.courseId +
                      '&userid=' +
                      userid +
                      '&oid=' +
                      oid +
                      '&org=' +
                      org +
                      '&role=' +
                      role
                    )
                    ">
                    评价
                  </div> -->
                  <div v-if="((item.userid == userid))" @click="copyCourse(item.courseId)">
                    复制
                  </div>
                  <!-- v-if="item.isCourseType == 1 || role == '1'" -->
                  <div v-if="((item.userid == userid))" @click="deleteCourse(item.courseId)">
                    删除
                  </div>
                  <!-- <div class="more">
                    <span style="font-size: 18px; font-weight: 700">...</span>
                    <div>
                      <span @click="copyCourse(item.courseId)">复制</span>
                      <span @click="jump(item.courseId)" v-if="role == '1'">评课</span>
                      <span @click="get(item.courseId)" v-else>预览</span>
                      <span @click="getNT(item.courseId)">无终端</span>
                    </div>
                  </div> -->
                </div>
              </div>
              <div class="course_empty" v-if="course.length == 0">暂无数据</div>
            </div>
          </div>
        </div>
        <div class="student_page">
          <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
            v-if="page && course.length" style="padding-bottom: 20px" @current-change="handleCurrentChange"></el-pagination>
        </div>

      

      <el-dialog :visible.sync="dialogVisible1" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <el-dialog title="查看协同课程" :visible.sync="dialogVisibleCourse" :append-to-body="true" width="850px"
        :before-close="handleClose" class="dialog_diy">
        <div class="ct_box">
          <div class="out_box" v-for="(item, index) in courseTeam" :key="index" style="margin-left: 15px">
            <div class="tup">
              <img :src="item.cover != null && item.cover != ''
                ? JSON.parse(item.cover).length > 0
                  ? JSON.parse(item.cover)[0].url
                  : mr
                : mr
                " alt />
            </div>
            <div class="bottom_box">
              <div>{{ item.title }}</div>
              <div class="kc_t">创建老师：{{ item.uname }}</div>
              <div class="kc_time">{{ item.time }}</div>
            </div>
            <div class="three_bottom">
              <div @click="jump(item.courseId)">查看内容</div>
              <div @click="
                goTo(
                  '/course/addCourse?cid=' +
                  item.courseId +
                  '&userid=' +
                  userid +
                  '&oid=' +
                  oid +
                  '&org=' +
                  org
                )
                ">
                编辑
              </div>
            </div>
          </div>
          <div class="course_empty" v-if="courseTeam.length == 0">暂无数据</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleCourse = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="confra" v-else>
      <divc class="clobtn">
        <span @click="futureClassurl = ''">关闭</span>
      </divc>
      <iframe
        allow="camera *; microphone *;display-capture;midi;encrypted-media;fullscreen *;"
        webkitallowfullscreen=''
        mozallowfullscreen=''
        allowfullscreen=''
        frameborder="no"
        scrolling="no"
        style="border: 0; width: 100%;flex: 1;"
        :src="futureClassurl"
      >
      </iframe>
    </div>
  </div>
  
</template>

<script>
import "../../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../../components/tools/wangEnduit";
// import CourseProblem from "./components/courseProblem";
import { myMixin } from "@/mixins/mixin.js"
import backPage from "../liyuan/components/backPage.vue";

export default {
  mixins: [ myMixin ],

  components: { EditorBar,backPage },
  data() {
    return {
      gotype:(window.topU && window.topU.gotype) ?  window.topU.gotype : '',
      futureClassurl:'', 

      itemCount: 1,
      courseTitle: "",
      courseText: "",
      courseTime: "",
      isLoading: false,
      fileList: [],
      fileList1: [],
      homeworkList: [{ name: "" }],
      formLabelWidth: "100px",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisibleCourse: false,
      dialogImageUrl: "",
      group: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      Juri: "",
      groupList: [],
      JuriList: [],
      page: 1,
      total: 0,
      pageSize: 20,
      tableData: [],
      now: "",
      courseDetail: {},
      addCourse: {},
      groupA: "0",
      classX: "",
      course: [],
      courseName: "",
      mr: require("../../../assets/icon/kc1.png"),
      CourseType: [],
      CourseType2: [],
      CourseTypeJson: {},
      courseTypeId: {},
      courseTypeSon: [],
      isChoose: 0,
      problemCourse: null, //查看提问的课程
      courseTeam: [],
      typeE: [],
      typea: "",
      typeb: "",
      typed: "",
      pTypeCheck: [],
      pTypeCheckName: [],
      btnDisplay: false
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    addHomeworkBox() {
      this.homeworkList.push({ name: "" });
      this.itemCount++;
    },
    reduceHomeworkBox() {
      var a = this.homeworkList;
      a.splice(a.length - 1);
      this.itemCount--;
    },
    goTo(path) {
      this.$router.push(path);
    },
    CourseType2Change(val) {
      this.pTypeCheck = [];
      for (var i = 0; i < this.CourseType2.length; i++) {
        let typeA = this.CourseType2[i];
        if (val.indexOf(typeA.name) != -1) {
          this.pTypeCheck.push(...typeA.id);
        }
      }
      this.typea = "";
      this.typeb = "";
      this.typed = "";
      this.getCourse();
    },
    CourseType2Click(val) {
      this.pTypeCheck = [];
      this.typeE = [];
      if (val === this.pTypeCheckName) {
        this.pTypeCheckName = "";
      } else {
        this.pTypeCheckName = val;
        for (var i = 0; i < this.CourseType2.length; i++) {
          let typeA = this.CourseType2[i];
          if (val.indexOf(typeA.name) != -1) {
            this.pTypeCheck.push(...typeA.id);
            this.typeE = [...typeA.id];
          }
        }
      }

      this.typea = "";
      this.typeb = "";
      this.typed = "";
      this.getCourse();
    },
    goToCourse(courseId) {
      if (courseId) {
        this.$router.push(
          "/course/addCourse?cid=" +
          courseId +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      } else {
        this.$router.push(
          "/course/addCourse?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      }
      // this.$router.push(path);
    },
    reset() {
      this.typeE = []
      this.typea = ''
      this.typeb = ''
      this.typed = ''
      this.courseName = ''
      if (this.role == "1") {
        this.groupA = "4";
      } else {
        this.groupA = "0";
      }
      this.getCourse();
    },
    goToCourse2(courseId) {
      if (courseId) {
        this.$router.push(
          "/course/addCourseT?cid=" +
          courseId +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      } else {
        this.$router.push(
          "/course/addCourseT?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      }
    },
    goToCourse3(courseId) {

      if (courseId) {
        this.$router.push(
          "/synergyCourse/add?cid=" +
          courseId +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      } else {
        this.$router.push(
          "/synergyCourse/add?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
        this.addOp3('1', "", { type: "CocoNote_standard_add" }, "success")
      }
    },
    formatDateTime2(timestamp){
      const date = new Date(timestamp); // 根据时间戳创建Date对象
      const year = date.getFullYear(); // 获取年份
      const month = date.getMonth() + 1; // 获取月份，需要加1
      const day = date.getDate(); // 获取日期
      const formattedDate = `${year}-${this.handlerZero(month)}-${this.handlerZero(day)}`; // 拼接成格式化后的日期字符串
      return formattedDate;
    },
    handlerZero(param){
      return param= param<10?('0'+param):param
    },
    goToCourseSimple(){

      let params = [
        {
          uid: this.userid,
          title:  window.topU.US.userInfo.username+this.formatDateTime2(new Date().getTime())+"的快速创建",
          //title: "黄明浩"+this.formatDateTime2(new Date().getTime())+"的快速创建",
          brief: "",
          cover:
          JSON.stringify([
                {
                  name: "noBanner.jpg",
                  url: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/wu1676621845022.png",
                  uid: 1656409780264,
                  status: "success",
                },
              ]),
          evaId: "",
          astudent:"",
          see: 1,
          chapters: JSON.stringify([{"dyName":"","chapterInfo":[{"isread":false,"chapterid":"468faf7e-ff3e-c2bf-2829-a78fd5fea04e","title":"","courseName":"","taskJson":[{"task":"","taskDetail":"","chapterData":[],"toolChoose":[{"tool":[],"toolDetail":"","toolType":0,"askCount":1,"askTitle":"","askJson":[{"askstitle":"","askItem":1,"checkList":[]}]}],"toolText":"","isShowTools":false,"askCount":1,"isFold":0,"askTitle":"","askJson":[{"askstitle":"","askItem":1,"checkList":[]}],"checkJson":[{"checkCount":[],"checkPerent":[]}],"homeworkList":[],"proVisible":false,"proVisible2":false}],"itemCount":1,"fileList1":[],"video":[],"testData":[],"pData":[],"templateArray":[]}]}]),
          template:  "" ,
          courseType: JSON.stringify(this.courseTypeId),
          ateacher:"",
          inviteCode: "[]",
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addSynergyCourse", params)
        .then((res) => {
          console.log(res);
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.getCourse();
          this.open(res.data.courseId, this.userid)
          this.addOp3('1', "", { type: "CocoNote_fast_add" }, "success")

        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
          this.addOp3('1', "", { type: "CocoNote_fast_add" }, err)
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    open(cid, uid) {

      if (uid == this.userid ||  window.topU.US.userInfo.role==1) {
        if (this.gotype) {
            this.futureClassurl = `https://cscl.cocorobo.cn?cid=${cid}&gid=` 
        }else{
          window.topU.postMessage(
            {
              tools: "opencCscl",
              cid: cid,
              gid: '',
            },
            "*"
          );
        }
         
        this.addOp3('1', "", { courseid: cid , type: "CocoNote_open" }, "success")
        return;
      }
      let params = {
        cid: cid,
        classid: '1',
      };
      this.ajax
        .get(this.$store.state.api + "getCourseGroup", params)
        .then((res) => {
          if (res.data && res.data[1].length) {
            let groupPerson = res.data[1]
            let groupCid = ''
            for (var i = 0; i < groupPerson.length; i++) {
              if (groupPerson[i].userid == this.userid) {
                groupCid = groupPerson[i].groupCid
                break;
              }
            }
            if (groupCid) {
              if (this.gotype) {
                  this.futureClassurl = `https://cscl.cocorobo.cn?cid=${cid}&gid=${groupCid}` 
              }else{
                window.topU.postMessage(
                  {
                    tools: "opencCscl",
                    cid: cid,
                    gid: groupCid,
                  },
                  "*"
                );
              }
               
              this.addOp3('1', "", { courseid: cid , type: "CocoNote_open" }, "success")
            } else {
              this.$message.error("没有加入分组请先加入分组");
              this.goToCourse3(cid)
              this.addOp3('1', "", { courseid: cid , type: "CocoNote_open" }, '没有加入分组请先加入分组')

              //  window.topU.postMessage(
              //   { 
              //     tools: "opencCscl",
              //     cid: cid,
              //     gid: '',
              //   }, 
              //   "*"
              // );
            }
          } else {
            this.$message.error("没有加入分组请先加入分组");
            this.goToCourse3(cid)
            this.addOp3('1', "", { courseid: cid , type: "CocoNote_open" }, '没有加入分组请先加入分组')

            //  window.topU.postMessage(
            //   { 
            //     tools: "opencCscl",
            //     cid: cid,
            //     gid: '',
            //   }, 
            //   "*"
            // );
          }
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
          this.addOp3('1', "", { courseid: cid , type: "CocoNote_open" }, err)

        });
    },
    jump(cid) {
      // window.open(
      //   "//pbl.cocorobo.cn/pbl-student-table/dist/#/courseDetail?courseId=" +
      //     cid +
      //     "&userid=" +
      //     this.userid
      // );
       window.topU.postMessage({ cid: cid, screenType: "2" }, "*");
    },
    get(item) {
       window.topU.postMessage({ cid: item.courseId, screenType: "3" }, "*");
    },
    getNT(cid) {
       window.topU.postMessage({ cid: cid, screenType: "3NT" }, "*");
    },
    handle_remove(file, fileList) {
      var _tmp = this.fileList;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.fileList = _tmp;
      }
    },
    handle_remove1(file, fileList) {
      var _tmp = this.fileList1;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.fileList1 = _tmp;
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getCourse();
    },
    init() { },
    handleClose(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    onExceed() {
      this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
    },
    //uuid生成
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    searchCourse() {
      this.page = 1;
      this.getCourse();
    },
    clear() {
      for (var i = 0; i < this.CourseType[0].length; i++) {
        this.courseTypeId[this.CourseType[0][i].id] = "";
      }
      this.getCourse();
    },
    getCourse2(typeName, ftypeId, typeid, type) {
      this.page = 1;
      if (typeid == "34628934-d02f-11ec-8c78-005056b86db5" || ftypeId == '34628934-d02f-11ec-8c78-005056b86db5' || typeid == "34628934-d02f-11ec-8c78-005056b86ac5" || ftypeId == "34628934-d02f-11ec-8c78-005056b86ac5") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              return;
            } else {
              this.typeE.splice(this.typeE.indexOf(typeid), 1);
            }
          } else {
            this.typeE.push(typeid);
            if (this.typea != "") {
              this.typea = "";
            }
          }
        } else {
          if (this.typea == typeid) {
            this.typea = "";
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              this.typeE.push(ftypeId);
            }
          } else {
            this.typea = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "专栏") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              return;
            } else {
              this.typeE.splice(this.typeE.indexOf(typeid), 1);
            }
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              this.typeE.push(ftypeId);
            }
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "栏目") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              return;
            } else {
              this.typeE.splice(this.typeE.indexOf(typeid), 1);
            }
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              this.typeE.push(ftypeId);
            }
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeid == "34629bcc-d02f-11ec-8c78-005056b86db5" || ftypeId == '34629bcc-d02f-11ec-8c78-005056b86db5') {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              return;
            } else {
              this.typeE.splice(this.typeE.indexOf(typeid), 1);
            }
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              this.typeE.push(ftypeId);
            }
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeName == "学院") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              return;
            } else {
              this.typeE.splice(this.typeE.indexOf(typeid), 1);
            }
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              this.typeE.push(ftypeId);
            }
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      } else if (typeid == "34629907-d02f-11ec-8c78-005056b86db5" || ftypeId == '34629907-d02f-11ec-8c78-005056b86db5' || typeid == "34629907-d02f-11ec-8c78-005056b86ac5" || ftypeId == "34629907-d02f-11ec-8c78-005056b86ac5") {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              return;
            } else {
              this.typeE.splice(this.typeE.indexOf(typeid), 1);
            }
          } else {
            this.typeE.push(typeid);
            if (this.typed != "") {
              this.typed = "";
            }
          }
        } else {
          if (this.typed == typeid) {
            this.typed = "";
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              this.typeE.push(ftypeId);
            }
          } else {
            this.typed = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      }
      // this.loading = true;
      this.getCourse();
    },
    getCourse() {
      if (!this.loading) {
        this.loading = this.openLoading(
          document.querySelector(".student_table")
        );
      }
      // var typeE = [];
      // var typea, typeb, typec, typed;
      // if (this.isChoose == 1) {
      //   for (var i = 0; i < this.CourseType[0].length; i++) {
      //     if (this.courseTypeId[this.CourseType[0][i].id] == "1") {
      //       typeE.push(this.CourseType[0][i].id);
      //     } else if (this.courseTypeId[this.CourseType[0][i].id] != "") {
      //       if (this.CourseType[0][i].name == "年级") {
      //         typea = this.courseTypeId[this.CourseType[0][i].id];
      //       } else if (this.CourseType[0][i].name == "专栏") {
      //         typeb = this.courseTypeId[this.CourseType[0][i].id];
      //       } else if (this.CourseType[0][i].name == "栏目") {
      //         typeb = this.courseTypeId[this.CourseType[0][i].id];
      //       } else if (this.CourseType[0][i].name == "学院") {
      //         typeb = this.courseTypeId[this.CourseType[0][i].id];
      //       } else if (this.CourseType[0][i].name == "主题") {
      //         typeb = this.courseTypeId[this.CourseType[0][i].id];
      //       } else if (this.CourseType[0][i].name == "新技能") {
      //         typec = this.courseTypeId[this.CourseType[0][i].id];
      //       } else if (this.CourseType[0][i].name == "学科") {
      //         typed = this.courseTypeId[this.CourseType[0][i].id];
      //       }
      //       this.courseTypeSon.push(
      //         this.courseTypeId[this.CourseType[0][i].id]
      //       );
      //     }
      //   }
      // }
      //console.log("typea", this.typea);
      this.isLoading = true;
      let params = {
        type: this.groupA,
        uid: this.userid,
        oid: this.oid,
        org: this.org,
        typea: this.typea != undefined ? this.typea : "",
        typeb: this.typeb != undefined ? this.typeb : "",
        typec: "",
        typed: this.typed != undefined ? this.typed : "",
        typeE: this.typeE.join(","),
        cu: "",
        cn: this.courseName,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.ajax
        .get(this.$store.state.api + "selectSynergyCourse", params)
        .then((res) => {
          if (this.loading) {
            this.loading.close();
          }
          this.loading = "";
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.course = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getTypeName() {
      this.$forceUpdate();
      this.page = 1;
      this.isChoose = 1;
      this.getCourse();
    },
    // searchCourse() {
    //   this.isLoading = true;
    //   let params = {
    //     cu: "",
    //     cn: this.courseName,
    //     page: this.page,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "searchCourse", params)
    //     .then((res) => {
    //       this.isLoading = false;
    //       this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
    //       this.course = res.data[0];
    //     })
    //     .catch((err) => {
    //       this.isLoading = false;
    //       console.error(err);
    //     });
    // },
    deleteCourse(cid) {
      // if (this.time()) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.openLoading(
            document.querySelector(".student_table")
          );
          this.isLoading = true;
          let params = {
            cid: cid,
          };
          this.ajax
            .get(this.$store.state.api + "deleteSynergyCourse", params)
            .then((res) => {
              loading.close();
              this.isLoading = false;
              this.$message.success("删除成功");
              this.getCourse();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          loading.close();
          this.isLoading = false;
          return;
        });
      // }
    },
    selectAllType() {
      let params = {
        org: this.org && this.org != "" ? this.org : "",
        oid: this.oid && this.oid != "" ? this.oid : "",
        stand: "cn"
      };
      this.ajax
        .get(this.$store.state.api + "selectAllTypeStand", params)
        .then((res) => {
          if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
            res.data[0] = [...res.data[0], ...res.data[4]]
          }
          this.CourseType = res.data;
          this.CourseType2 = [
            { name: "智见课程", id: [] },
            { name: "智行课程", id: [] },
            { name: "智创课程", id: [] },
          ];

          for (var cti = 0; cti < res.data[0].length; cti++) {
            if (
              res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86db5" ||
              res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86db5"
            ) {
              this.CourseType2[0].id.push(res.data[0][cti].id);
            } else if (res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86ac5" ||
              res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86ac5") {
              this.CourseType2[1].id.push(res.data[0][cti].id);
            } else if (res.data[0][cti].id == "34629bcc-d02f-11ec-8c78-005056b86db5") {
              this.CourseType2[2].id.push(res.data[0][cti].id);
            }
            if (res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86db5" || res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86ac5") {
              res.data[0][cti].name = "年级";
            } else if (res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86db5" || res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86ac5") {
              res.data[0][cti].name = "学科";
            } else if (res.data[0][cti].id == "34629bcc-d02f-11ec-8c78-005056b86db5") {
              res.data[0][cti].name = "主题";
            }
          }
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = [];
            }
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              if (res.data[0][i].name == "栏目") {
                this.CourseType[0][i].name = "主题";
              }
            }
            if (res.data[2].length == 0 && res.data[3].length == 0) {
              for (var j = 0; j < res.data[1].length; j++) {
                if (res.data[0][i].id == res.data[1][j].pid) {
                  this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                }
              }
            } else {
              if (res.data[2].length > 0) {
                for (var j = 0; j < res.data[2].length; j++) {
                  if (res.data[0][i].id == res.data[2][j].pid) {
                    this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                  }
                }
              }
              if (res.data[3].length > 0) {
                for (var j = 0; j < res.data[3].length; j++) {
                  if (res.data[0][i].id == res.data[3][j].pid) {
                    this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                  }
                }
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectType() {
      this.ajax
        .get(this.$store.state.api + "selectType")
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = "";
            }
            // if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
            //   if (res.data[0][i].name == "栏目") {
            //     this.CourseType[0][i].name = "主题";
            //   }
            // }
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); //去除公共分类
              }
            }
          }
          this.selectTypeByOid();
          this.selectTypeByOrg();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectTypeByOid() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectTypeByOid", params)
        .then((res) => {
          for (var i = 0; i < res.data[0].length; i++) {
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectTypeByOrg() {
      let params = {
        oid: this.org,
      };
      this.ajax
        .get(this.$store.state.api + "selectTypeByOrg", params)
        .then((res) => {
          for (var i = 0; i < res.data[0].length; i++) {
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    openCourse() {
      this.dialogVisibleCourse = true;
      this.getTeamCourse();
    },
    getTeamCourse() {
      // let params = {
      //   uid: this.userid,
      //   oid: this.oid,
      // };
      // this.ajax
      //   .get(this.$store.state.api + "selectCourseTeam", params)
      //   .then((res) => {
      //     this.courseTeam = res.data[0];
      //   })
      //   .catch((err) => {
      //     console.error(err);
      //   });
    },
    search() {
      this.page = 1;
      this.getCourse();
    },
    checkProblem(res) {
      this.problemCourse = res;
      this.dialogVisible = true;
    },
    copyCourse(cid) {
      let params = [
        {
          cid: cid,
          uid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "copySynergyCourse", params)
        .then((res) => {
          this.page = 1;
          if (this.role == "1") {
            this.groupA = "4";
          } else {
            this.groupA = "0";
          }
          this.$message.success("复制成功")
          this.clear();
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    if (this.role == "1") {
      this.groupA = "4";
    }
    this.page = 1;
    // this.selectType();
    this.selectAllType();
    this.getCourse();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1380px) {
  .out_box {
    width: calc(100% / 4 - (15px * 3) / 4) !important;
  }

  .out_box:nth-child(5n) {
    margin-right: 15px !important;
  }

  .out_box:nth-child(4n) {
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 1080px) {
  .out_box {
    width: calc(100% / 3 - (15px * 2) / 3) !important;
  }

  .out_box:nth-child(5n) {
    margin-right: 15px !important;
  }

  .out_box:nth-child(4n) {
    margin-right: 15px !important;
  }

  .out_box:nth-child(3n) {
    margin-right: 0 !important;
  }
}

.dialog_diy>>>.el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.student_head>>>.el-button--primary {
  background-color: #2268bc;
}

.xls_button {
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  color: rgb(34, 104, 188);
}

.student_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-direction: row;
  flex-wrap: wrap;
}

.top {
  display: flex;
  justify-content: space-between;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0px auto;
  padding: 10px 5px;
  height: 54px;
}

.bgColor {
  background: #466b99;
}

.student_search {
  display: flex;
  align-items: center;
  width: calc(100% / 3);
}

.student_search span {
  margin: 0 10px 0 0;
  min-width: 65px;
}

.student_button {
  display: flex;
  /* overflow: hidden; */
  height: 40px;
  position: relative;
}

.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: end;
  /* position: relative; */
  width: 100px;
  overflow: hidden;
}

.student_table {
  /* padding: 20px 0; */
  height: 100%;
  /* overflow: auto; */
  min-height: 360px;
}

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

.el-table>>>.even_row {
  background-color: #f1f1f1;
}

.time {
  font-size: 13px;
  color: #999;
}

.course_button {
  padding: 10px 20px;
}

.course_button_box {
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
}

.course_rate {
  margin-top: 5px;
}

.course_view {
  display: flex;
  align-items: center;
  margin: 5px 0 0 0;
}

.course_view i {
  background-image: url("../../../assets/liulan.png");
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  /* margin-top: 1px; */
  line-height: 25px;
  vertical-align: text-top;
  background-repeat: no-repeat;
}

.image {
  width: 100%;
  height: 150px;
  display: block;
}

.course_box {
  display: flex;
  flex-wrap: wrap;
}

.student_page {
  width: 100%;
  margin: 0 auto;
  background: #e6eaf0;
}

.course_create_box {
  font-size: 18px;
}

.course_name {
  margin-top: 10px;
}

.course_name span {
  margin-bottom: 10px;
  display: block;
}

.homework_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.course_homework {
  width: 130px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0 10px 10px 0;
}

.course_type {
  margin-top: 10px;
  display: flex;
}

.course_type1 span {
  margin-bottom: 10px;
  display: block;
}

.course_type2 {
  margin-left: 20px;
}

.course_type2 span {
  margin-bottom: 10px;
  display: block;
}

.course_empty {
  color: rgb(110, 110, 110);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el_cards>>>.el-card__body {
  height: 100%;
}

.courseBtnBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 170px);
  padding: 10px;
}

.wordUpload {
  display: flex;
}

.wordUpload>.buttonUp {
  margin-right: 5px;
}

.out_box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: calc(100% / 5 - (15px * 4) / 5);
  /* width: 280px; */
  background: #fff;
  margin-right: 15px;
  /* border: 1px solid #ccc; */
  height: fit-content;
  box-sizing: border-box;
  border-radius: 0px 0px 5px 5px;
  /* overflow: hidden; */
  margin-bottom: 15px;
  position: relative;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #3682fc00;
}

.out_box:hover {
  border: 1px solid #3681FC;
}

.out_box:nth-child(5n) {
  margin-right: 0;
}

.bottom_box {
  display: flex;
  padding: 10px;
  flex-direction: column;
  box-sizing: border-box;
  /* height: 121px; */
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.bottom_box>div:nth-child(1) {
  width: 100%;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom_box>div:nth-child(1)>span:nth-child(1) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  font-size: 16px;
}

.bottom_box>div:nth-child(1)>span:nth-child(2) {
  min-width: fit-content;
  font-size: 14px;
  color: #8c8c8c;
}

.tup {
  width: 100%;
  height: 180px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 10px 10px 0;
  box-sizing: border-box;
}

.tup>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kc_time {
  margin-top: 8px;
  font-size: 14px;
  color: #717C8D;
}

.kc_time+.kc_time {
  margin-top: 0;
}

.kc_t {
  margin-top: 5px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.three_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 45px;
  align-items: center;
  background: #fff;
  font-size: 14px;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
}

.three_bottom>div {
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.three_bottom>div+div {
  border-left: 1px solid #ddd;
}

.three_bottom>div:hover {
  color: #3681FC;
  font-weight: bold;
}

.three_bottom .deleteB {
  color: #E96E6E;
}

.three_bottom .deleteB:hover {
  color: #E96E6E;
  font-weight: bold;
}

.head_left {
  display: flex;
}

.student_input>>>.el-input__inner {
  height: 40px;
  width: 190px;
  font-size: 13px;
  padding: 0 10px;
}

.course_button {
  color: #fff;
  background: #2268bc;
  width: 75px;
  height: 40px;
  padding: 0 !important;
  font-size: 12px;
  line-height: 40px;
}

/* .all_choose {
  margin: 15px 0 10px;
  height: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: calc(100% / 3);
}

.all_choose > span {
  width: 50px;
  display: block;
}

.choose {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
  justify-content: flex-start;
  width: 60%;
  min-width: 868px;
  align-items: center;
} */

/* .choose > div:nth-child(2) {
  margin-left: 1%;
  width: 32.33333%;
}

.choose > div:nth-child(4) {
  margin-right: 1%;
  width: 32.33333%;
}

.choose > div:nth-child(5) {
  margin: 5px 0 0 1%;
}

.choose > div:nth-child(4) > span {
  width: 74px !important;
  min-width: 74px;
}

.choose > div:nth-child(4) >>> .el-select {
  width: 217.5px;
  min-width: 215.06px;
} */

.clear {
  width: 70px;
  height: 35px;
  background: #2268bc;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 35px;
  cursor: pointer;
  margin-left: 20px;
}

.ct_box {
  height: 500px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}

.myCourse {
  position: absolute;
  background: #3c3c3c;
  width: 70px;
  height: 30px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  top: 5px;
  left: 5px;
}

.xtCourse {
  position: absolute;
  background: #466b99;
  width: 70px;
  height: 30px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  top: 5px;
  left: 5px;
}

.sub_head {
  position: relative;
}

.sub_head::after {
  content: "";
  width: 100%;
  background: #5a9cea;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -10px;
}

.subClick {
  /* font-size: 16px; */
  font-size: 26px;
  cursor: pointer;
  margin-left: 17.5px;
  /* color: #ab582f; */
  /* color: #409eff; */
  color: #999;
}

.subClick:hover {
  color: #000;
}

.more {
  position: relative;
}

.more:hover div {
  display: block;
  color: #000;
}

.more div {
  position: absolute;
  bottom: 0px;
  transform: translate(-50%, 100%);
  background: #f5f4f4;
  padding: 10px 20px;
  z-index: 99;
  width: 50px;
  border-radius: 5px;
  box-shadow: 0 0 3px 3px #80808020;
  display: none;
}

.more div>span+span {
  margin-top: 10px;
}

.more div>span {
  display: block;
  width: 100%;
  text-align: center;
}

.more div>span:hover {
  color: #79a2ff;
}

.line {
  width: 100%;
  height: 15px;
  background: #e6eaf0;
}

.reBox {
  width: 100%;
  /* padding-left: 20px; */
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 15px 0;
}

.reTop {
  padding: 0 0 5px;
  /* padding: 20px 0 0 0; */
  /* border-bottom: 1px solid #eee; */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.reTop>div:nth-child(1) {
  font-weight: bold;
  /* width: 40px; */
  /* border-bottom: 1px solid #205cc6; */
  /* padding-bottom: 20px; */
  color: #205cc6;
  /* font-size: 20px; */
}

.reTop .reTopCh {
  display: flex;
}

.reTop .searchI {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #ccced3;
  width: 250px;
  border-radius: 8px;
  padding: 5px 0;
  /* margin-bottom: 10px; */
  background: #fafafa;
  margin: 0 0 0 10px;
}

.search {
  width: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
}

.search>img {
  width: 100%;
  height: 100%;
}

.sInput {
  border: none;
  width: 85%;
  background: #fafafa;
}

.sInput:focus-visible {
  outline: none;
}

.typeCss {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.choose {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 10px 0;
}

.all_choose {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin: 2px 0;
  width: 100%;
}

.all_choose>span {
  display: flex;
  margin-right: 5px;
}

.all_choose>span>span {
  min-width: 65px;
  max-width: 65px;
  display: block;
  text-align-last: justify;
}

.all_choose>span::after {
  content: '：';
}

.all_choose>span:nth-child(1) {
  font-weight: bold;
}

.all_choose>>>.el-checkbox-group {
  display: flex;
  flex-direction: row;
  width: 820px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3px;
}

.all_choose>.el-checkbox-group>>>.el-checkbox {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
  min-width: 80px;
  overflow: hidden;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
  width: auto;
}

.cName {
  cursor: pointer;
  margin: 0 10px 5px 0;
  color: #b9b6b9;
  min-width: 80px;
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isCType {
  color: #6282c2;
}

.pType_box {
  margin-top: 0;
}

.pType_box>>>.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.buttonBox {
  position: absolute;
  bottom: -0;
  transform: translateY(100%);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 3px 1px #e3e3e3;
  width: 100%;
  font-size: 16px;
}

.buttonBox>div {
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  color: #000;
  box-sizing: border-box;
}

.buttonBox>div+div {
  border-top: 1px solid #e0e0e0;
}

.buttonBox>div:hover {
  background: #f6f8ff;
}
.liyuan{
  padding: 0 90px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.confra{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.clobtn{
  height: 30px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
</style>