<template>
  <div class="appendix-manage">
    <div class="operation-panel-list">
      <el-row :gutter="12" class="mb20">
        <el-col :span="2.5">
          <el-button
            type="primary"
            icon="el-icon-edit"
            plain
            size="mini"
            @click="handleAppendMkdir"
            >新增 目录</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="table-list">
      <el-tree
        ref="tree"
        class="tree-filter"
        :data="treeList"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <div class="tree-item">
            <i
              class="el-icon-folder-opened"
              style="color: rgba(254, 210, 89, 1)"
            />
            <span
              style="margin-left: 5px; font-size: 12px; font-weight: bold"
              >{{ node.label }}</span
            >
          </div>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => handleEditMkdir(node, data)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => handleRemoveMkdir(node, data)"
            >
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <el-dialog
      width="420px"
      :show-close="false"
      :visible.sync="dialogModalState"
      append-to-body
    >
      <template slot="title">
        <div class="left-content">
          <el-image
            style="width: 15px"
            :src="home_source_image"
            fit="scale-down"
          />
          <span>{{ dialogModalTitle }}</span>
        </div>
        <div class="right-content">
          <el-tooltip effect="light" content="保存" placement="top">
            <i class="el-icon-success" @click="handleSaveMkdir" />
          </el-tooltip>
          <el-tooltip effect="light" content="关闭" placement="top">
            <i class="el-icon-error" @click="handleCancelMkdir" />
          </el-tooltip>
        </div>
      </template>
      <el-form
        ref="form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="上级目录" prop="parentId">
          <el-cascader
            v-model="form.parentId"
            size="small"
            style="width: 100%"
            :options="treeList"
            :props="{
              checkStrictly: true,
              expandTrigger: 'hover',
              value: 'id',
              label: 'menuName',
              children: 'children',
            }"
          />
        </el-form-item>
        <el-form-item label="目录名称" prop="menuName">
          <el-input v-model="form.menuName" class="default-width" size="mini" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  searchMkdirList,
  insertOrUpdateMkdir,
  deleteMkdirData,
} from "@/api/system/appendix.js";
import { handleTree2 } from "@/utils/ruoyi.js";

export default {
  data() {
    return {
      loading: false,
      dialogModalState: false,
      dialogModalTitle: "",
      form: {
        parentId: [],
        menuName: "",
      },
      queryParams: {},
      treeList: [],
      defaultProps: {
        children: "children",
        label: "menuName",
      },
      home_source_image: require("../../../../assets/logo/logo.png"),
      rules: {
        parentId: [{ required: false, message: "", trigger: "blur" }],
        menuName: [
          { required: true, message: "目录名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      searchMkdirList().then(({ data }) => {
        this.treeList = handleTree2(data, "id", "parentId", "children");
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleAppendMkdir() {
      this.dialogModalTitle = "新增目录";
      this.dialogModalState = true;
    },
    handleEditMkdir(node, rowData) {
      Object.assign(this.form, rowData);
      this.dialogModalState = true;
    },
    handleRemoveMkdir(node, rowData) {
      deleteMkdirData(rowData?.id).then((data) => {
        this.search();
      });
    },
    handleSaveMkdir() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            parentId: "",
          };
          if (
            Object.prototype.toString.call(this.form.parentId) ===
              "[object Array]" &&
            this.form.parentId.length > 0
          ) {
            params.parentId = this.form.parentId.at(-1);
          }
          insertOrUpdateMkdir(params).then(({ code, data, message }) => {
            if (code === 200) {
              this.$message.success("添加成功！");
              this.$refs["form"].resetFields();
              this.handleCancelMkdir();
              this.search();
            } else {
              this.$message.error(message);
            }
          });
        }
      });
    },
    handleCancelMkdir() {
      this.form = {
        id: "",
        parentId: "",
        menuName: "",
      };
      this.dialogModalState = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.table-list {
  display: flex;
  .tree-filter {
    width: 100%;
    .custom-tree-node {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.appendix-manage {
  height: calc(100vh - 95px);
  overflow-y: scroll;
  padding: 20px;
  .operation-panel-list {
    .mb20 {
      display: flex;
      align-items: center;
    }
  }
}
::v-deep .el-tree-node__content {
  height: 35px !important;
}
.left-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  > span {
    padding-left: 6px;
  }
}
.right-content {
  font-size: 24px;
  i {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 3px;
  }
  .el-icon-success {
    color: rgba(0, 160, 233, 1);
  }
  .el-icon-error {
    color: rgba(235, 57, 65, 1);
  }
}
::v-deep .el-dialog {
  border-radius: 6px;
}
::v-deep .el-dialog__header {
  padding: 4px 10px !important;
  border-radius: 6px;
  font-weight: 400;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(245, 247, 250, 1);
}
::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
</style>
