<template>
  <div class="treeList">
    <div class="title commons-title">
      {{ title }}
    </div>
    <div class="search">
      <el-input v-model="search" placeholder="请输入搜索内容" clearable @clear="search = ''" @keyup.enter="searchChange"></el-input>
      <el-button type="primary" plain @click="add({ id: '-1' })">
        <el-icon :size="20">
          <Plus />
        </el-icon>
      </el-button>
    </div>
    <el-tree
      :data="data"
      :props="{ children: 'netdiskList' }"
      ref="tree"
      node-key="id"
      @node-click="treeChange"
      default-expand-all
      :expand-on-click-node="false"
      :filter-node-method="filterNode">
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div style="flex: 1">{{ data.name }}</div>
          <div style="float: right">
            <el-icon :size="17" @click.stop="() => edit(node, data)">
              <Edit />
            </el-icon>
            <el-icon :size="17" style="margin-left: 10px" @click.stop="() => add(data)">
              <Plus />
            </el-icon>
            <el-icon :size="17" style="margin-left: 10px" @click.stop="() => del(data)">
              <Delete />
            </el-icon>
          </div>
        </div>
      </template>
    </el-tree>
    <el-dialog :title="treeModalType == 'add' ? '添加目录' : '编辑目录'" v-model="treeModal" width="400" v-loading="loading">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit"> </byForm>
      <template #footer>
        <el-button @click="treeModal = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="large" :loading="submitLoading">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import byForm from "@/components/byForm/index";

const props = defineProps({
  title: {
    type: String,
    default: "目录",
  },
  submitType: {
    type: String,
    default: "1",
  },
  data: {
    type: Array,
    default: [],
  },
});
onMounted(() => {});
const search = ref("");
const emit = defineEmits(["update:modelValue"]);
const { proxy } = getCurrentInstance();
const treeChange = (e) => {
  if (proxy.type == "radio") {
    emit("update:modelValue", e.id);
    emit("change", e);
  } else {
    emit("change", e);
  }
};
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
const searchChange = () => {
  proxy.$refs.tree.filter(search.value);
};
const submit = ref(null);
let treeModal = ref(false);
let submitLoading = ref(false);
let treeModalType = ref("add");
let formData = reactive({
  data: {
    type: 1,
    parentFolderId: "-1",
    name: "",
  },
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
let rules = ref({
  name: [{ required: true, message: "请输入目录名称", trigger: "blur" }],
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "name",
      label: "目录名称",
      required: true,
    },
  ];
});
const add = (data) => {
  treeModalType.value = "add";
  formData.data = {
    type: 1,
    parentFolderId: data.id,
    name: "",
  };
  submitLoading.value = false;
  treeModal.value = true;
};
const edit = (node, data) => {
  treeModalType.value = "edit";
  formData.data = {
    type: 1,
    parentFolderId: data.parentFolderId,
    name: data.name,
    id: data.id,
  };
  submitLoading.value = false;
  treeModal.value = true;
};
const del = (data) => {
  ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    proxy.post("/netdisk/delete", [data.id]).then(() => {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getTreeList();
      emit("treeDelete");
    });
  });
};
const submitForm = () => {
  submit.value.handleSubmit(() => {
    submitLoading.value = true;
    proxy.post("/netdisk/" + treeModalType.value, formData.data).then(
      () => {
        ElMessage({
          message: treeModalType.value == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        getTreeList();
        treeModal.value = false;
      },
      (err) => {
        console.log(err);
        submitLoading.value = false;
      }
    );
  });
};
const getTreeList = () => {
  emit("changeTreeList");
};
</script>

<style lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeList {
  display: block;
  height: 100%;
  background: #fff;
  padding: 20px;
  .search {
    margin-bottom: 20px;
    .el-input {
      width: calc(100% - 70px);
      margin-right: 10px;
      text-align: center;
    }
  }
}
</style>
