/**
 * 查询布局模板
 * @author xiufu.wang
 */
import ElCard from 'mars-pro/packages/card';
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner';
import ProAction from 'mars-pro/packages/pro-action';
import omit from 'mars-pro/src/pro/omit';
import { getAllChildren, getAllProps } from 'mars-pro/src/pro/vue-util';

export default {
    name: 'ProLayoutContentSearch',
    componentName: 'ProLayoutContentSearch',
    components: {
        ElCard,
        ProLayoutContaner,
        ProAction
    },
    computed: {
        isShowHeader() {
            return !!(this.$attrs.header || this.$slots.header)
        }
    },
    data() {
        return {
            showMore: this.show
        }
    },
    props: {
        //标记基础查询项的个数
        baseCount: {
            type: Number,
            default: 3
        },
        show:{
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleMore() {
            this.showMore = !this.showMore
        },
        doSearch() {
            this.$emit('search', this.baseProps)
        },
        doRest() {
            this.$emit('reset')
        }
    },
    render() {
        const _datas = {
            props: {
                ...omit(this.$attrs, ['header']),
                shadow: 'never'
            },
            'class': {
                'pro-layout-content-search': true,
                'pro-layout-content-search--noheader': !this.isShowHeader
            }
        }

        const _layoutDatas = {
            props: {
                enableBottomGutter: false,
                ...this.$attrs
            },
            attrs: this.$attrs,
            'class': {
                'pro-layout-content-controllers': true
            }
        }

        let childrens = getAllChildren(this).filter(r => !!(r.tag))
        childrens = childrens.slice(0, this.showMore ? childrens.length : this.baseCount)
        //缓存基础渲染
        if (!this.showMore) { 
            this.baseProps = childrens.map(r => getAllProps(r).prop).filter(r => !!r)
        } else {
            this.baseProps = null
        }
        const actionVnodes = this.$scopedSlots.action ? (
            <div class="content-search-actions" flex="auto">
                {this.$scopedSlots.action({doSearch:this.doSearch,doReset:this.doRest,handleMore:this.handleMore,showMore:this.showMore})}
            </div>
        ) : (
            <div class="content-search-actions" flex="auto">
                <ProAction type="primary" text="查询" on-handler={this.doSearch} />
                <ProAction text="重置" on-handler={this.doRest} />
                <ProAction type="text" on-handler={this.handleMore}>
                    高级查询
                    {this.showMore ? <i class="el-icon-arrow-up"></i> : <i class="el-icon-arrow-down"></i>}
                </ProAction>
            </div>
        )

        return (
            <ElCard {..._datas}>
                {
                    this.isShowHeader && (
                        <template slot="header">
                            <ProLayoutContaner align="middle">
                                <div class="content-search-header" flex="none">
                                    {this.$slots.header || this.$attrs.header}
                                </div>
                                {actionVnodes}
                            </ProLayoutContaner>
                        </template>
                    )
                }
                <ProLayoutContaner {..._layoutDatas}>
                    {
                        childrens
                    }
                    {
                        !this.isShowHeader ? actionVnodes : null
                    }
                </ProLayoutContaner>
            </ElCard>
        )
    }
}