<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 - 180px)">
        <el-tree v-loading="treeLoading" ref="tree" check-on-click-node show-checkbox 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" :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 "./components/content.vue";
import { getTree } from "@/api/archives-management/fileManagement/notStoredArchives.js";
import {
  getTableData,
  exportTimeData,
} from "@/api/archives-management/formationTime";
import { getFondWithPage } from "@/api/system-management/allAdministration";
import { URL_PREFIX } from "@/utils/url-prefix";

export default {
  data() {
    return {
      status: false,
      defaultProps: {
        children: "childClass",
        label: "className",
      },
      treeData: [],
      treeLoading: false,
      checkedKeys: [],
      search: {
        type: 1,
        dateRange: [],
        fonds_no: "",
      },
      loading: false,
      tableData: [],
      fondsList: [],
    };
  },
  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;
    },
    getFondWithPage() {
      getFondWithPage({
        limit: 1000,
      }).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;
        });
    },
    handleCheck(data, { checkedKeys }) {
      this.checkedKeys = checkedKeys;
    },
    getSearch() {
      const { type, dateRange, fonds_no } = this.search;
      if (!dateRange.length || dateRange[0] === "") {
        message("warning", "请选择形成时间", 2000);
        return {};
      }
      const classIds = this.$refs.tree.getCheckedKeys(true).join(",");
      let data = {
        classIds,
        type,
        fonds_no,
        startTime: dateRange[0],
        endTime: dateRange[1],
      };
      let params =
        "?classIds=" +
        classIds +
        "&type=" +
        type +
        "&startTime=" +
        dateRange[0] +
        "&endTime=" +
        dateRange[1];
      return {
        data,
        params,
      };
    },
    handleSearch() {
      const { data } = this.getSearch();
      if (!data) return;
      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() {
      const { params } = this.getSearch();
      if (!params) return;
      window.location.href =
        URL_PREFIX +
        "/point-strategy/v/statistics/timeStatisticsDownloadExcel" +
        params;
    },
  },
  mounted() {
    dragControllerDiv();
  },
  created() {
    this.initGetTree();
    this.getFondWithPage(); // 全宗
  },
};
</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>
