<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-tree key="1" v-loading='loading' v-show="!isDirSeqTree" highlight-current :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.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>
          <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>
      </div>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm' :body-style="{ padding: '10px' }">

      <div v-for="(item, key) in Alltable" :key="key">

        <el-row>
          <el-col v-for="(ele, index) in item.search" :key="index" :span="8" class="search">
            <div style="width: 110px; text-align: right">{{ ele.label }}：</div>
            <el-input size="mini" style="width: 60%" clearable v-if="ele.ctype === 'input'" v-model="ele.value"
              placeholder="请输入"></el-input>
            <!-- 文本框 -->
            <el-input v-if="ele.ctype === 'text'" type="textarea" size="mini" :rows="1" clearable v-model="ele.value"
              style="width: 60%" placeholder="请输入"></el-input>
            <!-- 下拉框 -->
            <el-select v-if="ele.ctype === 'select'" v-model="ele.value" clearable size="mini" style="width: 60%"
              placeholder="请选择">
              <el-option v-for="op in ele.note.note" :label="op.label" :value="op.label" size="mini" style="width: 60%"
                :key="op.value"></el-option>
            </el-select>
            <!-- 年 -->
            <el-date-picker v-if="ele.ctype === 'datetime'" v-model="ele.value" type="datetime" size="mini" clearable
              style="width: 60%" placeholder="选择日期时间"></el-date-picker>

            <el-date-picker v-if="ele.ctype === 'datetimerange'" v-model="ele.value" type="datetimerange" size="mini"
              clearable style="width: 60%" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <div class="searchBtn" v-if="item.search.length">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="getData(key)">查询</el-button>
          </div>
        </el-row>
        <div class="btnList">
          <el-button size="mini" type="primary" @click="editor(key,item,'新增')" v-if="showButtons.add">新增</el-button>
          <el-button @click="handleStateMent(item,key)" size="mini" type="primary">报表设计</el-button>
          <el-button @click="createReport(item,key)" size="mini" type="primary">报表预览</el-button>
          <el-button @click="querySet(item,key)" size="mini" type="primary">查询设置</el-button>
          <el-button @click="getDirTreeSearch(key)" size="mini" type="primary">目录序列树</el-button>

          <el-button size="mini" type="danger" @click="del(key)" v-if="showButtons.del">删除</el-button>
          <el-button size="mini" type="primary" @click="openDialog">导入</el-button>
          <el-button size="mini" type="primary" @click="exportda(key)">导出</el-button>
        </div>
        <el-table v-loading='item.tableLoading' border :data="item.tableData"
          @selection-change="handleSelectionChange($event, item)"
          @sort-change="customSortSearch($event,item,key)"  max-height="600">
          <el-table-column align="center" type="selection" width="60"></el-table-column>
          <el-table-column align="center" label="原文数量" min-width="100px" prop="archive_file_num">
            <template slot-scope="scope">
              <el-button type="text" @click="lookFile(scope.row, item, key)">{{
                scope.row.archive_file_num ? scope.row.archive_file_num : 0
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column v-for="(ele, index) in JSON.parse(item.tableShow)" sortable :key="index" :prop="ele.columnName"
            :min-width="ele.width" :width="ele.width" :label="ele.columnChnName" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="ele.columnName === 'fonds_no'">
                {{ (fondsList.filter(f => f.fondscode === scope.row[ele.columnName])[0] || {}).codeName }}
              </span>
              <span v-if="ele.columnName !== 'fonds_no'">{{ scope.row[ele.columnName] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="100px" fixed="right">
            <template slot-scope="scope">
              <el-button @click="editor(key,item,'修改',scope.row)" size="mini" type="text" v-if="showButtons.edit">修改
              </el-button>
              <el-button @click="delOne(key,scope.row.id)" size="mini" type="text" style="color:#FF4949"
                v-if="showButtons.del">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange($event, item, key)"
          @size-change="handleSizeChange($event, item, key)" layout="total, prev, pager, next, sizes"
          :page-size="item.pagination.pageSize" :page-sizes="[10, 20, 30, 50]" :current-page="item.pagination.pageNum"
          :total="item.pagination.total">
        </el-pagination>
      </div>
    </el-card>
    <diaAdd :fondsList='fondsList' :Alltable='Alltable' :treeType='treeType' :diaFlage="diaFlage" :title="title"
      :form="form" :ruleForm="ruleForm" @cancel="cancel" @getData='getData' :tableRow='tableRow' :tableItem='tableItem'
      :tablekey='tablekey' />
    <drawer-tem ref="original" :drawer='drawer' :actions='actions' :treeType='treeType' @handleClose="handleClose"
      @getData="getData" :treeRow="treeRow" />
    <!-- 导出接口 -->
    <dialogTable ref="logTable" :logTable="logTable" @logTableCancel="logTableCancel" @rest="getData(0)" />
    <!-- 查询设置 -->
    <dia-query :querySetData="querySetData" :visible="diaQuery" ref="diaQuery" @cancel="(()=>this.diaQuery=false)"
      @submit="querySubmit" />
    <!-- 报表设计弹框 -->
    <report-designer :visible="stateMent" ref="stateMent" @cancel="(()=>this.stateMent = false)" />
    <!-- 报表预览弹窗 -->
    <report-view @reset="reset" :visible="diaReport" model="3" @cancel="cancel" ref="diaReport" />
   
  </div>
</template>
<script>
import DrawerTem from "@/components/DrawerTem";
import {
  getOneTable,
  getTable,
  getSettingField,
  saveSettingField,
  querySettings,
  exportExcel,
    getDirTree,
    findTreeChildren,
} from "@/api/archives-management/fileManagement/notStoredArchives.js";
import { getData } from "@/api/dataManagement/dataImport";
import { getFindList } from "@/api/system-management/templateSetting";
import { queryReportName, queryEntityLevel } from "@/api/reportTemplate";

import { mapState } from "vuex";
import diaAdd from "./components/diaAdd.vue";
import dialogTable from "./components/dialogTable.vue";
import diaQuery from "./components/diaQuery.vue";
import {
  message,
  clearObjValue,
  dateFormatT,
  dateFormat,
  dragControllerDiv,
  downlaodxls,
  getCurrentTimes
} from "@/utils/common";
import ReportDesigner from "@/components/ReportDesigner";
import ReportView from "@/components/ReportView";
import localStronge from "@/api/localData";
import { URL_PREFIX } from "@/utils/url-prefix";
export default {
  data() {
    return {
      diaReport:false, // 报表预览
      stateMent:false, // 报表设计
      dirQuery: {}, // 目录序列树参数
      isDirSeqTree: false, // 是否目录序列树
      dirTreeData: [], // 目录序列树
      dirTreeLoading: false, // 目录序列树loading
      eleTable: {}, // 按钮对应的table
      eleKey: '', // 按钮对应的table key
      nowTiem: getCurrentTimes(),
      status: false,
      // 树形结构数据
      defaultProps: {
        children: "childClass",
        label: "className",
      },
      defaultDirProps: {
        children: "children",
        label: "title",
        isLeaf: 'isLeaf'
      },
      Alltable: [],
      // search: [],
      //弹窗
      diaFlage: false,
      title: "新增",
      form: [],
      ruleForm: {},
      treeType: "",
      multipleSelection: [],
      tableRow: {},
      drawer: false,
      logTable: false,
      tableItem: {},
      tablekey: "",
      actions: "",
      treeRow: {},
      querySetData: {},
      diaQuery: false, // 查询设置表单
      currentTableKey: "",
      orderObj:{}, //自定义排序字段
    };
  },
  components: {
    diaAdd,
    DrawerTem,
    dialogTable,
    diaQuery,
    ReportDesigner,
    ReportView,
  },
  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%";
        }
      },
    },
  },
  computed: {
    ...mapState({
      treeData: (state) => state.description.treeData,
      fondsList: (state) => state.description.fondsList,
      pagination: (state) => state.description.pagination,
      showButtons: (state) => state.description.showButtons,
    }),
    tableLoading: {
      get() {
        return this.$store.state.description.tableLoading;
      },
      set(val) {
        this.$store.state.description.tableLoading = val;
      },
    },
    loading: {
      get() {
        return this.$store.state.description.loading;
      },
      set(val) {
        this.$store.state.description.loading = val;
      },
    },
  },
  methods: {
    // 报表设计
    handleStateMent(item, key) {
      this.stateMent = true;
      this.$refs.stateMent.treeRow = this.treeRow;
      this.$refs.stateMent.treeData = this.treeData;
      this.$refs.stateMent.rowData = item;
    },
    // 报表预览
    createReport(list, key) {
      console.log(list)
      let rname;
      this.currentTableKey = key;
      this.$refs.diaReport.radioType = "";
      this.diaReport = true;

      this.treeData.forEach((item) => {
        return item.childClass.forEach((i) => {
          i.childClass.forEach((k) => {
            if (
              k.className == this.treeRow.className &&
              k.pid == this.treeRow.pid
            ) {
              rname = item;
            }
          });
        });
      });
      this.$refs.diaReport.tableRow = list;
      this.$refs.diaReport.rname = rname;
      this.$refs.diaReport.treeRow = this.treeRow;
      this.$refs.diaReport.multipleSelection = this.multipleSelection;
      const ids = this.multipleSelection.map((item) => {
        return item.id;
      });
      this.$refs.diaReport.ids = ids;
      queryEntityLevel({ entityId: list.entityId }).then((res) => {
        if (res.code === "100") {
          this.$refs.diaReport.fileType = res.body.entityLevel;
          this.showBaoBiaoPdf(res.body.entityLevel, rname, this.treeRow);
        }
      });
    },
    // pdf展示
    showBaoBiaoPdf(fileType, rname, treeRow) {
      let data = {
        classId: treeRow.id,
        // companyId: rname.id,
        fileType,
      };
      queryReportName(data).then((res) => {
        if (res.code === "100") {
          this.$refs.diaReport.tableData = res.body.list;
        }
      });
    },
    reset(fileType, rname, treeRow) {
      this.showBaoBiaoPdf(fileType, rname, treeRow);
    },
    customSortSearch({ column},item,key){
      this.orderObj.sortKey = column.property;
      this.orderObj.sortType = column.order=='descending'?'desc':'';
      this.getData(key) ;
    },
    handleDirNodeClick(data){
      console.log(data);
      const valueArr = data.key.split(",");
      Object.keys(this.dirQuery).forEach((dir, index) => {
        this.dirQuery[dir] = valueArr[index];
      });
      this.getData(this.eleKey);
    },
    loadDirNode(node, resolve) {
      console.log(node);
      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+"_temp",
        userId: parseInt(sessionStorage.getItem("userid")),
        mode: 2, // 未入库
        type: 1,
        key: node.data.key,
        level: node.data.level
      };
      findTreeChildren(params).then(res => {
        data = res.body.list;
        setTimeout(() => {
          resolve(data);
        }, 500);
      });
    },
    // 点击目录序列树
    // 目录序列树
    getDirTreeSearch(key) {
        this.eleKey = key;
        this.eleTable = this.Alltable.filter((item, index) => key === index)[0]
        this.isDirSeqTree = !this.isDirSeqTree; // 目录序列树
        if (this.isDirSeqTree) {
          this.getDirTree();
          this.getQuerySet(this.eleTable)
        } else {
          this.$nextTick(() => {
            this.getData(key);
          })
        }
    },
    // 目录序列树
    async getDirTree(ele) {
        this.dirTreeLoading = true;
        const params = {
          entityId: this.eleTable.entityId,
          tableName: this.eleTable.tableName+'_temp',
          userId: parseInt(sessionStorage.getItem("userid")),
          mode: 2, // 未入库
          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;
          });
      },
    // 查询设置-保存
    querySubmit(val, key) {
      const ele = this.Alltable.filter(
        (item, index) => this.currentTableKey === index
      )[0];
      const params = {
        entityId: ele.entityId,
        dataKeys: val.fields,
        type: val.type,
        userId: parseInt(sessionStorage.getItem("userid")),
      };
      querySettings(params).then((res) => {
        message("success", "保存成功", 2000);
        this.diaQuery = false;
        // this.$emit("handleNodeClick", this.treeRow);
        this.handleNodeClick(this.treeRow);
      });
    },
    // 查询设置
    querySet(ele, key) {
      this.getQuerySet(ele);
      this.diaQuery = true;
      this.currentTableKey = key;
    },
    // 查询设置
    getQuerySet(ele) {
      this.querySetData = {
        entityId: ele.entityId,
        tableName: ele.tableName,
        type: 1,
        userId: sessionStorage.getItem("userid"),
      };
      getSettingField(this.querySetData).then((res) => {
        if (res.code === "100") {
          this.$refs.diaQuery.data = res.body.dataSource;
          this.$refs.diaQuery.form.fields = res.body.targetKeys;
          this.$refs.diaQuery.form.type = 2;
          // 目录序列树查询参数
          this.dirQuery = {};
          res.body.targetKeys.forEach((target) => {
            this.dirQuery[target.split(",")[0]] = "";
          });
        }
      });
    },
    logTableCancel() {
      this.logTable = false;
    },
    // 导入事件
    openDialog() {
      this.logTable = true;
    },
    // 导出
    exportda(key) {
      const ele = this.Alltable.filter((item, index) => key === index)[0];
      let ids = this.multipleSelection.map((item) => item.id).join(",");
      let data = {
        funcTypeCode: this.treeType,
        tableName: ele.tableName,
        ids,
      };
      let str = "";
      for (let key in data) {
        str = str + key + "=" + data[key] + "&";
      }
      // exportExcel(data).then(res => {
      //   downlaodxls(res, `导出文件${this.nowTiem}`)
      // })
      window.location.href =
        URL_PREFIX + "/point-strategy/v/fileManage/downloadExcel?" + str;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getData(key) {
      let orderString = null;
      if(JSON.stringify(this.orderObj) === '{}'){
        orderString = 'order by  id  desc';
      }else{
        orderString = `order by  ${this.orderObj.sortKey}  ${this.orderObj.sortType}`;
      }
      this.Alltable.forEach((item, index) => {
        if (key === index) {
          let params = {
            commonMap: {
              funcTypeCode: this.treeType,
              tableName: item.tableName,
            },
            conditionMap: {},
            limit: "10",
            page: "1",
            orderBy: orderString,
          };

          item.tableLoading = true;
          params.limit = item.pagination.pageSize;
          params.page = item.pagination.pageNum;

          item.search.forEach((ele) => {
            if (ele.ctype === "datetime") {
              params.conditionMap[ele.fieldName] = ele.value
                ? dateFormat(ele.value)
                : "";
            } else if (ele.ctype === "datetimerange") {
              params.conditionMap[ele.fieldName] = ele.value
                ? dateFormatT(ele.value).start +
                  "~" +
                  dateFormatT(ele.value).end
                : "";
            } else {
              params.conditionMap[ele.fieldName] = ele.value
              ? `like${ele.value}`
              : ele.value;
              //params.conditionMap[ele.fieldName] = ele.value;
            }
          });

          // 目录序列树参数
          if (this.isDirSeqTree) {
            params.conditionMap = {
              ...params.conditionMap,
              ...this.dirQuery,
            };
          }

          getOneTable(params).then((res) => {
            item.tableData = res.body.list;
            item.pagination.total = res.body.total;
            item.tableLoading = false;
          });
        }
      });
    },
    handleNodeClick(tab) {
      this.treeRow = tab;
      if (tab.classType === "C") {
        let params = {
          classId: tab.id,
        };
        getTable(params)
          .then((res) => {
            res.body.InterfaceSystem.forEach((item) => {
              let ruleForm = {};
              let form = JSON.parse(item["interfaceShow"]);
              // this.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 === 24) {
                  ele.width = "100%";
                }
                if (ele.ctype === "select") {
                  getFindList({
                    type: ele.note.type,
                  }).then((res) => {
                    ele.note.note = res.body.list;
                  });
                }
              });
              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, "tableShow", JSON.parse(item["tableShow"])); //表格
              this.$set(item, "tableLoading", false);
              this.$set(item, "selectTable", []);
              this.$set(item, "pagination", {
                pageSize: 10,
                pageNum: 1,
                total: 0,
              });
              this.$set(item, "tableData", []);
            });
            this.Alltable = res.body.InterfaceSystem;
          })
          .then((res) => {
            this.getData(0);
          });
      }
    },
    async getgetData(entityId) {
      let data = { entityId };
      const result = await getData(data);
      console.log(result);
    },
    btns() {
      this.status = !this.status;
    },
    lookFile(val, item, key) {
      this.$refs.original.archiveNum = val.archive_file_num
        ? val.archive_file_num
        : 0;
      this.$refs.original.oriTable = item;
      this.$refs.original.orirow = val;
      this.$refs.original.orikey = key;

      let params = {
        commonMap: {
          funcTypeCode: this.treeType + "_file",
          tableName: item.tableName,
        },
        conditionMap: {
          rec_id: val.id,
          file_status: 1,
        },
        orderBy: "order by  page_no  asc",
        limit: "1000",
        page: "1",
      };
      this.$refs.original.params = params;
      this.actions =
        process.env.NODE_ENV === "development"
          ? "http://" +
            localStronge.getServiceip().ip +
            ":" +
            localStronge.getServiceip().host +
            "/point-strategy/v/ajjnOriginBatch/uploadSimpleFilesAnjuan?recId=" +
            val.id +
            "&fondscode=" +
            val.fonds_no +
            "&tableName=" +
            item.tableName
          : "http://" +
            window.location.host +
            "/point-strategy/v/ajjnOriginBatch/uploadSimpleFilesAnjuan?recId=" +
            val.id +
            "&fondscode=" +
            val.fonds_no +
            "&tableName=" +
            item.tableName;
      getOneTable(params)
        .then((res) => {
          //原文表
          this.$refs.original.tableDataOrigin = res.body.list;
        })
        .then((res) => {
          params.conditionMap.file_status = 2;
          getOneTable(params).then((res) => {
            //原文回收站表
            this.$refs.original.backData = res.body.list;
          });
        });
      this.$refs.original.picUrl = "";
      this.$refs.original.activeName = "1";
      this.drawer = true;
    },
    editor(key, item, str, row) {
      this.tableItem = item;
      this.tablekey = key.toString();
      this.tableRow = row;
      this.title = str;
      this.form = JSON.parse(JSON.stringify(item.form));
      this.ruleForm = JSON.parse(JSON.stringify(item.ruleForm));
      this.form.forEach((item) => {
        item.value = "";
      });
      this.diaFlage = true;
      if (str === "修改") {
        for (let key in row) {
          for (let index in this.ruleForm) {
            if (key === index) {
              this.ruleForm[index] = row[key];
            }
          }
        }
      }
      this.diaFlage = true;
    },
    delOne(key, id) {
      this.Alltable.forEach((item, index) => {
        if (key === index) {
          let data = {
            ids: id,
            tableName1: item.tableName,
          };
          this.$alert("是否确认删除该数据？", "提示", {
            confirmButtonText: "确定",
            type: "warning",
            callback: async (action) => {
              if (action === "cancel") {
                return false;
              }
              this.$store
                .dispatch("description/deleteObjectAnjuan", data)
                .then((res) => {
                  this.getData(key);
                });
            },
          });
        }
      });
    },
    del(key) {
      if (!this.multipleSelection.length) {
        message("warning", "请选择至少一项", 3000);
        return;
      }
      let arr = [];
      this.multipleSelection.forEach((item) => {
        arr.push(item.id);
      });
      this.delOne(key, arr.join(","));
    },
    baobiao() {},
    cancel() {
      this.diaFlage = false;
      this.diaReport = false;
    },
    handleSizeChange(val, item, key) {
      item.pagination.pageSize = val;
      item.pagination.pageNum = 1;
      this.getData(key);
    },
    //换页
    handleCurrentChange(val, item, key) {
      item.pagination.pageNum = val;
      this.getData(key);
    },
    getTreeData() {
      this.loading = true;
      this.$store
        .dispatch("description/getClassTreeByClassName", {
          className: "文件",
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleClose() {
      this.drawer = false;
    },
  },
  mounted() {
    dragControllerDiv();
  },
  created() {
    this.getTreeData();
    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.$store.dispatch("description/getButtonList", btnData);
    this.$store.dispatch("description/getFondWithPageUser");
  },
};
</script>
<style lang='scss' scoped>
.box {
  display: flex;
  justify-content: space-around;
  height: 100%;

  .tree-box {
    width: 22%;
    // height: 1000px;
    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;

    .searchBtn {
      height: 35px;

      padding: 5px 10px 10px 0;
      background-color: #fff;
    }

    background-color: #fff;
    padding: 5px 10px;

    .btnList {
      padding: 10px;
      text-align: left;
    }

    .search {
      height: 30px;
      line-height: 30px;
      display: flex;
      margin: 8px 0px;
    }
  }
}
</style>
