<template>
  <basic-container v-loading="loading">
    <el-input
      ref="search"
      size="small"
      prefix-icon="el-icon-search"
      placeholder="搜索社区街道"
      v-model="query.companyName"
      clearable
    ></el-input>
    <div class="company-tree" ref="tree" :style="{height:height+'px','margin-top':'5px'}">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <el-pagination
      ref="pagination"
      layout="prev, pager, next"
      :total="page.total"
      :page-size="page.pageSize"
      @current-change="currentChange"
    ></el-pagination>
  </basic-container>
</template>

<script>
import { getMenuList } from "@/api/manage/company";
import _ from "lodash";

export default {
  data() {
    return {
      loading: true,
      height: 100,
      data: [],
      page: {
        pageSize: 30,
        currentPage: 1,
        total: 0,
      },
      defaultProps: {
        children: "children",
        label: "companyName",
      },
      query: {
        companyName: null,
      },
    };
  },
  mounted() {
    this.onLoad(this.page, this.query);
    this.getTreeHeight();
  },
  methods: {
    handleNodeClick(data, vNode, node) {
      this.$emit("node-click", { data, vNode, node });
    },
    onLoad(page, param) {
      getMenuList(page.currentPage, page.pageSize, param)
        .then((resp) => {
          const data = resp.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        })
        .catch(() => {
          this.lloading = false;
        });
    },
    queryChange: _.debounce(function () {
      this.onLoad(this.page, this.query);
    }, 1000),
    currentChange(current) {
      this.page.currentPage = current;
      this.onLoad(this.page, this.query);
    },
    getTreeHeight() {
      const pageStyle = this.$refs.pagination.$el;
      const searchStyle = this.$refs.search.$el;
      const treeStyle = this.$refs.tree;
      this.height =
        document.documentElement.clientHeight -
        pageStyle.offsetTop -
        searchStyle.offsetTop -
        treeStyle.offsetTop -
        10;
    },
  },
  watch: {
    "query.companyName": function () {
      this.page.currentPage = 1;
      this.queryChange();
    },
  },
};
</script>

<style>
.company-tree {
  overflow: auto;
}
</style>
