<template>
  <div v-loading="loading">
    <el-form inline :model="table.params" ref="queryForm" @submit.native.prevent>
      <el-form-item prop="keyword">
        <el-input v-model="table.params.keyword" placeholder="搜索..." :clearable="true" @keydown.native.enter="queryData"></el-input>
      </el-form-item>
      <el-button-group class="pull-right" style="margin: 7px 0 0px 6px">
        <el-button icon="el-icon-fa-refresh" @click="resetQuery"></el-button>
        <el-button icon="el-icon-fa-search" @click="queryData"></el-button>
        <el-button icon="el-icon-fa-expand" @click="expandAll"></el-button>
      </el-button-group>
    </el-form>
    <div style="max-height:400px; min-height:60px;overflow-y:auto;">
      <div v-show="noData" style="text-align:center;margin-bottom:10px;">没有数据...</div>
      <el-tree v-show="!noData" ref="orgTree" lazy :load="loadTree" node-key="uuid" :expand-on-click-node="false" highlight-current>
        <template slot-scope="{node,data}">
            <span class="hover-href" v-if="data.pid !== 'none'" @click="selectTableRow(data)">
              {{data.label}}
            </span>
          <span v-else>{{data.label}}</span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
  import BaseSelector from "../common/BaseSelector";
  import SysAPI from "../api/base/sysm/SysAPI";
  import CacheStores from "../service/module/CacheStores";

  export default {
    extends: BaseSelector,
    props: {
      // 树类型
      treeKey: {
        type: String,
        required: true
      },
      // 查询字段(数据库对应)
      searchField: {
        type: String,
        required: false
      },
      // 树的根节点命名
      rootLabel: {
        type: String,
        default: "请选择数据"
      }
    },
    data() {
      return {
        loading: false,
        noData: false,
        table: {
          data: [],
          params: {
            keyword: ""
          }
        }
      };
    },
    mounted() {
    },
    methods: {
      // [按钮]点击查询
      queryData() {
        this.$refs.orgTree.root.childNodes.forEach(element => {
          element.loaded = false;
          element.expand();
        }, this);
      },
      // [按钮]重置查询
      resetQuery() {
        this.noData = false;
        this.$refs.queryForm.resetFields();
        this.queryData();
      },
      // 懒加载树节点
      async loadTree(node, resolve) {
        let pid;
        if (node.data) {
          pid = node.data.id;
        }
        let keyWord = this.table.params.keyword;
        // let cacheKey = `${this.treeKey}?${this.searchField}=${keyWord}&pid=${pid}`;
        // let data = await CacheStores.codeTreeStore.getItem(cacheKey);
        // if (null == data) {
        this.loading = true;
        let data = await SysAPI.getTree(this.treeKey, pid, keyWord, this.searchField);
        // await CacheStores.codeTreeStore.setItem(cacheKey, data);
        this.loading = false;
        // }
        resolve(data);
        if (keyWord && data.length === 0) {
          this.noData = true;
        } else {
          node.childNodes.forEach(element => {
            let isLeaf = this.table.params.keyword ? true : element.data.isLeaf;
            element.isLeaf = isLeaf;
            element.loaded = isLeaf;
          }, this);
          this.noData = false;
        }

      },
      // 展开/关闭 全部
      expandAll() {
        let expandFn = (element, expand) => {
          element.childNodes.forEach(element => {
            element.expand(() => {
              expandFn(element);
            });
          }, this);
        };
        expandFn(this.$refs.orgTree.root);
      }
    }
  };
</script>
