<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '5px' }" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">选择门类档案</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
      <div>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 160px)">
        <el-tree key="1" v-show="!isDirSeqTree" highlight-current v-loading='treeLoading' :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.childClass.length > 0" 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" />
            <!-- <i style="margin-right: 5px; color: rgb(255, 207, 92)" v-if="data.childClass.length > 0"
              class="iconfont icon-folder-open-fill" />
            <i style="margin-right: 5px; color: rgb(78, 140, 238)" v-else class="iconfont icon-wenjian" /> -->
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
        <el-tree key="2" v-show="isDirSeqTree" highlight-current :expand-on-click-node=false :data="dirTreeData"
          v-loading="dirTreeLoading" :props="defaultDirProps" :load="loadDirNode" @node-click="handleDirNodeClick" lazy>
          <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"
              class="iconfont icon-folder-open-fill" />
            <svg-icon icon-class="wj" v-else style="margin-right: 5px; color: rgb(255, 207, 92)"
              class="iconfont icon-wenjian" />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
        </el-scrollbar>
      </div>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm' :body-style="{ padding: '5px' }">
      <right-table-box ref="table" @handleNodeClick='handleNodeClick' @triggerTree="triggerTree" :fondsList="fondsList"
        :isDirSeqTree="isDirSeqTree" :treeRow='treeRow' :Alltable="Alltable">
      </right-table-box>
    </el-card>
  </div>
</template>
<script>
  import {
    getTree,
    getTable,
    getDirTree,
    findTreeChildren,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    getFindList
  } from "@/api/system-management/templateSetting"
  import {
    dragControllerDiv
  } from "@/utils/common"
  import {
    getFondWithPage
  } from "@/api/system-management/allAdministration";
  import rightTableBox from "./components/rightTableBox";
  export default {
    data() {
      return {
        status: false,
        treeLoading: false,
        treeData: [],
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        treeRow: {},
        Alltable: [],
        fondsList: [],
        defaultDirProps: {
          children: "children",
          label: "title",
          isLeaf: 'isLeaf'
        },
        isDirSeqTree: false, // 是否目录序列树
        dirTreeData: [], // 目录序列树
        dirTreeLoading: false, // 目录序列树loading
        eleTable: {}, // 按钮对应的table
        eleKey: '', // 按钮对应的table key
      }
    },
    components: {
      rightTableBox
    },
    watch: {
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '22%';
            cardForm.width = '77%';
          }
        }
      }
    },
    methods: {
      btns() {
        this.status = !this.status
      },
      getFonds() {
        getFondWithPage({
          limit: 1000
        }).then(res => {
          this.fondsList = res.body.list;
        });
      },
      initGetTree() {
        this.treeLoading = true
        let data = {
          className: "档案",
        };
        getTree(data).then((res) => {
          this.treeLoading = false
          if (res.success) {
            this.treeData = res.body.list;
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          this.treeLoading = false
        });
      },
      handleNodeClick(data) {
        this.treeRow = data
        if (data.classType === "C") {
          let params = {
            classId: data.id,
          };
          let userData = {
            userId: sessionStorage.getItem("userid"),
            type: this.treeRow.id
          }
          getTable(params)
            .then((res) => {
              res.body.InterfaceSystem.forEach((item) => {
                let ruleForm = {};
                let form = JSON.parse(item["interfaceShow"]);
                let interfaceQuery = JSON.parse(item["interfaceQuery"])
                form.forEach((ele) => {
                  this.$set(ruleForm, ele.fieldName, "");
                  if (ele.width === 8) {
                    ele.width = "33%";
                  }
                  if (ele.width === 12) {
                    ele.width = "50%";
                  }
                  if (ele.width === 25) {
                    ele.width = "100%";
                  }
                });
                interfaceQuery.forEach(ele => {
                  if (ele.ctype === 'select') {
                    getFindList({
                      type: ele.note.type
                    }).then(res => {
                      ele.note.note = res.body.list
                    })
                  }
                })
                this.$set(item, "search", interfaceQuery); //搜索
                this.$set(item, "form", form); //添加
                this.$set(item, "ruleForm", ruleForm); //表单
                this.$set(item, "tableData", JSON.parse(item["tableShow"])); //表格
                this.$set(item, "isShow", false);
                this.$set(item, "tableLoading", false);
                this.$set(item, "selectTable", []);
                this.$set(item, "pagination", {
                  pageSize: 50,
                  pageNum: 1,
                  total: 0,
                });
                this.$set(item, "tableData", []);
              });
              this.Alltable = res.body.InterfaceSystem;

            }).then(res => {
              this.$nextTick(() => {
                this.$refs.table.clickSearch(0, 1, 1);
              })
            })
        }
      },
      triggerTree(key) {
        this.eleKey = key;
        this.eleTable = this.Alltable.filter((item, index) => key === index)[0]
        this.isDirSeqTree = !this.isDirSeqTree; // 目录序列树
        if (this.isDirSeqTree) {
          this.getDirTree();
          this.$refs.table.getQuerySet(this.eleTable)
        } else {
          this.$nextTick(() => {
            this.$refs.table.clickSearch(0, 1, 1);
          })
        }
      },
      // 目录序列树
      async getDirTree(ele) {
        this.dirTreeLoading = true;
        const params = {
          entityId: this.eleTable.entityId,
          tableName: this.eleTable.tableName,
          userId: parseInt(sessionStorage.getItem("userid")),
          mode: 2, // 已入库
          type: 1
        };
        getDirTree(params)
          .then(res => {
            this.dirTreeLoading = false;
            if (res.success) {
              this.dirTreeData = res.body.list;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.dirTreeLoading = false;
          });
      },
      loadDirNode(node, resolve) {
        if (node.level === 0) {
          return resolve(this.dirTreeData);
        }
        if (node.level === 1) {
          return resolve(this.dirTreeData[0].children);
        }
        let data = [];
        const params = {
          entityId: this.eleTable.entityId,
          tableName: this.eleTable.tableName,
          userId: parseInt(sessionStorage.getItem("userid")),
          mode: 2, // 已入库
          type: 1,
          key: node.data.key,
          level: node.data.level
        };
        findTreeChildren(params).then(res => {
          data = res.body.list;
          setTimeout(() => {
            resolve(data);
          }, 500);
        });
      },
      handleDirNodeClick(data) {
        /*const params = {
          entityId: this.eleTable.entityId,
          tableName: this.eleTable.tableName,
          userId: parseInt(sessionStorage.getItem("userid")),
          classId: this.treeRow.id, // 门类id
          mode: 2, // 已入库
          type: 1,
          keys: data.key,
          page: 1,
          limit: 10
        }
        // 根据目录序列树查询右侧表格
        this.$refs.table.clickDirSearch(params, this.eleKey); */
        this.$refs.table.dirNodeClick(data.key, this.eleKey)
      },
    },
    mounted() {
      dragControllerDiv()
    },
    created() {
      this.getFonds()
      this.initGetTree();
      this.treeType = this.$getMenuId(
        sessionStorage.getItem("funcTypeCodeList"),
        this.$route.path
      );
    }
  }

</script>
<style lang='scss' scoped>
  .box {
    display: flex;
    justify-content: space-around;
    height: 100%;

    .tree-box {
      width: 22%;

      background-color: #fff;
      padding: 5px 10px;


      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }
    }

    .form-box {
      width: 77%;
      height: calc(100vh - 90px);
      overflow-y: auto;

      background-color: #fff;
      padding: 5px 10px;
    }
  }

</style>
