<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 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-scrollbar>
      </div>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm' :body-style="{ padding: '5px' }">
      <div slot="header" class="clearfix">
        <div class="title">
          <div>回收站</div>
          <div>
            <el-button :disabled="JSON.stringify(treeRow)==='{}'" @click="btnClick(1)" size="mini" type="primary"
              v-if="showButtons.recovery">恢复</el-button>
            <el-button :disabled="JSON.stringify(treeRow)==='{}'" @click="btnClick(2)" size="mini" type="danger"
              v-if="showButtons.del">删除</el-button>
          </div>
        </div>
      </div>
      <right-table-box ref="table" :tableLoading="tableLoading" @handleNodeClick='getData' :treeType='treeType'
        :fondsList="fondsList" :treeRow='treeRow' :Alltable="Alltable">
      </right-table-box>
    </el-card>
  </div>
</template>
<script>
  import {
    getContent
  } from "@/api/system-management/templateSetting"
  import {
    getTree,
    recoveryData,
    realDeleteData
  } from "@/api/archives-management/fileManagement/notRecycleBin.js";
  import {
    saveObject,
    delectTable,
    getOneTable,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    getButtonList
  } from "@/api/user"
  import {
    getFondWithPage
  } from "@/api/system-management/allAdministration";
  import rightTableBox from "./components/rightTableBox";
  import {
    message,
    dragControllerDiv,
    dateFormatT,
    dateFormat,
    downlaodEEP,
  } from "@/utils/common";
  export default {
    data() {
      return {
        status: false,
        treeLoading: false,
        treeData: [],
        defaultProps: {
          children: "childClass",
          label: "className",
        },
        treeRow: {},
        Alltable: [],
        fondsList: [],
        treeType: "",
        tableLoading: false,
        showButtons: {
          recovery: false,
          del: false
        }
      }
    },
    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;
        });
      },
      //点击树
      handleNodeClick(data) {
        if (data.classType) {
          return
        }
        this.treeRow = data
        if (!data.tentityType.length) {
          getContent({
            entityId: data.id
          }).then(res => {

            res.body.list.forEach((item) => {
              this.$set(item, "isShow", false);
              this.$set(item, "selectTable", []);
              this.$set(item, "pagination", {
                pageSize: 10,
                pageNum: 1,
                total: 0,
              });
              this.$set(item, "tableData", []);
            });
            this.Alltable = res.body.list
          }).then((res) => {
            this.getData()
          });
        }
      },
      getData() {
        this.tableLoading = true
        let params = {
          commonMap: {
            funcTypeCode: this.treeType,
            tableName: this.Alltable[0].tableName,
          },
          conditionMap: {},
          limit: this.Alltable[0].pagination.pageSize,
          page: this.Alltable[0].pagination.pageNum,
        }
        getOneTable(params).then((res) => {
          this.Alltable[0].tableData = res.body.list;
          this.Alltable[0].pagination.total = res.body.total;
          this.tableLoading = false
        }).catch(err => {
          this.tableLoading = false
        })

      },
      btnClick(key) {
        let arr = this.Alltable[0].selectTable.map(ele => ele.id)
        let val = {}
        if (this.Alltable[0].selectTable.length) {
          val = JSON.parse(JSON.stringify(this.Alltable[0].selectTable[0]))
          delete val.id
          delete val.trash_createuser
          delete val.trash_createtime
        }
        let params = {
          commonMap: {
            funcTypeCode: "temp",
            tableName: this.Alltable[0].tableName,
          },
          // fieldValueMap: val,
          conditionMap: {},
        };
        switch (key) {
          case 1:
            if (!arr.length) {
              message("warning", "请选择要恢复的数据", 3000);
              return;
            }
            let data = {
              entityId: this.treeRow.id,
              ids: arr.join(",")
            }
            recoveryData(data).then(res => {
              message("success", "恢复成功", 3000);
              this.getData()
            })
            break;
          case 2:
            if (!arr.length) {
              message("warning", "请选择要删除的数据", 3000);
              return;
            }
            let datas = {
              entityId: this.treeRow.id,
              ids: arr.join(",")
            }
            this.$alert("是否确认删除该数据？", "提示", {
              confirmButtonText: "确定",
              type: "warning",
              callback: async (action) => {
                if (action === "cancel") {
                  return false;
                }
                realDeleteData(datas).then((res) => {
                  message("success", "删除成功", 3000);
                  this.getData()
                });
              },
            });
            break;
        }
      },
      //初始化树
      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
          })
        })
      }
    },
    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;


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

      ::v-deep .el-card__header {
        padding: 13px 20px;
      }

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

        .title {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

</style>
