<template>
    <div>
        <div class="flex rt plr ptb10">
            <el-tooltip effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="left">
                <el-button size="small" circle @click="_toggleSearch()">
                    <div class="bIcon-search fz12 plr1"></div>
                </el-button>
            </el-tooltip>
            <el-tooltip v-if="showFilter" class="ml" effect="dark" content="设置展示数据项" placement="bottom-end">
                <el-button size="small" circle @click="isShow=true;">
                    <div class="bIcon-filter fz12 plr1"></div>
                </el-button>
            </el-tooltip>

            <el-tooltip v-if="showRefresh" class="ml" effect="dark" content="刷新列表" placement="bottom-end">
                <el-button size="small" circle @click="_onRefresh">
                    <div class="bIcon-refresh fz12 plr1"></div>
                </el-button>
            </el-tooltip>
        </div>

        <el-dialog title="设置展示项" v-model="isShow" width="655px" append-to-body>

            <el-tabs type="border-card" v-model="tabKey">
                <el-tab-pane label="表格项" name="table">
                    <el-transfer v-if="tabKey == 'table'" class="center-block"
                                 :titles="['显示项', '隐藏项']"
                                 v-model="hideKeys"
                                 :data="transferColumns"
                    ></el-transfer>
                </el-tab-pane>
                <el-tab-pane label="搜索项" name="search">
                    <el-transfer v-if="tabKey == 'search'" class="center-block"
                                 :titles="['显示项', '隐藏项']"
                                 v-model="hideSearchKeys"
                                 :data="transferOptions"
                    ></el-transfer>
                </el-tab-pane>
            </el-tabs>


            <div slot="footer" class="dialog-footer mt flex rt">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="_onConfirm">确 定</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import tableStore from "@/modules/st-core/js_sdk/store";
    import {createAuth} from "@/modules/st-core/js_sdk/util/create-auth";
    export default {
        name: "st-table-tool",
        props:{
            auth : {
                type : Boolean ,
                default(){
                    return situ.getConfig("auth",true)
                }
            } ,
            options : {
                type:Array,
                default(){
                    return [] ;
                }
            },
            columns : {
                type:Array,
                default(){
                    return [] ;
                }
            },
            refresh : {
                type : Boolean,
                default : undefined
            },
            filter : {
                type : Boolean,
                default : undefined
            }
        },
        data() {
            return {
                tabKey:"table",
                showSearch : true ,
                isShow : false ,
                hideKeys : [],
                hideSearchKeys : []
            }
        },
        computed:{
            showRefresh(){
                return this.refresh ?? this.$s.getConfig("tableTool.refresh" , false) ;
            },
            showFilter(){
                return this.filter ?? this.$s.getConfig("tableTool.filter" , true) ;
            },
            transferColumns(){
                return this.columns.filter(item => this._hasAuth(item)).map(item => ({
                    key : item.name ,
                    label : item.label
                }));
            },
            transferOptions(){
                return this.options.filter(item => this._hasAuth(item)).map(item => ({
                    key : item.name ,
                    label : item.label
                }));
            }
        },
        mounted() {
            tableStore.commit("initByLocalData",this.$route.path);
            this.hideKeys = [...tableStore.state.hideKeys] ;
            this.hideSearchKeys = [...tableStore.state.hideSearchKeys] ;
            this.showSearch = tableStore.state.showSearch ;
        },
        unmounted() {
            tableStore.commit("reset");
        },
        methods: {
            _toggleSearch(){
                this.showSearch = !this.showSearch ;
                this._emitChange();
            },
            _hasAuth({auth , name}){
                let curAuth = createAuth(auth , this.$route.path , name);
                return ( this.auth === false && !auth ) ||  this.$s.hasAuth(curAuth) ;
            },
            _onConfirm(){
                this.isShow = false ;
                this._emitChange();
            },
            _emitChange(){
                tableStore.commit("change",{
                    hideKeys : this.hideKeys ,
                    hideSearchKeys : this.hideSearchKeys ,
                    showSearch : this.showSearch,
                    path : this.$route.fullPath
                });
            },
            _onRefresh(){
                tableStore.commit("refresh");
            }
        }
    }
</script>

<style>
    .el-tabs--border-card{
        box-shadow: none;
    }
</style>