<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>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 170px)">
        <el-tree v-loading="treeLoading" ref="tree" show-checkbox check-on-click-node default-expand-all
          :data="treeData" :props="defaultProps" @check="handleCheck" node-key="id">
          <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" />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref="cardForm" shadow="always" :body-style="{ padding: '10px' }">
      <div slot="header" class="clearfix" style="padding:0">
        <header-box :fondsList="fondsList" :keepList="keepList" :headerForm="search" :disabled="!checkedKeys.length"
          @searchClick="handleSearch" @reset="reset" @export="handleExport">
        </header-box>
      </div>
      <content-box :loading="loading" :tableData="tableData"></content-box>
    </el-card>
  </div>
</template>
<script>
import {
  message,
  dateFormatTs,
  downlaodxls,
  getCurrentTimes,
  dragControllerDiv,
} from "@/utils/common";
import headerBox from "./components/head.vue";
import contentBox from "../formationTime/components/content.vue";
import { getTree } from "@/api/archives-management/fileManagement/notStoredArchives.js";
import { getTableData, exportData } from "@/api/archives-management/statistics";
import { getFondWithPage } from "@/api/system-management/allAdministration";
import { getFindList } from "@/api/system-management/templateSetting";
import { URL_PREFIX } from "@/utils/url-prefix";
export default {
  data() {
    return {
      status: false,
      defaultProps: {
        children: "childClass",
        label: "className",
      },
      treeData: [],
      treeLoading: false,
      checkedKeys: [],
      search: {
        fonds_no: "",
        filing_year: undefined,
        archive_ctg_no: "",
        retention: "",
        type: 1,
      },
      loading: false,
      tableData: [],
      fondsList: [],
      keepList: [],
    };
  },
  components: {
    headerBox,
    contentBox,
  },
  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;
    },
    // 获取初始化树形结构
    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;
        });
    },
    getFondWithPage() {
      getFondWithPage({
        limit: 1000,
      }).then((res) => {
        this.fondsList = res.body.list;
      });
    },
    getKeepList() {
      getFindList({
        type: "retention",
      }).then((res) => {
        this.keepList = res.body.list;
      });
    },
    handleCheck(data, { checkedKeys }) {
      this.checkedKeys = checkedKeys;
    },
    getSearch() {
      let search = {};
      for (let k in this.search) {
        search[k] = this.search[k] === undefined ? "" : this.search[k];
      }
      let data = {
        classIds: this.$refs.tree.getCheckedKeys(true).join(","),
        ...search,
      };
      let params =
        "?classIds=" +
        data.classIds +
        "&fonds_no=" +
        data.fonds_no +
        "&filing_year=" +
        data.filing_year +
        "&archive_ctg_no=" +
        data.archive_ctg_no +
        "&retention=" +
        data.retention +
        "&type=" +
        data.type;
      return {
        data,
        params,
      };
    },
    handleSearch() {
      let { data } = this.getSearch();
      this.loading = true;
      getTableData(data)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.tableData = res.body.list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    reset() {
      this.search.type = 1;
    },
    handleExport() {
      let { params } = this.getSearch();
      window.location.href =
        URL_PREFIX +
        "/point-strategy/v/statistics/archivesStatisticsDownloadExcel" +
        params;
    },
  },
  mounted() {
    dragControllerDiv();
  },
  created() {
    this.initGetTree();
    this.getFondWithPage(); // 全宗
    this.getKeepList(); // 保存期限
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 5px;
  display: flex;
  justify-content: space-around;
  background: #f6f8fc;
  height: 100%;

  .tree-box {
    width: 22%;

    .el-tree {
      width: 100%;
      margin-top: 10px;
    }

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

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

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