<template>
  <div class="course-outline-knowledge">
    <div class="part-box part-box-pad">
      <div class="box-justify mb-2">
        <div></div>
        <div>
          <el-button type="primary" @click="toAdd">新增知识点</el-button>
        </div>
      </div>
      <el-table
        ref="TableList"
        :data="dataList"
        row-key="id"
        default-expand-all
      >
        <el-table-column label="知识点"> </el-table-column>
        <el-table-column
          class-name="action-column"
          label="操作"
          width="140"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toEdit(scope.row, 'up')"
              >编辑</el-button
            >
            <el-button
              class="btn-danger"
              type="text"
              @click="toDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              v-if="checkMoveValid(scope.row, 'up')"
              class="btn-primary"
              type="text"
              @click="toMove(scope.row, 'up')"
              >上移</el-button
            >
            <el-button
              v-if="checkMoveValid(scope.row, 'down')"
              class="btn-primary"
              type="text"
              @click="toMove(scope.row, 'down')"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ModifyCourseOutlineKnowledge -->
    <modify-course-outline-knowledge
      ref="ModifyCourseOutlineKnowledge"
      :instance="curRow"
      :main-options="mainOptions"
      @modified="getList"
    ></modify-course-outline-knowledge>
  </div>
</template>

<script>
import {
  courseOutlineKnowledgeListPage,
  deleteCourseOutlineKnowledge,
  sortCourseOutlineKnowledge,
} from "../../api";

import ModifyCourseOutlineKnowledge from "./ModifyCourseOutlineKnowledge.vue";

export default {
  name: "course-outline-knowledge",
  components: {
    ModifyCourseOutlineKnowledge,
  },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      curRow: {},
      mainOptions: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await courseOutlineKnowledgeListPage({
        obeCourseOutlineId: this.rowData.id,
      });
      this.dataList = data || [];
      this.mainOptions = this.dataList.map((item) => {
        return {
          id: item.id,
          name: item.name,
        };
      });
    },
    toAdd() {
      this.curRow = {};
      this.$refs.ModifyCourseOutlineKnowledge.open();
    },
    toEdit(row) {
      this.curRow = row;
      this.$refs.ModifyCourseOutlineKnowledge.open();
    },
    exchangeSortNumber(row1, row2) {
      const sortNum = row1.sortNum;
      row1.sortNum = row2.sortNum;
      row2.sortNum = sortNum;
    },
    checkMoveValid(row, type) {
      if (row.children) {
        const rowIndex = this.dataList.findIndex((item) => item.id === row.id);
        if (type === "up") {
          return rowIndex !== 0;
        } else {
          return rowIndex !== this.dataList.length - 1;
        }
      } else {
        let row = {};
        let rowIndex = 0;
        this.dataList.forEach((item) => {
          item.children.forEach((elem, index) => {
            if (elem.id === row.id) {
              row = item;
              rowIndex = index;
            }
          });
        });
        if (type === "up") {
          return rowIndex !== 0;
        } else {
          return rowIndex !== row.children.length - 1;
        }
      }
    },
    toMove(row, type) {
      if (row.children) {
        const rowIndex = this.dataList.findIndex((item) => item.id === row.id);
        this.toMoveRow(this.dataList, rowIndex, type);
      } else {
        let row = {};
        let rowIndex = 0;
        this.dataList.forEach((item) => {
          item.children.forEach((elem, index) => {
            if (elem.id === row.id) {
              row = item;
              rowIndex = index;
            }
          });
        });
        this.toMoveRow(row.children, rowIndex, type);
      }
    },
    async toMoveRow(dataList, rowIndex, type) {
      const row1 = dataList[rowIndex];
      const row2 =
        type === "up" ? dataList[rowIndex - 1] : dataList[rowIndex + 1];

      this.exchangeSortNumber(row1, row2);

      const datas = dataList.map((item, index) => {
        return {
          id: item.id,
          sortNum: item.sortNum,
        };
      });

      const res = await sortCourseOutlineKnowledge(datas).catch(() => {
        this.exchangeSortNumber(row1, row2);
      });
      if (!res) return;

      this.dataList.sort((a, b) => a.sortNum - b.sortNum);
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除知识点【${row.courseName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteCourseOutlineKnowledge(row.id);
      this.$message.success("删除成功！");
      this.getList();
    },
  },
};
</script>
