<template>
  <el-dialog v-dialogDrag width="45%" title="目录设置" :close-on-click-modal="false" :before-close="cancel"
    :visible.sync="catalogueDia">
    <div class="page">
      <div class="tree">
        <el-tree highlight-current :expand-on-click-node="false" :data="treeData" :props="defaultProps"
          default-expand-all @node-click="handleNodeClick">
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <!--可以根据情况，以数据类型来显示不同的图标或图片-->
            <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-if="data.isLeaf === 1"
              class="iconfont icon-folder-open-fill" />
            <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
              class="iconfont icon-wenjian" />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <el-form class="form" :rules="ruletree" style="width: 55%" label-width="90px" ref="ruleForm" :model="formCata">
        <el-form-item label="上级目录">
          <el-input :disabled="formFlage.All" v-model="formCata.topCata" clearable size="mini" style="width: 90%">
          </el-input>
        </el-form-item>
        <el-form-item label="上级id">
          <el-input :disabled="formFlage.All" v-model="formCata.topId" clearable size="mini" style="width: 90%">
          </el-input>
        </el-form-item>
        <el-form-item label="当前id">
          <el-input :disabled="formFlage.All" v-model="formCata.currentId" clearable size="mini" style="width: 90%">
          </el-input>
        </el-form-item>
        <el-form-item label="目录名称" prop="cataName">
          <el-input :disabled="formFlage.All && formFlage.select" v-model="formCata.cataName" clearable size="mini"
            style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input :disabled="formFlage.All && formFlage.select" v-model="formCata.Number" clearable size="mini"
            style="width: 90%"></el-input>
        </el-form-item>
        <div>
          <el-button type="primary" size="mini" :disabled="btnFlage.add" @click="btnClick(1)">新增</el-button>
          <el-button type="primary" size="mini" :disabled="btnFlage.edit" @click="btnClick(2)">修改</el-button>
          <el-button type="primary" size="mini" :disabled="btnFlage.commit" @click="btnClick(3, 'ruleForm')">保存
          </el-button>
          <!-- @confirm="btnClick(4)" -->
          <el-popconfirm title="确定要删除吗？" confirmButtonText="确认" cancelButtonText="取消" @confirm='btnClick(4)' >
            <el-button style="margin-left: 10px" type="primary" slot="reference" size="mini" :disabled="btnFlage.del">删除
            </el-button>
          </el-popconfirm>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
  import {
    message,
    clearObjValue
  } from "@/utils/common";
  import {
    addcata,
    delcata,
    editcata
  } from "@/api/archiveUtilize/compilationResearch/editingTopics";
  export default {
    props: {
      catalogueDia: Boolean,
      treeData: Array,
      formCata: Object,
      btnFlage: Object,
      formFlage: Object,
      rowId: {
        type: String,
        default: () => "",
      },
    },
    data() {
      return {
        selectCata: {},
        btnStatus: "",
        defaultProps: {
          children: "childClass",
          label: "nodeTitle",
        },
        ruletree: {
          cataName: [{
            required: true,
            message: "请输入目录名称",
            trigger: "blur"
          }, ],
        },
      };
    },
    methods: {
      //按钮集合
      btnClick(val, formName) {
        switch (val) {
          case 1:
            this.btnStatus = 1;
            for (let key in this.btnFlage) {
              this.btnFlage[key] = true;
            }
            for (let key in this.formCata) {
              if (key != "topCata" && key != "topId") {
                this.formCata[key] = "";
              }
              if (key === "currentId") {
                this.formCata[key] = "系统自动生成";
              }
            }
            this.formCata["topId"] = this.selectCata.templateId;
            this.formCata["topCata"] = this.selectCata.nodeTitle;
            this.btnFlage["commit"] = false;
            this.formFlage.All = true;
            this.formFlage.select = false;
            // 执行代码块 1
            break;
          case 2:
            this.btnStatus = 2;
            for (let key in this.btnFlage) {
              this.btnFlage[key] = true;
            }
            this.btnFlage["commit"] = false;
            this.formFlage.select = false;
            // 执行代码块 2
            break;
          case 3:
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let data = {
                  nodeTitle: this.formCata.cataName,
                  templatePId: this.formCata.topId,
                  dataId: this.rowId,
                  isLeaf: 0,
                  sort: this.formCata.Number,
                };
                if (this.btnStatus == 1) {
                  addcata(data).then((res) => {
                    this.$emit("catalogue", this.rowId);
                    message("success", "新增成功", 2000);
                  });
                }
                if (this.btnStatus == 2) {
                  let dataX = {
                    id: this.selectCata.id,
                    nodeTitle: this.formCata.cataName,
                    sort: this.formCata.Number,
                  };
                  editcata(dataX).then((res) => {
                    this.$emit("catalogue", this.rowId);
                    message("success", "修改成功", 2000);
                  });
                }
              } else {
                console.log("error submit!!");
                return false;
              }
            });

            // 执行代码块 3
            break;
          case 4:
            this.btnStatus = 4;
            let dataF = {
              id: this.selectCata.id,
            };
            delcata(dataF).then((res) => {
              if (res.code === "100") {
                message("success", "删除成功", 2000);
                this.$emit("catalogue", this.rowId);
                clearObjValue(this.formCata);
              }
            });
            // 执行代码块 4
            break;
        }
      },
      handleNodeClick(val) {
        this.selectCata = val;
        for (let key in this.formFlage) {
          this.formFlage[key] = true;
        }
        // 按钮判断
        for (let key in this.btnFlage) {
          this.btnFlage[key] = true;
        }
        this.btnFlage["add"] = false;
        this.btnFlage["del"] = false;
        //上级目录
        this.btnFlage["edit"] = false;
        this.formCata.topCata = val.parentCatalog ?
          val.parentCatalog["nodeTitle"] :
          "";

        this.formCata.topId = val.templatePId;
        this.formCata.currentId = val.templateId;
        this.formCata.cataName = val.nodeTitle;
        this.formCata.Number = val.sort;
      },
      cancel() {
        this.$emit("cancel");
      },
    },
  };

</script>
<style lang="scss" scoped>
  .page {
    padding: 10px;
    width: 100%;
    display: flex;

    .tree {
      width: 40%;
      border-right: 1px solid rgb(238, 238, 238);
    }

    .form {
      padding-left: 20px;
    }
  }

</style>
