<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:160px; min-width: 300px; 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";

export default {
    extends: BaseSelector,
    props: {
        // 树类型
        treeKey: {
            type: String,
            required: true
        },
        // 查询字段(数据库对应)
        searchField: {
            type: String,
            required: false
        },
        // 树的根节点命名
        rootLabel: {
            type: String,
            default: "请选择数据"
        },
        pid: {type: String, default: null},
    },
    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;
            } else if (this.pid) {
                pid = this.pid;
            }
            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;
            if (!pid) {
                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>
