<template>
  <div id="wx_data_public">
    <div class="left-div">
      <el-input class="public-input" placeholder="输入关键字进行过滤" suffix-icon="el-icon-search"
        v-model="filterText"></el-input>
      <el-tree class="myTree" :data="tree_data" node-key="id"  :expand-on-click-node="false"
        :filter-node-method="filterNode"  :default-expanded-keys="[this.fl_type]" :props="defaultProps"
         ref="tree" :current-node-key="this.fl_type"
         :check-strictly="true"
         :highlight-current="false"
         :show-checkbox="true"
         @check="boxOnCheck"
         draggable
         :allow-drop="allowDrop"
         @node-drag-start="nodeDragStart"
         @node-drag-end="nodeDragEnd"
        :indent=1>
          <!-- @node-click="handleNodeClick" -->
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="first-span" :title="node.label">{{ node.label }}</span>
          <span class="list-span">
            <el-button type="text" size="mini" @click="() => append(node, data)">
              <i class="el-icon-circle-plus" title="添加子节点"></i>
            </el-button>
            <el-button type="text" size="mini" @click="() => edit(node, data)">
              <i class="el-icon-edit-outline" title="编辑机构"></i>
            </el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">
              <i class="el-icon-error" title="删除子节点"></i>
            </el-button>
            <!-- <el-button
              class="import"
              type="text"
              size="mini"
              :style="{
                display: getparentNode(node) == 25 ? '' : 'none !important',
              }"
            >
              <i class="el-icon-upload" @click="importExcelData(data)"></i>
            </el-button> -->
          </span>
        </span>
      </el-tree>
      <div class="checkDiv" v-if="checkList.length>0">
        <div style="width: 100%;font-size: 13px;font-weight: 900;margin-bottom: 10px;">
          <span>当前已选择项：</span>
        </div>
        <div v-for="(item) in checkList" class="checkList">
          <div style="display: flex;align-items: center;">
            <span>{{ item.label }}</span>
            <i class="el-icon-close" style="font-size: 15px;cursor: pointer;margin-left: 3px;" @click="deleteBox(item)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="right-div">
      <component :is="currentRole" :clientDetails="clientDetails_s" :treeData="tree_data" :psxzTreeData="psxz_tree_data" ref="mychild" />
    </div>
    <el-dialog title="新增文件夹" :visible.sync="dialogVisible">
      <span class="dialogContent"><span><span style="color:red">*</span>名称：</span>
        <el-input v-model="name" placeholder="请输入名称"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_xzzj()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑文件夹" :visible.sync="dialogVisible_edit">
      <span class="dialogContent"><span><span style="color:red">*</span>名称：</span>
        <el-input v-model="name_edit" placeholder="请输入名称"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="edit_xzzj()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post, delete_util } from "../../util/http_util";
import XLSX from "xlsx";
import navs from "./wxk_public.vue";
// import navs1 from "./znjsfx.vue";
let id = 1000;
export default {
  components: { navs },
  data() {
    return {
      clientDetails_s: { type: [this.fl_type], module_name: this.module_name, type_folder: this.type_folder, fl_type: this.fl_type},
      currentRole: "navs",
      tree_data: [], //左侧树结构的数据
      psxz_tree_data:[],//特殊结构--评审库
      dialogVisible: false, //新增子节点弹出框
      dialogVisible_edit: false,
      name_edit: '',
      name: "", //新增子节点的名称
      this_data: "",
      this_node: "",
      filterText: "",
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      module_name: '',
      fl_type: '',
      type_folder: '',
      nodeClickList: [],
      checkList:[],
    };
  },
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  methods: {
    nodeDragStart(node, evt){
      if(node.level == 1){
         this.$message.info("根节点不能转移");
          return;
      }
    },
    nodeDragEnd(sNode, eNode, position, evt){
      console.log(eNode)
      if(eNode == null || sNode.id == eNode.id){
         return;
      }
      let str = ''
      if(position=='inner'){//内部
        str = "此操作永久将"+ sNode.data.label+ "及其下所有文件夹转移到" + eNode.data.label + "中, 是否继续?";
      }else{
        str = "此操作永久将"+ sNode.data.label+ "及其下所有文件夹转移到和" + eNode.data.label + "同级中, 是否继续?";
      }
      this.$confirm(
        str,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(res=>{
        return post("api/rest/3z/document/moveDocumentTreeItem", {
          id: sNode.data.id, //当前节点
          destCode: position=='inner'?eNode.data.code:eNode.data.level==1?null:eNode.data.parentCode, //目标节点
          level: position=='inner'?eNode.data.level+1:eNode.data.level//目标节点
        });
      }).then(res=>{
          this.$message.success("转移成功");
      }).catch(err=>{
          if(err instanceof Object) {
            this.$message.info(err.msg);
          } else {
            this.$message.info("已取消");
          }
          this.query_tree();
      });
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.level==1) {
        // this.$message.info("不可转移至根节点");
        return false
      }else{
        return true
      }
    },
    deleteBox(i){
      this.checkList = this.checkList.filter(item=> item.id!=i.id);
      this.$refs.tree.setCheckedKeys(this.checkList.map((item)=> {return item.id}));
      this.currentRole = "navs";
      // this.nodeClickList = [node.id];
      this.clientDetails_s = { type: this.checkList.map((item)=> {return item.id}), module_name: this.module_name, type_folder: this.type_folder, fl_type: this.fl_type};
    },
    boxOnCheck(node,data){
      this.checkList = data.checkedNodes;
      this.currentRole = "navs";
      // this.nodeClickList = [node.id];
      this.clientDetails_s = { type: data.checkedKeys, module_name: this.module_name, type_folder: this.type_folder, fl_type: this.fl_type};
    },
    edit(node, data) {
      this.name_edit = data.label;
      this.dialogVisible_edit = true;
      this.this_data = data;
      this.this_node = node;
    },
    edit_xzzj() {
      if (this.name_edit.trim() == "") {
        this.$message({
          type: "warning",
          message: "名称不能为空",
        });
        return;
      }
      let paramDatas = {
        id: this.this_data.id,
        label: this.name_edit.trim(),
      };
      post("api/rest/3z/document/updateDocumentTreeItem", paramDatas)
        .then((data) => {
          if (data == 1) {
            this.$message({
              type: "success",
              message: "文件夹编辑成功",
            });
            this.dialogVisible_edit = false;
            this.$refs.mychild.searchs(1);
            this.query_tree();
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    //添加子模块弹出框
    append(node, data) {
      this.name = "";
      this.dialogVisible = true;
      this.this_data = data;
      this.this_node = node;
    },
    //新增文件夹确定按钮
    add_xzzj() {
      if (this.name.trim() == "") {
        this.$message({
          type: "warning",
          message: "名称不能为空",
        });
        return;
      }
      let paramDatas = {
        label: this.name.trim(),
        level: this.this_node.data.level + 1,
        module: this.module_name,
        parentCode: this.this_node.data.code,
        createId: this.$store.state.userInfo.account,
      };
      post("api/rest/3z/document/addDocumentTreeItem", paramDatas)
        .then((data) => {
          if (data == 1) {
            this.$message({
              type: "success",
              message: "文件夹新增成功",
            });
            this.dialogVisible = false;
            this.query_tree();
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    //删除子模块
    remove(node, datas) {
      this.$confirm(
        "此操作将永久删除该文件夹以及其下所有文件夹, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          delete_util(
            "api/rest/3z/document/removeDocumentTreeItem/" + node.data.id
          )
            .then((data) => {
              if (data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
                this.$refs.mychild.searchs(1);
                // this.query_tree();
              }
            })
            .catch((err) => {
              this.$message.warning(err.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查询tree数据
    query_tree() {
      this.tree_data = [];
      get("api/rest/3z/document/queryDocumentTree?module=" + this.module_name)
        .then((res) => {
          this.tree_data = [{
            id: this.fl_type,
            label: '文档列表',
            level: 0,
            children: res
          }];
          this.psxz_tree_data = res.filter(item =>item.label=='评审库');

          this.currentRole = "navs";
          // let arr = [this.fl_type];
          // if (res.length > 0) {
          //   arr.push(res[0].id)
          // }
          // this.clientDetails_s = { type: arr, module_name: this.module_name, type_folder: this.type_folder, fl_type: this.fl_type};
          this.clientDetails_s = { type: [], module_name: this.module_name, type_folder: this.type_folder, fl_type: this.fl_type};
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    filterNode(value, data) {
      if (value.indexOf('&') > -1) {
        let stringTemp;
        for (let index = 0; index < value.split('&').length; index++) {
          if (value.split('&')[index]) {
            let tmp = data.label.indexOf(value.split('&')[index]) !== -1;
            if (index == 0) {
              stringTemp = tmp;
            } else {
              stringTemp = stringTemp && tmp;
            }
          }
        }
        return stringTemp;
      } else if (value.indexOf('|') > -1) {
        let stringTemp;
        for (let index = 0; index < value.split('|').length; index++) {
          if (value.split('|')[index]) {
            let tmp = data.label.indexOf(value.split('|')[index]) !== -1;
            if (index == 0) {
              stringTemp = tmp;
            } else {
              stringTemp = stringTemp || tmp;
            }
          }
        }
        return stringTemp;
      } else {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
    //节点点击事件
    handleNodeClick(node, data) {
      this.currentRole = "navs";
      this.nodeClickList = [node.id];
      if (data.childNodes.length > 0) {
        this.nodeClickList.push(data.childNodes[0].data.id)
      }
      this.clientDetails_s = { type: this.nodeClickList, module_name: this.module_name, type_folder: this.type_folder, fl_type: this.fl_type};
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    clientDetails: function (val) {
      this.module_name = val.module_name;
      this.fl_type = val.fl_type;
      this.type_folder = val.type_folder;
      this.query_tree();
    },
  },
};
</script>
<style lang="scss">
#wx_data_public {
  width: calc(100% - 0px);
  height: calc(100% - 0px);

  .left-div {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    float: left;
    .checkDiv{
      position: absolute;
      max-height: 100px;
      overflow-y: auto;
      bottom: 20px;
      background: #7f7f7f17;
      display: flex;
      flex-wrap: wrap;
      gap: 7px 12px;
      box-sizing: border-box;
      width: 300px;
      padding: 10px 10px 14px;
    }
    .checkList{
      font-size: 12px;
      padding: 3px 9px;
      background: #5757578f;
    }
    input {
      color: white;
      background-color: transparent;
    }

    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
    }

    .el-button+.el-button {
      margin-left: 0px !important;
    }

    .myTree>.el-tree-node>.el-tree-node__content .el-checkbox {
      display: none;
    }

    .el-tree {
      color: white;
      background: transparent;
      height: calc(100% - 150px);
      margin-top: 10px;

      .el-tree-node__content {
        height: 40px;
        // .el-icon-circle-plus {
        //   display: none;
        // }
        // .el-icon-error {
        //   display: none;
        // }
        // .el-icon-upload {
        //   display: none;
        // }
        // .el-icon-edit-outline {
        //   display: none;
        // }
        // .list-span{
        //   display: none;
        // }
      }

      .el-tree-node {
        position: relative;
        padding-left: 0px; // 缩进量
      }

      .el-tree-node__children {
        padding-left: 15px; // 缩进量
      }

      // 竖线
      .el-tree-node::before {
        content: "";
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        // top: -17px;
        border-width: 1px;
        border-left: 1px solid #1895a2;
      }

      // 当前层最后一个节点的竖线高度固定
      .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
      }

      // 横线
      .el-tree-node::after {
        content: "";
        width: 13px;
        height: 20px;
        position: absolute;
        left: -3px;
        top: 20px;
        border-width: 1px;
        border-top: 1px solid #1895a2;
      }

      // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
      &>.el-tree-node::after {
        border-top: none;
      }

      &>.el-tree-node::before {
        border-left: none;
      }

      // 展开关闭的icon
      .el-tree-node__expand-icon {
        font-size: 16px;

        // 叶子节点（无子节点）
        &.is-leaf {
          color: transparent;
          // display: none; // 也可以去掉
        }
      }
    }

    .el-tree>.el-tree-node>.el-tree-node__content {
      height: 40px;
      background-image: url(../../assets/img/yqjc/24.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .el-icon-error {
        display: none !important;
      }

      .el-icon-edit-outline {
        display: none !important;
      }
    }

    .el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content {
      height: 40px;
      // background-image: url(../../assets/img/yqjc/24.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
      font-size: 16px !important;
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      width: 82%;

      .first-span {
        width: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      // .list-span{
      //   position: absolute;
      //   right: 20px;
      // }
    }

    .el-tree>.el-tree-node>.el-tree-node__children {
      background-color: #1d2d46ad !important;
      width: calc(100% - 15px);
      height: calc(100% - 44px);
      overflow: auto;
      // position: relative;
      // .el-tree-node{
      //   width: 300px;
      // }
    }

    .el-tree-node:focus>.el-tree-node__content {
      background-color: #00648a96 !important;
      // border-radius: 5px;
    }

    .el-tree-node__content:hover,
    .el-tree-node__content:focus {
      background-color: #00638a50 !important;
      // border-radius: 5px;
    }

    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background-color: #00648a96 !important;
      // border-radius: 5px;
    }

    .el-icon-circle-plus {
      font-size: 16px;
      color: #00a6f5;
    }

    .el-icon-edit-outline {
      font-size: 16px;
      color: #2ae209;
    }

    .el-icon-error {
      font-size: 16px;
      color: #ff5454;
    }

    .el-icon-upload {
      font-size: 16px;
      color: #2bce0e;
    }
  }

  .right-div {
    width: calc(100% - 310px);
    height: 100%;
    float: left;
    margin-left: 10px;
    background: url("../../assets/img/yqjc/02.png") no-repeat;
    background-size: 100% 100%;
  }

  .el-dialog {
    width: 400px;
    background-color: #1d2d47;

    .el-dialog__header {
      text-align: center;

      .el-dialog__title {
        color: white;
      }
    }

    .el-dialog__body {
      .dialogContent {
        span {
          float: left;
          margin-top: 5.5px;
          color: white;
        }

        .el-input {
          width: 80%;

          input {
            height: 30px;
          }
        }
      }
    }
  }

  #impor_file .el-dialog__body {
    text-align: center;
  }

  .importData .el-dialog {
    width: 35%;

    td,
    th {
      text-align: center;
    }
  }

  .el-dialog {
    .el-input__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }

    .el-textarea__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }
  }
}
</style>
