<template>
  <div>
    <BasicLayout>
      <template #wrapper>
        <!-- 新建课程表 -->
        <el-card class="box-card">
          <div class="org_header" style="padding: 15px 32px">
            <span class="subject">{{ title }}</span>
            <div class="header_btn_box"></div>
          </div>
          <div>
            <!-- <div style="margin: 24px auto; width: 400px"> -->
            <div style="margin: 24px; width: 480px">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="160px"
              >
                <!-- <el-form-item
                  label="课程表名称"
                  prop="name"
                  :rules="{
                    required: true,
                    message: '课程表名称不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    :disabled="coureNameDisabled"
                    v-model="form.name"
                    placeholder="课程表名称"
                  />
                </el-form-item> -->
                <el-form-item label="课程表名称" prop="name">
                  <el-input
                    :disabled="coureNameDisabled"
                    v-model="form.name"
                    placeholder="课程表名称"
                  />
                </el-form-item>
                <div
                  v-if="form.courseList != null && type != 'look'"
                  style="
                    margin-left: 160px;
                    color: #999;
                    font-size: 12px;
                    margin-bottom: 12px;
                  "
                >
                  拖拽可调整顺序
                </div>
                <el-form-item label="课程列表" :prop="'courseList'">
                  <draggable
                    v-model="form.courseList"
                    style="max-height: 400px; overflow-y: scroll; width: 420px"
                    @end="datadragEnd"
                    :options="{ animation: 500 }"
                  >
                    <transition-group>
                      <template v-if="form.courseList != null">
                        <div
                          v-for="(val, index) in form.courseList"
                          :key="index"
                          class="drag-item"
                          style="cursor: move"
                        >
                          <div class="drag-item-name">
                            {{ val.name }}
                            <span v-show="val.published == '0'">
                              (未发布)
                            </span>
                          </div>
                          <div>
                            <i
                              class="el-icon-error"
                              v-if="courseBtn == true"
                              :disabled="removeDisabled"
                              type="text"
                              style="font-size: 14px; color: #909399"
                              @click.prevent="removeVal(val)"
                            ></i>
                          </div>
                        </div>
                      </template>
                    </transition-group>
                  </draggable>
                  <span
                    v-if="courseBtn == true"
                    @click="addVal"
                    style="
                      color: #1e5aff;
                      font-size: 14px;
                      display: block;
                      cursor: pointer;
                    "
                    ><i class="el-icon-circle-plus-outline"></i> 添加课程</span
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="submitForm"
                    v-if="courseBtn == true"
                    size="small"
                    >确 定</el-button
                  >
                  <el-button
                    v-if="type == 'look'"
                    @click="cancelForm"
                    size="small"
                    >返 回</el-button
                  >
                  <el-button v-else @click="cancelForm" size="small"
                    >取 消</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 添加用户穿梭框 -->
          <div class="choosebox">
            <el-dialog
              v-dialogDrag
              title="选择课程"
              :visible.sync="courseOpen"
              width="750px"
              append-to-body
              :close-on-click-modal="false"
              :before-close="cancelCourse"
            >
              <div slot="title" class="dialog-title">
                <div class="dialog-icon mr20" style="margin-left: 32px"></div>
                <span class="dialog-tip mr20">选择课程</span>
              </div>
              <div class="dialog_box">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <h3>选择:</h3>
                    <div class="side_left">
                      <div class="mb10">
                        <el-input
                          prefix-icon="el-icon-search"
                          v-model="courseForm.title"
                          placeholder="输入关键字搜索课程"
                          clearable
                          @input="handelInput"
                          @keyup.enter.native="handelFilterByCourse()"
                          @clear="handelClear()"
                        ></el-input>
                      </div>
                      <div class="leftData mb10">
                        <div v-if="courseFlag">
                          <div>
                            <el-checkbox
                              :indeterminate="isIndeterminate"
                              v-model="allchecked"
                              @change="handleCheckAllChange"
                              >全选</el-checkbox
                            >
                          </div>
                          <el-tree
                            :data="courseList"
                            :default-checked-keys="form.courseIDList"
                            show-checkbox
                            default-expand-all
                            node-key="id"
                            ref="tree"
                            highlight-current
                            accordion
                            :props="defaultProps"
                            @check="clickDeal"
                          >
                          </el-tree>
                        </div>
                        <div v-show="!courseFlag">
                          <div
                            v-if="courseArr.length != 0 || courseArr != null"
                          >
                            <div
                              v-for="element in courseArr"
                              :key="element.id"
                              style="text-overflow: ellipsis; overflow: hidden"
                            >
                              <el-checkbox-group
                                v-model="form.courseIDList"
                                @change="handleCheckedCourseChange"
                              >
                                <el-checkbox
                                  :label="element.id"
                                  :key="element.id"
                                  >{{ element.name }}
                                  <span v-show="element.published == '0'">
                                    (未发布)
                                  </span>
                                </el-checkbox>
                              </el-checkbox-group>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <h3>己选:</h3>
                    <div class="side_right">
                      <ul v-if="toData.length != 0">
                        <li v-for="n in toData" :key="n.id">
                          <div class="userlist">
                            <div>
                              {{ n.name }}
                              <span v-show="n.published == '0'">
                                (未发布)
                              </span>
                            </div>
                            <div @click="removeCourse(n)">
                              <i class="el-icon-error"></i>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handelCourse" size="small"
                  >确 定</el-button
                >
                <el-button @click="cancelCourse" size="small">取 消</el-button>
              </div>
            </el-dialog>
          </div>

          <!-- 添加用户穿梭框 -->
          <div class="choosebox">
            <el-dialog
              v-dialogDrag
              title="提示"
              :visible.sync="tipOpen"
              width="450px"
              append-to-body
              :close-on-click-modal="false"
              :before-close="handleDialogCloseCourse"
            >
              <div style="text-indent: 28px">
                您的已选课程中包含有未发布课程，未发布课程员工不可见，确认提交该课程表吗？
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tipCouse" size="small"
                  >确 定</el-button
                >
                <el-button @click="tipOpen = false" size="small"
                  >取 消</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-card>
      </template>
    </BasicLayout>
  </div>
</template>

<script>
import {
  listLearningTable,
  addLearningTable,
  updateLearningTable,
  delLearningTable,
  getLearningTable,
  getCategoryByCourse, //根据分类获取所有课程
  getFilterByCourse, //根据关键字获取所有课程
  getLearningTableCopy, //创建副本时获取的单个副本信息
} from "@/api/learningTable";
import draggable from "vuedraggable";
export default {
  name: "Config",
  components: {
    draggable,
  },
  data() {
    const checkSpace = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error("请输入课程表名称"));
      } else {
        callback();
      }
    };
    return {
      tipOpen: false,
      courseBtn: true,
      coureNameDisabled: false,
      removeDisabled: false,
      courseFlag: true,
      colData: [
        { title: "全选", istrue: false },
        { title: "岗位名称", istrue: false },
        { title: "关联用户", istrue: false },
        { title: "创建时间", istrue: false },
        { title: "操作", istrue: false },
      ],
      courseForm: {
        title: "",
        order: "asc",
        orderBy: "create_time",
      },
      editData: {
        id: "",
      },
      // 设置选中的列的复选框
      colSelect: ["全选", "岗位名称", "关联用户", "创建时间", "操作"],
      // 遮罩层
      loading: false,
      id: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isEdit: false,
      // 类型数据字典
      typeOptions: [],
      jobsList: [],
      clusterLogList: [],
      // 查询参数
      queryParams: {
        keyword: "", //关键字
        orderBy: "createdTime", //时间字段
        order: "desc",
        offset: 0,
        limit: 10,
        timeRangeBy: "",
        timeRangeStart: "",
        timeRangeEnd: "",
      },
      pageIndex: 1,
      dateRange: [],
      // 表单参数
      form: {
        enable: true, //是否启用
        name: "", //课程表名称
        courseList: [], //课程list用于页面展示
        courseIDList: [], //向后台提交的选中课程id数组
      },
      rules: {
        name: [{ required: true, validator: checkSpace, trigger: "blur" }],
      },
      checkedList: [],
      courseOpen: false,
      queryUser: {
        filter: "",
        orderBy: "id", //时间字段
        order: "desc",
        offset: 0,
        limit: 5000,
        deptID: "",
        occID: "",
      },
      courseList: [],
      courseArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      allchecked: false,
      isIndeterminate: true,
      toData: [],
      type: "",
      courseIds: [],
    };
  },
  created() {
    this.handelCategoryByCourse(); //根据分类获取全部课程
    console.log(this.$route.query.id);
    this.typeInstall(this.$route.query.type);
  },
  mounted() {
    if (this.form.courseList != undefined || this.form.courseList.length != 0) {
      this.form.courseIDList = this.form.courseList.map((item) => item.id);
    }
  },
  // watch: {
  //   form: {
  //     handler(newVal) {
  //       console.log(newVal, "newVal");
  //       this.form.courseIDList = newVal.courseIDList;
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    trim() {
      this.form.name = this.form.name.replace(/^\s+|\s+$/gm, "");
    },
    //初始化页面信息
    typeInstall(type) {
      switch (type) {
        case "add":
          this.coureNameDisabled = false; //课程名程是否禁用
          this.removeDisabled = false;
          this.courseBtn = true;
          this.title = "新建课程表";
          this.type = "add";
          break;
        case "edit":
          this.coureNameDisabled = true; //编辑查看名称不可更改
          this.removeDisabled = false;
          this.title = "编辑课程表";
          this.courseBtn = true;
          this.type = "edit";
          this.form.id = this.$route.query.id;
          this.getLearningInfo();

          break;
        case "look":
          this.coureNameDisabled = true; //编辑查看名称不可更改 copy
          this.removeDisabled = true;
          this.courseBtn = false;
          this.title = "查看课程表";
          this.type = "look";
          this.getLearningInfo();
          break;
        case "copy":
          this.coureNameDisabled = false; //编辑查看名称不可更改
          this.removeDisabled = false;
          this.courseBtn = true;
          this.title = "创建课程表副本";
          this.type = "copy";
          this.getLearningInfoCopy();
          break;
        default:
          this.coureNameDisabled = false;
          this.removeDisabled = false;
          this.courseBtn = true;
          this.title = "新建课程表";
          this.type = "add";
      }
    },
    //根据每一列的id，获取单个课程表的信息。
    getLearningInfo() {
      getLearningTable(this.$route.query.id).then((response) => {
        console.log("response编辑数据", response);
        this.form.name = response.data.name;
        this.form.courseList = response.data.courseList;

        let list = this.getCheckCourse(this.courseList); //所有课程；
        console.log(list);

        if (this.form.courseList != null) {
          this.form.courseList.forEach((item) => {
            this.form.courseIDList.push(item.id);
          });
        }

        if (
          this.form.courseIDList.length != 0 &&
          this.form.courseIDList != null &&
          this.form.courseIDList != undefined
        ) {
          for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < this.form.courseIDList.length; j++) {
              if (
                list[i].id.substring(0, list[i].id.indexOf("&")) ==
                this.form.courseIDList[j]
              ) {
                this.form.courseIDList[j] = list[i].id;
              }
            }
          }
        }

        console.log(this.form.courseIDList, "进入页面的this.form.courseIDList");
      });
    },
    //获取某个课程表副本模板
    getLearningInfoCopy() {
      getLearningTableCopy(this.$route.query.id).then((response) => {
        console.log(response, "副本模板");
        this.form.name = response.data.copyName;
        this.form.courseList = response.data.courseList;
        let list = this.getCheckCourse(this.courseList); //所有课程；

        if (this.form.courseList != null) {
          this.form.courseList.forEach((item) => {
            this.form.courseIDList.push(item.id);
          });
        }
        if (
          this.form.courseIDList.length != 0 &&
          this.form.courseIDList != null &&
          this.form.courseIDList != undefined
        ) {
          for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < this.form.courseIDList.length; j++) {
              if (
                list[i].id.substring(0, list[i].id.indexOf("&")) ==
                this.form.courseIDList[j]
              ) {
                this.form.courseIDList[j] = list[i].id;
              }
            }
          }
        }
      });
      console.log(this.form.courseIDList, "模版");
    },
    // 全选
    handleCheckAllChange(val) {
      console.log(val, "全选");
      if (val == true) {
        this.isIndeterminate = false;
        this.allchecked = true;
        console.log(this.courseList, "this.courseList全选 ");
        for (var i = 0; i < this.courseList.length; i++) {
          this.uniteChildSame(this.courseList[i], true);
        }
        this.toData = this.getCheckCourse(this.courseList);
        this.toData = this.deWeightThree(this.toData); //去掉重复的课程

        this.courseIds = this.toData.map((item) => item.id);

        console.log(this.form.courseIDList, "this.form.courseIDList全选");
      } else {
        for (var i = 0; i < this.courseList.length; i++) {
          this.uniteChildSame(this.courseList[i], false);
        }
        this.isIndeterminate = true;
        this.allchecked = false;
        this.courseIds = [];
        this.toData = [];
      }
    },
    //递归获取最后一级的课程，点击全选的时候使用；
    getCheckCourse(arr) {
      console.log(arr,'arr')
      let newArr = [];
      let flat = function (item) {
        for (var i = 0; i < item.length; i++) {
          if (Array.isArray(item[i].children)) {
            flat(item[i].children);
          } else {
            newArr.push(item[i]);
          }
        }
      };
      flat(arr);
      return newArr;
    },
    //数组去掉重复的id
    // deWeightThree(arr) {
    //   let map = new Map();
    //   for (let item of arr) {
    //     if (!map.has(item.id)) {
    //       map.set(item.id, item);
    //     }
    //   }
    //   return [...map.values()];
    // },
    deWeightThree(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (
            arr[i].id.substring(0, arr[i].id.indexOf("&")) ==
            arr[j].id.substring(0, arr[j].id.indexOf("&"))
          ) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    //搜索课程后点击搜索框
    handleCheckedCourseChange(val) {
      console.log(val, "搜索课程后点击搜索框");
      let arr = [];
      let list = this.getCheckCourse(this.courseList); //所有课程；
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (val[j] == list[i].id) {
            arr.push(list[i]);
          }
        }
      }

      // let checkedCount = val.length;
      // console.log(checkedCount, "checkedCount");
      // this.allchecked = checkedCount >= this.courseArr.length;
      // this.isIndeterminate =
      //   checkedCount > 0 && checkedCount < this.courseArr.length;
      // this.toData.concat(val);
      // this.toData.push(val);
      // this.toData = this.toData.concat(arr);
      this.toData = arr;

      this.toData = this.deWeightThree(this.toData); //去掉重复的课程

      if (this.toData.length != 0) {
        this.courseIds = this.toData.map((item) => item.id);
      }
      console.log(this.courseIds, "this.courseIds 选择框");
      console.log(this.form.courseIDList, "this.form.courseIDList IDDDDD");
    },
    //搜索课程值改变
    handelInput(val) {
      console.log(this.courseIds, "搜索课程，改变操作this.courseIds");
      if (val == "") {
        this.courseFlag = true;
      } else {
        this.courseFlag = false;
        this.handelFilterByCourse();
      }
    },
    //搜索课程，清除操作
    handelClear() {
      console.log(this.courseIds, "搜索课程，清除操作this.courseIds");

      this.form.courseIDList = this.courseIds;
      this.courseFlag = true;
      console.log(
        this.form.courseIDList,
        "搜索课程，清除操作this.form.courseIDList"
      );
    },
    //选课程点击复选框  点击事件时，若选中节点，则父节点和子节点都设为勾选状态，若取消节点选中，则取消该节点下的所有节点。
    clickDeal(currentObj, treeStatus) {
      this.toData = [];
      if (this.$refs.tree.getCheckedNodes()) {
        this.toData = this.getCheckCourse(this.$refs.tree.getCheckedNodes()); //获取最后一层的课程
        this.toData = this.deWeightThree(this.toData); //去重
      }
      console.log(this.toData, "this.toData");
      this.courseIds = this.toData.map((item) => item.id);
      this.form.courseIDList = this.courseIds;

      console.log(this.form.courseIDList, "this.form.courseIDList 点击复选框");

      // if (currentObj.children == null) {
      //   this.msgWarning("此分类下暂无课程");
      // }
    },
    //通过 setChecked 设置节点是否选中状态。
    uniteChildSame(treeList, isSelected) {
      this.$refs.tree.setChecked(treeList.id, isSelected);
      if (treeList.children) {
        for (let i = 0; i < treeList.children.length; i++) {
          this.uniteChildSame(treeList.children[i], isSelected);
        }
      }
    },
    uniteChildSameID(treeList, arr) {
      arr.push(treeList.id);
      if (treeList.children) {
        for (let i = 0; i < treeList.children.length; i++) {
          this.uniteChildSameID(treeList.children[i], arr);
        }
      }
    },
    // 统一处理父节点为选中
    selectedParent(currentObj, flag) {
      let currentNode = this.$refs.tree.getNode(currentObj);
      console.log(currentNode, "统一处理父节点为选中");
      console.log(currentNode.parent.key);
      if (currentNode.parent.key !== undefined) {
        this.$refs.tree.setChecked(currentNode.parent, flag);
        this.selectedParent(currentNode.parent, flag);
      }
    },
    //右侧移除课程
    removeCourse(val) {
      console.log(val.id);
      this.toData = this.toData.filter((item) => {
        return item.id != val.id;
      });
      this.uniteChildSame(val, false);
      this.isIndeterminate = true;
      this.allchecked = false;
      if (this.toData.length != 0) {
        this.courseIds = this.toData.map((item) => item.id);
      }
      this.form.courseIDList = this.courseIds;
      console.log(this.toData, this.courseIds, "点击移除操作");
    },
    //拖拽
    datadragEnd(evt) {
      evt.preventDefault();
      this.form.courseIDList = [];
      let list = this.getCheckCourse(this.courseList); //所有课程；
      this.form.courseList.forEach((item) => {
        this.form.courseIDList.push(item.id);
      });

      if (
        this.form.courseIDList.length != 0 &&
        this.form.courseIDList != null &&
        this.form.courseIDList != undefined
      ) {
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < this.form.courseIDList.length; j++) {
            if (
              list[i].id.substring(0, list[i].id.indexOf("&")) ==
              this.form.courseIDList[j]
            ) {
              this.form.courseIDList[j] = list[i].id;
            }
          }
        }
      }
    },
    goTo() {
      this.$router.push("/taskmanage/learningTable");
    },
    //移除
    removeVal(item) {
      var index = this.form.courseList.indexOf(item);
      if (index !== -1) {
        this.form.courseList.splice(index, 1);
        this.form.courseIDList = [];
        console.log(this.form.courseList, "courseList 移动");
        if (this.form.courseList.length != 0 || this.form.courseList != null) {
          this.form.courseList.forEach((item) => {
            this.form.courseIDList.push(item.id);
          });
        }

        console.log(this.form.courseIDList, "点击移除后的ID");
        this.toData = this.form.courseList;
      }
    },
    //添加课程
    addVal() {
      let list = this.getCheckCourse(this.courseList); //所有课程；
      this.toData = [];
      this.courseForm.title = "";
      this.courseFlag = true;
      this.form.courseIDList = [];
      if (this.form.courseList != null) {
        if (list.length == this.form.courseList.length) {
          this.isIndeterminate = false;
          this.allchecked = true;
        } else {
          this.isIndeterminate = true;
          this.allchecked = false;
        }

        this.toData = this.form.courseList;

        this.form.courseList.forEach((item) => {
          this.form.courseIDList.push(item.id);
        });
      }
      if (
        this.form.courseIDList.length != 0 &&
        this.form.courseIDList != null &&
        this.form.courseIDList != undefined
      ) {
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < this.form.courseIDList.length; j++) {
            if (
              list[i].id.substring(0, list[i].id.indexOf("&")) ==
              this.form.courseIDList[j]
            ) {
              this.form.courseIDList[j] = list[i].id;
            }
          }
        }
      }
      this.courseOpen = true;
      this.courseFlag = true;

      console.log(this.form.courseIDList, "this.form.courseIDList后");
    },
    //根据分类获取所有课程
    handelCategoryByCourse() {
      getCategoryByCourse().then((res) => {
        console.log(res,res.children)
        res.children = this.disabledTree(res.children);
        this.courseList = this.handlePushId(res.children);
        console.log(this.courseList, "this.courseList");
      });
    },
    disabledTree(arr) {
      console.log(arr)
        arr.map((item) => {
          console.log(item,'item')
          if(item.children == null){
            item.children = []
            if (item.published == undefined && item.children.length == 0) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          }else{
            if (item.published == undefined && item.children.length == 0) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          }
          this.disabledTree(item.children || []);
        });
        console.log(arr)
        return arr;
    },
    // 处理通过分类拿到的所有课程，将所有id添加随机数。以保证唯一性。
    handlePushId(data) {
      try {
        data.forEach((item1) => {
          item1.id += "&" + Math.random();
          if (item1.children && item1.children.length > 0) {
            item1.children.forEach((item2) => {
              item2.id += "&" + Math.random();
              if (item2.children.length > 0) {
                item2.children.forEach((item3) => {
                  item3.id += "&" + Math.random();
                });
              }
            });
          }
        });
        return data;
      } catch (error) {
        console.warn(error);
      }
    },
    //提交数据的时候，将id恢复成之间的id
    handelRemoveId(treeList) {
      treeList.forEach((item1) => {
        item1.id = item1.id.substring(0, item1.id.indexOf("&"));
        if (item1.children.length > 0) {
          item1.children.forEach((item2) => {
            item2.id = item2.id.substring(0, item2.id.indexOf("&"));
            if (item2.children.length > 0) {
              item2.children.forEach((item3) => {
                item3.id = item3.id.substring(0, item3.id.indexOf("&"));
              });
            }
          });
        }
      });
    },
    //根据关键字获取所有课程
    handelFilterByCourse() {
      getFilterByCourse(this.courseForm).then((res) => {
        console.log(res);
        let list = this.getCheckCourse(this.courseList); //所有课程；
        console.log(list, "list关键字");
        this.courseArr = res.courses;
        console.log(this.courseArr.length, "this.courseArr.length");

        if (this.courseArr.length != 0 || this.courseArr != null) {
          this.courseFlag = false;
          for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < this.courseArr.length; j++) {
              if (
                list[i].id.substring(0, list[i].id.indexOf("&")) ==
                this.courseArr[j].id
              ) {
                this.courseArr[j].id = list[i].id;
              }
            }
          }
        } else {
          this.courseFlag = true;
        }

        console.log(this.courseArr, "courseArr");
      });
    },
    //重置查询表单
    resetSearchForm() {
      this.queryParams = {
        filter: "",
        orderBy: "createdTime",
        order: "desc",
        offset: 0,
        limit: 10,
      };
    },
    // 新增和修改弹窗取消按钮
    cancelForm() {
      this.reset();
      this.$router.push("/taskmanage/learning/learningTable");
    },

    // 取消按钮
    cancel() {
      this.updateLogOpen = false;
      // this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        enable: true, //是否启用
        name: "", //课程表名称
        courseList: [], //课程list用于页面展示
        courseIDList: [], //向后台提交的选中课程id数组
      };
      // this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      console.log(this.form, "提交按钮");
      if (
        this.form.courseIDList.length != 0 ||
        this.form.courseIDList != null ||
        this.form.courseIDList != undefined
      ) {
        for (let i = 0; i < this.form.courseIDList.length; i++) {
          if (this.form.courseIDList[i].toString().indexOf("&") != -1) {
            this.form.courseIDList[i] = Number(
              this.form.courseIDList[i].substring(
                0,
                this.form.courseIDList[i].indexOf("&")
              )
            );
          }
        }
      }
      this.form.courseIDList = [...new Set(this.form.courseIDList)];
      console.log(this.form.courseList);
      console.log(this.form.courseIDList, "处理后的id");
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.type, "type类型");
          if (this.type == "edit") {
            updateLearningTable(this.form, this.form.id).then((response) => {
              if (response.error == null) {
                this.msgSuccess("修改成功");
                this.$router.push("/taskmanage/learning/learningTable");
              } else {
                this.msgError(response.error.msg);
              }
            });
          } else if (this.type == "add" || this.type == "copy") {
            addLearningTable(this.form).then((response) => {
              console.log(response, "response.error");
              if (response.error == null) {
                this.msgSuccess("创建成功");
                this.$router.push("/taskmanage/learning/learningTable");
              } else {
                this.msgError(response.error.msg);
              }
            });
          } else if (this.type == "look") {
            this.$router.push("/taskmanage/learning/learningTable");
          }
        }
      });
    },
    handleDialogCloseCourse() {
      // this.courseOpen = false;
      this.tipOpen = false;
      // this.getList();
    },
    tipCouse() {
      this.courseOpen = false;
      this.courseFlag = false;
      this.tipOpen = false;
      this.form.courseIDList = this.courseIds;
      this.form.courseList = this.toData;
    },
    handelCourse() {
      var flag = this.toData.every((item) => {
        return item.published == "1";
      });
      if (flag == true) {
        this.courseOpen = false;
        this.courseFlag = false;
        this.form.courseIDList = this.courseIds;
        this.form.courseList = this.toData;
      } else {
        this.tipOpen = true;
      }
    },
    cancelCourse() {
      this.courseOpen = false;
      this.courseFlag = false;
      this.toData = [];
      this.isIndeterminate = true;
      this.allchecked = false;

      console.log(this.form.courseList, "取消");
      this.form.courseIDList = [];

      for (var i = 0; i < this.courseList.length; i++) {
        this.uniteChildSame(this.courseList[i], false);
      }

      let list = this.getCheckCourse(this.courseList); //所有课程；

      if (this.form.courseList != null) {
        this.form.courseList.forEach((item) => {
          this.form.courseIDList.push(item.id);
        });
      }

      if (
        this.form.courseIDList.length != 0 &&
        this.form.courseIDList != null &&
        this.form.courseIDList != undefined
      ) {
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < this.form.courseIDList.length; j++) {
            if (
              list[i].id.substring(0, list[i].id.indexOf("&")) ==
              this.form.courseIDList[j]
            ) {
              this.form.courseIDList[j] = list[i].id;
            }
          }
        }
      }

      console.log(this.form.courseIDList);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.center-box {
  width: 636px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 32px;
  .dialog-tip {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }
}
.org_header {
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -26px;
}
.subject {
  color: $titleBlue;
  font-weight: bold;
}
.header_btn_box {
  padding: 10px 0 10px;
  display: flex;
}
.el-flex {
  background-color: #fff;
  padding: 24px 32px;
}
.selectOrg {
  display: flex;
}
.input_width {
  width: 468px;
}
.select_width {
  width: 136px;
}
.choosebox ::v-deep .el-dialog__body {
  padding: 10px 40px 32px 40px !important;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 192px;
}
::v-deep .dialog-footer {
  text-align: center;
}
.side_left,
.side_right {
  background: #f2f6fc;
  padding: 15px;
  height: 350px;
  box-sizing: border-box;
  // overflow-y: scroll;
}
.side_right {
  overflow-y: scroll;
}
.leftData {
  height: 250px;
  overflow-y: scroll;
}
.el-breadcrumb {
  line-height: 1.8;
}
.flexDiv {
  width: 100%;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.choosebox ::v-deep .el-checkbox {
}
.el-checkbox {
  display: block !important;
  height: 30px;
  line-height: 30px;
}
ul,
li {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
li {
  height: 30px;
  line-height: 30px;
}
.userlist {
  display: flex;
  justify-content: space-between;
}
.drag-item {
  display: flex;
  width: 372px;
}
.drag-item-name {
  width: 320px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background: #ffffff;
  color: #666;
  margin-bottom: 16px;
  text-indent: 12px;
  margin-right: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}
::v-deep .el-button--primary:hover,
.el-button--primary:focus {
  background: rgb(30, 90, 255);
  border-color: rgb(30, 90, 255);
  color: #ffffff;
}
@media only screen and (max-width: 470px) {
  .message-delete {
    width: 300px;
  }
  .el-message {
    min-width: 300px;
  }
  .el-dialog {
    margin-top: 54vh !important;
  }
}
</style>
