<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 class="tree">
          <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: '0px' }">
      <right-table-box ref="table" @handleNodeClick="handleNodeClick" @triggerTree="triggerTree" :fondsList="fondsList"
        :treeRow="treeRow" :treeType="treeType" :isDirSeqTree="isDirSeqTree" :Alltable="Alltable"
        :showButtons="showButtons"></right-table-box>
    </el-card>
  </div>
</template>
<script>
  import {
    getTree,
    getDirTree,
    findTreeChildren,
    getTable
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    getFondWithPageUser
  } from "@/api/system-management/allAdministration";
  import {
    getFindList
  } from "@/api/system-management/templateSetting"
  import {
    getButtonList
  } from "@/api/user"
  import {
    message,
    dragControllerDiv
  } from '@/utils/common';
  import rightTableBox from "./components/rightTableBox";
  export default {
    data() {
      return {
        status: false,
        // 树形结构数据
        treeData: [],
        treeLoading: false,
        isDirSeqTree: false, // 是否目录序列树
        dirTreeData: [], // 目录序列树
        dirTreeLoading: false, // 目录序列树loading
        fondsList: [],
        treeRow: {},
        Alltable: [],
        defaultProps: {
          children: "childClass",
          label: "className"
        },
        defaultDirProps: {
          children: "children",
          label: "title",
          isLeaf: 'isLeaf'
        },
        showButtons: {
          add: false,
          edit: false,
          del: false,
          setQuery: false,
          cataTree: false,
          gd: false,
          sxjc:false,
          plxgdh:false,
        }
      }
    },
    components: {
      rightTableBox,
      // qualityList,
      // qualityCheck,
      // qualityQuestion
    },
    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: {
      handleBatch(command, item, key) {
        // 替换
        if (command === "1") {
          this.batchReplace(item, key);
        }
        // 修改
        if (command === "2") {
          this.batchEdit(item, key);
        }
      },
      // 批量修改
      batchEdit(ele, key) {
        if (!ele.tableData.length) {
          message("warning", "暂无数据", 2000);
          return;
        }
        this.currentTableKey = key;
        //重置
        clearObjValue(this.$refs.diaEditBatch.form);
        clearObjValue(this.$refs.diaEditBatch.formTwo);
        this.$refs.diaEditBatch.formTwo.rangeType = "down";
        this.$refs.diaEditBatch.formTwo.offset = 0;
        this.$refs.diaEditBatch.total = ele.pagination.total;
        this.$refs.diaEditBatch.interfaceShow = ele.form;
        // this.$refs.diaEditBatch.tableKey = key
        let len = this.Alltable.length;
        if (key === len - 1) {
          this.$refs.diaEditBatch.enableField = "piece_no";
        }
        if (key === len - 2) {
          this.$refs.diaEditBatch.enableField = "year_folder_no";
        }
        if (key === len - 3) {
          this.$refs.diaEditBatch.enableField = "item_id";
        }
        this.getPieceData(key, "diaEditBatch");
        this.diaEditBatch = true;
      },
      // 批量替换
      batchReplace(ele, key) {
        if (!ele.tableData.length) {
          message("warning", "暂无数据", 2000);
          return;
        }
        this.currentTableKey = key;
        //重置
        clearObjValue(this.$refs.diaBatch.form);
        clearObjValue(this.$refs.diaBatch.formTwo);
        this.$refs.diaBatch.formTwo.rangeType = "down";
        this.$refs.diaBatch.formTwo.matchCase = false;
        this.$refs.diaBatch.total = ele.pagination.total;
        this.$refs.diaBatch.interfaceShow = ele.form;
        this.getPieceData(key);
        this.diaBatch = true;
      },
      getFonds() {
        getFondWithPageUser().then(res => {
          this.fondsList = res.body.list;
        });
      },
      // 获取初始化树形结构
      async 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;
          });
      },
      getButtonListqx(btnData) {
        getButtonList(btnData).then(res => {
          res.body.list.forEach(item => {
            this.showButtons[item.key] = true
          })
        })
      },
      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: 3, // 未入库
          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")),
          mode: 3, // 未入库
          type: 1,
          keys: data.key,
          page: 1,
          limit: 10
        }
        // 根据目录序列树查询右侧表格
        this.$refs.table.clickDirSearch(params, this.eleKey); */
        this.$refs.table.dirNodeClick(data.key, this.eleKey)
      },
      // 点击树形结构
      handleNodeClick(data) {
        this.treeRow = data;
        if (data.classType === "C") {
          let params = {
            classId: data.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 => {
                  if (ele.ctype === 'select') {
                    getFindList({
                      type: ele.note.type
                    }).then(res => {
                      ele.note.note = res.body.list
                    })
                  }
                  if (ele.label === '全宗号') {
                    ele.ctype = "select"
                  }
                })

                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 === 24) {
                    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, "selectTable", []);
                this.$set(item, "tableLoading", false);
                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);
              })
            });
        }
      },
      btns() {
        this.status = !this.status
      },
      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: 3, // oa
          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;
          });
      },
    },
    mounted() {
      dragControllerDiv()
    },
    created() {
      this.getFonds();
      // 获取初始化树形结构
      this.initGetTree();
      this.treeType = this.$getMenuId(
        sessionStorage.getItem("funcTypeCodeList"),
        this.$route.path
      );
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.getButtonListqx(btnData)
    }

  }

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

    .tree-box {
      width: 22%;

      background-color: #fff;
      padding: 5px 10px;
      // min-height: 720px;


      .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>
