<template>
  <div>
    <el-tree
      :data="tableData"
      node-key="id"
      :default-expand-all="false"
      :expand-on-click-node="false"
      :highlight-current="true"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data, node)">
            + 添加
          </el-button>
          <el-button type="text" size="mini" @click="() => edit(node, data)">
            编辑
          </el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm" label-width="110px">
        <el-form-item :label="label">
          <el-input v-model="dialogForm.jjmkl_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="delVisible" width="30%">
      <span>确认删除?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="delConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { lbgl_detail, lbgl_edit, lbgl_add, lbgl_del } from "./api";
// import ItemTable from "@/components/ItemTable/index.vue";
export default {
  name: "index",
  //   comments: { ItemTable },
  data() {
    return {
      isDetail: false,
      tableData: [],
      title: "",
      label: "",
      level: 1,
      isEdit: false,
      dialogFormVisible: false,
      delVisible: false,
      dialogForm: {
        jjmkl_name: "",
        jjmkl_pid: "",
        jjmkl_level_type: "",
        jjmkl_path: "",
      },
      jjmkl_id: "",
    };
  },
  methods: {
    getDetail() {
      let data = {
        jjmkl_root_id: this.$route.params.id
      };
      lbgl_detail(data).then((res) => {
        if (res.code == "1") {
          this.initArr = [];
          this.tableData = res.data.one_info;
          let allData = res.data.one_info;
        }
      });
    },
    append(data, node) {
      this.isEdit = false;
      this.dialogFormVisible = true;
      this.dialogForm.jjmkl_name = "";
      if (node.level == 1) {
        this.label = "名师类别";
      } else if (node.level == 2) {
        this.label = "教学类别";
      } else if (node.level == 3) {
        this.label = "进阶条件";
      } else {
        this.label = "进阶条件";
      }
      if (node.level == 4) {
        this.dialogForm.jjmkl_pid = data.pid;
        this.dialogForm.jjmkl_level_type = node.level;
        this.dialogForm.jjmkl_path = data.pid;
      } else {
        this.dialogForm.jjmkl_pid = data.id;
        this.dialogForm.jjmkl_level_type = node.level + 1;
        this.dialogForm.jjmkl_path = data.id;
      }
      this.title = "添加";
    },

    edit(node, data) {
      this.isEdit = true;
      console.log(data.id);
      this.jjmkl_id = data.id;
      this.dialogForm.jjmkl_name = data.label;
      this.title = "编辑";
      if (node.level == 1) {
        this.$message({
          type: "warning",
          message: "考核类别无法修改",
        });
      } else {
        this.dialogFormVisible = true;
        this.dialogForm.jjmkl_pid = data.pid;
        this.dialogForm.jjmkl_level_type = node.level;
        this.dialogForm.jjmkl_path = data.pid;
        if (node.level == 2) {
          this.label = "名师类别";
        } else if (node.level == 3) {
          this.label = "教学类别";
        } else {
          this.label = "进阶条件";
        }
      }
    },
    remove(node, data) {
      if (node.level == 1) {
        this.$message({
          type: "warning",
          message: "不可删除!",
        });
      } else {
        this.delVisible = true;
        this.jjmkl_id = data.id;
      }
    },
    delConfirm() {
      let data = {
        jjmkl_id: this.jjmkl_id,
      };
      lbgl_del(data).then((res) => {
        if (res.code == "1") {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.delVisible = false;
          this.getDetail();
        }
      });
    },
    formSubmit() {
      if (!this.dialogForm.jjmkl_name) {
        this.$message({
          type: "warning",
          message: "请填写信息!",
        });
        return;
      }
      let data = {
        issubmit: "1",
        jdbg_jsldgl_myjsjxkh_lbgl: {
          jjmkl_name: this.dialogForm.jjmkl_name,
          jjmkl_pid: this.dialogForm.jjmkl_pid,
          jjmkl_level_type: this.dialogForm.jjmkl_level_type,
          jjmkl_path: this.dialogForm.jjmkl_path,
        },
      };
      if (!this.isEdit) {
        lbgl_add(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.getDetail();
            this.dialogFormVisible = false;
          }
        });
      } else {
        Object.assign(data, {
          jjmkl_id: this.jjmkl_id,
        });
        lbgl_edit(data).then((res) => {
          if (res.code == "1") {
            this.$message({
              type: "success",
              message: "编辑成功!",
            });
            this.getDetail();
            this.dialogFormVisible = false;
          }
        });
      }
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>