<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="t_tree_scrollbar">
          <!-- <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 160px)"> -->
            <!-- <el-tree ref="tree1" key="1" v-show="!isDirSeqTree" :default-expanded-keys="openNode" node-key="id"
              :highlight-current="true" v-loading='treeLoading' :data="treeData" :props="defaultProps"
              @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.child.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" />
                <span>{{ node.label }}</span>
              </span>
            </el-tree> -->
          <!-- </el-scrollbar> -->
          <el-tree highlight-current :data="treeData" :props="defaultProps" default-expand-all
              @node-click="handleNodeClick" v-loading='treeLoading'>
              <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.classType === 'L'" 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" />
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
        </div>
      </el-card>
      <el-card class="form-box" ref='cardForm' :body-style="{ padding: '5px' }">
        <t-search :search="search" @searchClick="searchClick" />
        <t-table :table-data="tableData" :table-loading="tableLoading"  />
        <el-pagination
          layout="total, prev, pager, next, sizes"
          :page-size="pagination.pageSize"
          :page-sizes="[10, 50, 100, 500,1000]"
          :current-page="pagination.pageNum"
          :total="pagination.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-card>
  </div>
</template>
<script>
import tSearch from './components/search.vue'
import tTable from './components/table.vue'
import { clearObjValue, message } from '@/utils/common';
import {
    getRecordFileTree
  } from '@/api/system-management/categoryTree'
import {
  getFindList
} from "@/api/intelligent-warehouse/warehouse-management/fileBox-management"
import {
  getTable,
  getTree
} from "@/api/archives-management/fileManagement/notStoredArchives.js";
import {getFondWithPage} from "@/api/system-management/allAdministration";
import {queryPageList} from "@/api/archives-management/dailyManagement/operationLog.js"
export default {
  components: {
    tSearch,
    tTable
  },
  data() {
    return {
      status: false,
      treeRow: {},
      Alltable: [],
      openNode: [],
      status: false,
      treeLoading: false,
      treeData: [],
      isDirSeqTree: false, // 是否目录序列树
      defaultProps: {
        children: "childClass",
        label: "className",
      },
      tableLoading: false,
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      search: {
        startDate: '',
        endDate: '',
        docType: '',
        time: []
      }
    }
  },
  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 = '20%';
          cardForm.width = '79%';
        }
      }
    }
  },
  mounted() {
    //this.queryPageList()
  },
  created(){
    this.getFonds()
    // 获取初始化树形结构
    this.initGetTree2();
    this.treeType = this.$getMenuId(
      sessionStorage.getItem("funcTypeCodeList"),
      this.$route.path
    );
  },
  methods: {
    btns() {
      this.status = !this.status
    },
    getFonds() {
      getFondWithPage({
        limit: 1000
      }).then(res => {
        this.fondsList = res.body.list;
      });
    },
    handleNodeClick(data) {
        // if (data.classType === "C") {
        if (!data.childClass || (data.childClass && data.childClass.length === 0)) {
          // 档案树和原本门类树有些字段不一样，转化下
          this.treeRow = data;
          let params = {
            classId: this.treeRow.id
          };
  
          getTable(params)
            .then((res) => {
              res.body.InterfaceSystem.forEach((item, index) => {
                if (!data.clicked && index === 0) {
                  // 第一次点击门类，提示快过期档案
                  data.clicked = true;
                  // this.getExpireList(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, "selectTable", []);
                this.$set(item, "tableLoading", false);
                this.$set(item, "pagination", {
                  pageSize: 10,
                  pageNum: 1,
                  total: 0,
                });
                this.$set(item, "tableData", []);
              });
              this.Alltable = res.body.InterfaceSystem;
            })
            .then((res) => {
              this.$nextTick(() => {
                this.queryPageList()
              })
            });
        }
      },
    // 获取初始化树形结构
    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
        }); */
        this.treeLoading = true
        getRecordFileTree()
          .then(res => {
            this.treeLoading = false
            if (res.success) {
              this.treeData = res.body.list;
            } else {
              this.$message.error(res.msg)
            }
  
            if (this.$route.query.data) {
              this.openNode = this.$route.query.data.map(Number);
              this.$nextTick(() => {
                this.$refs.tree1.setCurrentKey(this.$route.query.id);
                this.getTableGJ({
                  classId: this.$route.query.classId
                })
              })
            } else {
              this.getOpenTree()
            }
  
          })
          .catch(err => {
            this.treeLoading = false
          })
    },
    // 获取初始化树形结构
    async initGetTree2(){
      this.treeLoading = true;
      let data = {
          className: "档案"
        };
        getTree(data).then(res => {
          if(res.code == 100){
            this.treeLoading = false;
            this.treeData = res.body.list;
          }else{
            this.treeLoading = false;
            message('warning',res.msg,3000);
          }
          
        })
    },
    searchClick(val) {
      switch (val) {
        case 1:
          this.queryPageList()
          break
        case 2:
          clearObjValue(this.search)
          break
      }
    },
    queryPageList() {
      this.tableLoading = true
      const data = {
        classId:this.treeRow.id,
        startDate: this.search.time==null ? '' : this.search.time[0],
        endDate: this.search.time==null ? '' : this.search.time[1],
        page: this.pagination.pageNum,
        limit: this.pagination.pageSize,
      }
      queryPageList(data).then(res => {
        this.tableData = res.body.list
        this.pagination.total = res.body.total
      }).finally(res => {
        this.tableLoading = false
      })
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.queryPageList()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.queryPageList()
    }
  }
}
</script>

<style lang="scss" scoped>

.box {
    display: flex;
    justify-content: space-around;
    height: 100%;
  
    .tree-box {
      width: 20%;
      background-color: #fff;
      padding: 5px 10px;
      .t_tree_scrollbar{
        height: calc(100vh - 166px);
      }
      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }
    }
  
    .form-box {
      width: 79%;
      height: calc(100vh - 90px);
      overflow-y: auto;
  
      background-color: #fff;
      padding: 5px 10px;
    }
  }
</style>
