<template>
  <div class="course-outer-wrapper">
    <div
      class="course-wrapper"
      :style="{ paddingLeft: coursetypes.level * 20 + 'px' }"
    >
      <div style="display: flex;">
        <div v-if="coursetypes.children && coursetypes.children.length > 0">
          <div
            v-if="coursetypes.isShow"
            class="down-triangle"
            @click="coursetypes.isShow = false"
          />
          <div
            v-else
            class="right-triangle"
            @click="coursetypes.isShow = true"
          />
        </div>
        <div v-else style="width: 20px;" />
        <div>{{ coursetypes.name }}</div>
      </div>
      <div style="display: flex;">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="editCourseName"
          >编辑</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="editChildType"
          >添加子分类</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="deleteChildType"
          >删除子分类</el-button
        >
      </div>
    </div>
    <coursetype
      v-for="item in coursetypes.children"
      v-show="coursetypes.isShow"
      :coursetypes="item"
      :refresh="refresh"
    />
    <el-dialog title="编辑课程分类名称" :visible.sync="editNameShow">
      <el-form
        v-if="editNameShow"
        ref="editform"
        :model="editFormInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item prop="title" label="课程名称">
          <el-input v-model="editFormInfo.title" />
        </el-form-item>
        <el-form-item prop="description" label="描述">
          <el-input
            v-model="editFormInfo.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="editNameShow = false">取消</el-button>
        <el-button type="primary" @click="submitEditFormInfo">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加子类" :visible.sync="addTypeShow">
      <el-form
        v-if="addTypeShow"
        ref="addform"
        :model="addTypeFormInfo"
        label-width="120px"
        :rules="addTypeRules"
      >
        <el-form-item prop="type" label="类别名称:">
          <el-input v-model="addTypeFormInfo.type" />
        </el-form-item>
        <el-form-item prop="description" label="类别描述">
          <el-input
            v-model="addTypeFormInfo.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="cancelAddType">取消</el-button>
        <el-button type="primary" @click="submitAddType">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  postOnlineTrainingCategory,
  putOnlineTrainingCategory,
  deleteOnlineTrainingCategory
} from "@/api/coursecategory.js";
export default {
  name: "Coursetype",
  components: {
    coursetype: () => import("./coursetype.vue")
  },
  props: {
    coursetypes: {
      type: Object,
      required: true,
      default: function() {
        return {
          id: 1,
          name: "aa",
          children: [
            {
              id: 2,
              name: "bb",
              children: [],
              isShow: false,
              level: 2
            }
          ],
          isShow: false,
          level: 1,
          pid: null
        };
      }
    },
    refresh: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      editNameShow: false,
      editFormInfo: {
        title: this.coursetypes.name,
        description: this.coursetypes.description,
        id: this.coursetypes.id,
        pid: this.coursetypes.pid
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入课程名称",
            trigger: "blur"
          }
        ]
      },
      addTypeShow: false,
      addTypeFormInfo: {
        type: "",
        description: "",
        pid: -1
      },
      addTypeRules: {
        type: [{ required: true, message: "请输入类别名称", trigger: "blur" }]
      }
    };
  },
  methods: {
    editCourseName() {
      this.editNameShow = true;
      this.editFormInfo = {
        title: this.coursetypes.name,
        description: this.coursetypes.description,
        id: this.coursetypes.id,
        pid: this.coursetypes.pid
      };
    },
    editChildType() {
      this.addTypeShow = true;
      this.addTypeFormInfo.type = "";
      this.addTypeFormInfo.description = "";
      this.addTypeFormInfo.pid = this.coursetypes.id;
    },
    deleteChildType() {
      console.log(
        this.coursetypes,
        "deleteChildType deleteChildType deleteChildType deleteChildType"
      );
      console.log(this.refresh, "this.refresh");
      const toRemoveArr = [];
      function recursive(toDeleteArr) {
        for (let i = 0; i < toDeleteArr.length; i++) {
          toRemoveArr.push(toDeleteArr[i].id);
          if (toDeleteArr[i].children.length > 0) {
            recursive(toDeleteArr[i].children);
          }
        }
      }
      recursive([this.coursetypes]);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteOnlineTrainingCategory(toRemoveArr).then(
            () => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.refresh();
            },
            () => {
              this.$message.error("删除失败");
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitEditFormInfo() {
      this.$refs.editform.validate(valid => {
        if (valid) {
          const data = {
            name: this.editFormInfo.title,
            description: this.editFormInfo.description,
            id: this.editFormInfo.id,
            pid: this.editFormInfo.pid
          };
          putOnlineTrainingCategory(data)
            .then(res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.refresh();
              this.editNameShow = false;
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    cancelAddType() {
      this.addTypeShow = false;
    },
    submitAddType() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          const data = {
            name: this.addTypeFormInfo.type,
            description: this.addTypeFormInfo.description,
            pid: this.addTypeFormInfo.pid
          };
          postOnlineTrainingCategory(data)
            .then(res => {
              this.addTypeShow = false;
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.refresh();
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.course-wrapper {
  display: flex;
  justify-content: space-between;
  height: 50px;
  border-bottom: 1px solid #eee;
  align-items: center;
  margin: 0px 10px;
}
.down-triangle {
  width: 20px;
  height: 20px;
  background-image: url("../../assets/home/下三角.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.right-triangle {
  width: 20px;
  height: 20px;
  background-image: url("../../assets/home/右三角.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
</style>
