<template>
  <div class="type-total-wrapper">
    <div class="tools-wrapper">
      <el-button type="primary" @click="addCourseTypeShow"
        >新增课程分类</el-button
      >
    </div>
    <div class="table-total-wrapper">
      <div class="type-title-wrapper">
        <div style="margin-left: 40px;">课程分类名称</div>
        <div style="margin-right:80px;">操作</div>
      </div>
      <coursetype
        v-for="item in courseList"
        :coursetypes="item"
        :refresh="initCourseType"
      />
    </div>
    <el-dialog title="新增课程分类" :visible.sync="addCourseType" width="70%">
      <el-form
        v-if="addCourseType"
        ref="addform"
        :model="addCourseFormInfo"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item prop="name" label="课程分类名称">
          <el-input v-model="addCourseFormInfo.name" />
        </el-form-item>
        <el-form-item prop="description" label="课程分类描述">
          <el-input
            v-model="addCourseFormInfo.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="addCourseType = false">取消</el-button>
        <el-button type="primary" @click="submitCourseType">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import coursetype from "../components/coursetype.vue";
import {
  getOnlineTrainingCategory,
  postOnlineTrainingCategory,
  putOnlineTrainingCategory,
  deleteOnlineTrainingCategory
} from "@/api/coursecategory.js";
export default {
  components: {
    coursetype
  },
  data() {
    return {
      courseList: [
        {
          id: 1,
          name: "a",
          children: [
            {
              id: 11,
              name: "a1",
              children: [],
              isShow: false,
              level: 2
            },
            {
              id: 12,
              name: "a2",
              children: [],
              isShow: false,
              level: 2
            }
          ],
          isShow: false,
          level: 1
        },
        {
          id: 2,
          name: "b",
          children: [],
          isShow: false,
          level: 1
        },
        {
          id: 3,
          name: "c",
          children: [],
          isShow: false,
          level: 1
        }
      ],
      addCourseType: false,
      addCourseFormInfo: {
        name: "",
        description: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入课程分类名称",
            trigger: "blur"
          }
        ],
        description: [
          {
            required: true,
            message: "请输入课程分类描述",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.initCourseType();
  },
  methods: {
    async initCourseType() {
      const params = {
        page: 0,
        size: 9999
      };
      await getOnlineTrainingCategory(params).then(res => {
        res.content.forEach(item => {
          item.children = [];
          item.isShow = false;
          item.level = 1;
        });
        const category = [];
        // 给指定父 id 元素添加元素
        function addType(item) {
          const pid = item.pid;
          const id = item.id;
          // 判断自己是否已经添加过
          let isAdded = false;
          function isAddElement(item1) {
            if (item1.id === id) {
              isAdded = true;
            }
            for (const item2 of item1.children) {
              isAddElement(item2);
            }
          }

          function addElement(item1) {
            if (item1.id === pid) {
              item1.children.push(item);
              item.level = item1.level + 1;
              return;
            }
            for (const item2 of item1.children) {
              addElement(item2);
            }
          }
          for (const ele of category) {
            isAddElement(ele);
          }
          if (isAdded === false) {
            for (const ele of category) {
              addElement(ele);
            }
          }
        }
        function composeCategory(pid) {
          if (!pid) {
            for (let i = 0; i < res.content.length; i++) {
              if (res.content[i].pid) {
                composeCategory(res.content[i].pid);
                addType(res.content[i]);
              }
            }
          }
          if (pid) {
            for (let i = 0; i < res.content.length; i++) {
              if (res.content[i].id === pid && res.content[i].pid) {
                composeCategory(res.content[i].pid);
                addType(res.content[i]);
                // res.content[i].level = category[category.length - 1].level + 1
                // category[category.length - 1].children.push(res.content[i])
              } else if (res.content[i].id === pid && !res.content[i].pid) {
                if (!category.filter(item => item.id === pid).length) {
                  category.push(res.content[i]);
                }
              }
            }
          }
        }
        composeCategory();
        for (let i = 0; i < res.content.length; i++) {
          const pArray = category.filter(item => item.id === res.content[i].id);
          if (!pArray.length && !res.content[i].pid) {
            category.push(res.content[i]);
          }
        }
        this.courseList = [...category];
      });
    },
    addCourseTypeShow() {
      // addCourseTypeShow
      this.addCourseType = true;
      this.addCourseFormInfo = {
        name: "",
        description: ""
      };
    },
    submitCourseType() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          //
          const params = {
            name: this.addCourseFormInfo.name,
            description: this.addCourseFormInfo.description
          };
          postOnlineTrainingCategory(params)
            .then(res => {
              console.log(
                "postOnlineTrainingCategory poseOnlineTrainingCategory poseOnlineTrainingCategory"
              );
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.addCourseType = false;
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.type-title-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #eee;
  padding-bottom: 18px;
}
.type-total-wrapper {
  padding: 10px;
  border-radius: 5px;
  margin: 10px 10px;
  .tools-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 10px;
    background: #fff;
  }
  .table-total-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 10px;
    background: #fff;
  }
}
</style>
