<template>
  <div>
    <BasicLayout>
      <template #wrapper>
        <!-- 岗位管理 -->
        <el-card class="box-card">
          <div class="org_header">
            <span class="subject">课程表</span>
            <div class="header_btn_box">
              <el-button size="mini" @click="resetQuery">重置 </el-button>
              <el-button
                size="mini"
                type="primary"
                @click="go('/taskmanage/learning/learningAdd', 'add', 'add')"
                >新建课程表</el-button
              >
            </div>
          </div>
          <el-form
            ref="queryForm"
            :model="queryParams"
            :inline="true"
            label-position="right"
            label-width="100px"
            style="margin-top: 20px"
            @submit.native.prevent
          >
            <el-form-item label="" prop="keyword">
              <el-input
                v-model="queryParams.keyword"
                placeholder="输入关键字搜索"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                @change="handleQuery"
              />
            </el-form-item>
            <el-form-item label="创建时间" prop="value">
              <el-date-picker
                style="width: 100%"
                v-model="value"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="small"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQueryTime"
              >
              </el-date-picker>
              <!-- <el-date-picker
                v-model="queryParams.timeRangeStart"
                type="datetime"
              >
              </el-date-picker>
              --
              <el-date-picker
                v-model="queryParams.timeRangeEnd"
                type="datetime"
              >
              </el-date-picker> -->
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="learningList"
            @selection-change="handleSelectionChange"
            @sort-change="handleSortChang"
          >
            <el-table-column type="selection" width="45" align="center" />
            <el-table-column label="课程表名称" align="left" prop="name">
              <template slot-scope="scope">
                <span
                  style="color: #1e5aff; cursor: pointer"
                  @click="
                    go('/taskmanage/learning/learningAdd', scope.row.id, 'look')
                  "
                  >{{ scope.row.name }}</span
                >
              </template>
            </el-table-column>
            <!-- <el-table-column label="课程内容" align="center" prop="courseList">
              <template slot-scope="scope">
                <div v-if="scope.row.courseList.length > 2">
                  <div
                    v-for="(v, k) in scope.row.courseList.slice(0, 2)"
                    :key="k"
                  >
                    {{ v.name }}
                  </div>
                </div>
                <div v-else>
                  <div v-for="(v, k) in scope.row.courseList" :key="k">
                    {{ v.name }}
                  </div>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="创建人" align="left" prop="creatorName" />
            <el-table-column
              label="创建时间"
              align="left"
              prop="createdTime"
              :formatter="parseTime"
              sortable="custom"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    go('/taskmanage/learning/learningAdd', scope.row.id, 'edit')
                  "
                  >编辑
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    go('/taskmanage/learning/learningAdd', scope.row.id, 'copy')
                  "
                  >创建副本
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row, 'one')"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-row
            :gutter="24"
            class="mb8 mt20"
            justify="space-between"
            type="flex"
          >
            <el-col :span="12">
              <el-button size="mini" :disabled="multiple" @click="handleDelete"
                >删除
              </el-button>
            </el-col>
            <el-col :span="12" style="justify-content: end">
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="queryParams.limit"
                @pagination="getList"
              />
            </el-col>
          </el-row>
        </el-card>
      </template>
    </BasicLayout>
  </div>
</template>

<script>
import {
  listLearningTable,
  addLearningTable,
  updateLearningTable,
  delLearningTable,
  getLearningTable,
} from "@/api/learningTable";
export default {
  name: "Config",
  data() {
    return {
      value: "",
      userTotal: 0,
      isIndeterminate: true,
      //选中用户列表
      checkedList: [],
      breadArr: [],
      allchecked: false,
      depUserList: null, //部门下的用户
      value4: [1],
      root: {
        children: [],
      },
      toData: [],
      colData: [
        { title: "全选", istrue: false },
        { title: "岗位名称", istrue: false },
        { title: "关联用户", istrue: false },
        { title: "创建时间", istrue: false },
        { title: "操作", istrue: false },
      ],
      // 设置选中的列的复选框
      colSelect: ["全选", "岗位名称", "关联用户", "创建时间", "操作"],
      // 遮罩层
      loading: false,
      id: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isEdit: false,
      // 类型数据字典
      typeOptions: [],
      learningList: [],
      clusterLogList: [],
      // 查询参数
      queryParams: {
        keyword: "", //关键字
        orderBy: "createdTime", //时间字段
        order: "desc",
        offset: 0,
        limit: 10,
        timeRangeBy: "createdTime",
        timeRangeStart: "",
        timeRangeEnd: "",
      },
      pageIndex: 1,
      dateRange: [],
      // 表单参数
      form: {
        occupationList: [
          {
            name: "",
          },
        ],
      },
      items: [],
    };
  },
  created() {
    this.getList();
    let _this = this;
    //mock进行测试
    // this.$http.get("/api/v3/schedule/list").then((res) => {
    //   console.log(res, "dddd");
    //   this.learningList = res.data.data.scheduleList;
    //   this.total = res.data.data.total;
    // });
  },
  methods: {
    //时间范围改变
    handleQueryTime() {
      console.log(this.value, "时间value");
      if (this.value != null) {
        this.queryParams.timeRangeStart = this.value[0];
        this.queryParams.timeRangeEnd = this.value[1];
      } else {
        this.queryParams.timeRangeStart = "";
        this.queryParams.timeRangeEnd = "";
      }
      this.getList();
    },
    //重置查询表单
    resetSearchForm() {
      this.queryParams = {
        keyword: "", //关键字
        orderBy: "createdTime", //时间字段
        order: "desc",
        offset: 0,
        limit: 10,
        timeRangeBy: "timeRangeStart",
        timeRangeStart: "",
        timeRangeEnd: "",
      };
    },
    /** 排序回调函数 */
    handleSortChang(column, prop, order) {
      prop = column.prop;
      order = column.order;
      console.log(prop, order);
      this.queryParams.orderBy = prop;
      if (order === "descending") {
        this.queryParams.order = "desc";
      } else if (order === "ascending") {
        this.queryParams.order = "asc";
      } else {
        this.queryParams.order = "desc";
      }
      this.getList();
    },
    //控制列的显示和隐藏
    columnChange(val) {
      this.colData.filter((i) => {
        if (this.colSelect.indexOf(i.title) !== -1) {
          i.istrue = true;
        } else {
          i.istrue = false;
        }
      });
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      this.queryParams.offset = (this.pageIndex - 1) * this.queryParams.limit;
      listLearningTable(this.queryParams).then((response) => {
        this.learningList = response.data.scheduleList;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 新增和修改弹窗取消按钮
    cancelForm() {
      this.open = false;
      this.reset();
    },

    // 取消按钮
    cancel() {
      this.updateLogOpen = false;
      // this.reset()
    },
    /** 搜索按钮操作 */
    handleQuery(val) {
      this.pageIndex = 1;
      this.queryParams.offset = (this.pageIndex - 1) * this.queryParams.limit;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.pageIndex = 1;
      this.value = "";
      (this.queryParams = {
        keyword: "", //关键字
        orderBy: "createdTime", //时间字段
        order: "desc",
        offset: 0,
        limit: 10,
        timeRangeBy: "createdTime",
        timeRangeStart: "",
        timeRangeEnd: "",
      }),
        this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push("/taskmanage/learning/learningAdd");
      // this.reset();
      // this.open = true;
      // this.title = "添加岗位";
      // this.isEdit = false;
    },
    //跳转页面
    goto(router, id) {
      this.$router.push({
        path: router,
        query: {
          id: id,
        },
      });
    },
    //跳转页面
    go(router, id, type) {
      if (id == "add") {
        this.$router.push(router);
      } else {
        this.$router.push({
          path: router,
          query: {
            id: id,
            type: type,
          },
        });
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map((item) => item.id);
      this.items = selection;
      console.log(this.items);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //数组去重
    unique(arr) {
      return arr.filter(function (item, index, arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index;
      });
    },
    /** 删除按钮操作 */
    handleDelete(row, type) {
      this.ids = this.ids.toString();
      const Ids = row.id || this.ids;
      const name = row.name;
      console.log(Ids, "删除Ids");
      if (type == "one") {
        this.$confirm('您确定要删除"' + name + '"课程表吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "message-delete",
        })
          .then(function () {
            return delLearningTable({ scheduleID: Ids });
          })
          .then((res) => {
            if (res.error == null) {
              this.getList();
              this.msgSuccess("删除成功");
            } else {
              this.msgError("删除失败");
            }
          })
          .catch(function () {});
      } else {
        this.$confirm("您确定要删除已选课程表?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "message-delete",
        })
          .then(function () {
            return delLearningTable({ scheduleID: Ids });
          })
          .then((res) => {
            if (res.error == null) {
              this.getList();
              this.msgSuccess("删除成功");
            } else {
              this.msgError("删除失败");
            }
          })
          .catch(function () {});
      }
    },
    handleLog() {
      this.$router.push({ name: "job_log", params: {} });
    },
    //时间改变
    startTimeChange(data) {
      console.log(data);
      this.form.startTime = data / 1000;
    },
  },
};
</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 20px !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;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(30, 90, 255);
  color: #ffffff;
}
::v-deep .el-button--primary:hover,
.el-button--primary:focus {
  background: rgb(30, 90, 255);
  border-color: rgb(30, 90, 255);
  color: #ffffff;
}
::v-deep .el-button--text:hover,
.el-button--text:focus {
  color: rgb(30, 90, 255);
  border-color: transparent;
  background-color: transparent;
}

// .choosebox ::v-deep .el-dialog__body {
//   padding: 10px 20px !important;
// }
// ::v-deep .el-date-editor.el-input,
// .el-date-editor.el-input__inner {
//   width: 192px;
// }
// ::v-deep .dialog-footer {
//   text-align: center;
// }

@media only screen and (max-width: 470px) {
  .message-delete {
    width: 300px;
  }
  .el-message {
    min-width: 300px;
  }
  .el-dialog {
    margin-top: 54vh !important;
  }
}
</style>
