<!--单据列表查询通用模板窗口-->
<!--封装了数据获取请求、下拉刷新、上拉加载更多、高级搜索、新建单据按钮等用户交互方式-->
<!--events-->
    <!--新建按钮点击事件add-click-->
    <!--高级筛选条件点击query-field-click，详见lj-query-list-->
    <!--高级筛选条件值改变query-field-change，详见lj-query-list-->
<!--methods-->
    <!--打开右侧抽屉openRightDrawer()-->
    <!--关闭右侧抽屉closeRightDrawer()-->
    <!--直接设置条件的值setQueryParam(property, value)同lj-query-list-->
<!--slots-->
    <!--header：app bar中间，默认为标题-->
    <!--header_right：appbar 右侧，通常为图标按钮-->
    <!--header_sub： appbar下方子标题，固定在顶部-->
    <!--body_list：中间内容，通常为单据列表-->
    <!--footer：底部，固定-->

<template>
    <lj-win-common :title="title" right-drawer-title="搜索" :rightDrawerInitOpen="rightDrawerInitOpen"
                   ref="baseWin" :showBack="showBack">
        <slot slot="header" name="header"></slot>
        <slot name="header_left" slot="header_left"></slot>
        <slot name="header_right" slot="header_right"></slot>
        <mu-button v-if="addable" icon slot="header_right" @click="handleAddButton">
            <i class="iconfont icon-add"></i></mu-button>
        <mu-button v-if="showFilter" icon slot="header_right" @click="openRightDrawer">
            <i class="iconfont icon-filter"></i></mu-button>
        <slot name="header_sub" slot="header_sub"></slot>
        <div class="body" slot="body" ref="bodyref">
            <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load"
                          :loaded-all="loadedAll">
                <slot name="body_list" ref="bodyListRef"/>
            </mu-load-more>
        </div>
        <slot slot="footer" name="footer"></slot>
        <!-- 右方抽屉内容 -->
        <lj-query-list v-if="showFilter" slot="drawer_right" :habit-key="apiName" :query-fields="queryFields"
                       :hard-parms="queryHardParms"
                       :binding-parms="bindingParms"
                       :auto-refresh="autoRefresh"
                       @on-query-submit="handleQuerySubmit"
                       @field-click="handleQueryFieldClick"
                       @field-change="handleQueryFieldChange"
                       ref="queryList"/>
    </lj-win-common>
</template>
<script>
    import LjWinCommon from 'components/lj-win-common';
    import LjQueryList from "components/lj-query-list";

    export default {
        name: "lj-win-index-common-tab",
        components: {
            LjQueryList,
            LjWinCommon
        },
        props: {
            // 标题名称
            title: {
                type: String,
                required: true
            },
            // 是否显示加号图标
            addable: {
                type: Boolean,
                default: false
            },
            // 同lj-query-list的queryFields，设置后显示筛选按钮，点击弹出高级筛选框
            queryFields: {
                type: Array
            },
            // 同lj-query-list的hardParms
            queryHardParms: {
                type: Object
            },
            // 同lj-query-list的bindingParms
            bindingParms: {
                type: Object
            },
            // queryParams: {
            //     type: Array
            // },
            // 获取单据列表的接口的接口
            apiName: {
                type: String,
                required: true
            },
            // “加载更多”完成时的数据处理回调（函数入参：接口返回的原对象；返回boolean，true继续加载，false没有更多）
            dataLoadedCallback: {
                type: Function
            },
            // “下拉刷新”或高级搜索触发的数据处理回调（入参：接口返回原对象）
            dataResetCallback: {
                type: Function,
                required: true
            },
            // 右侧抽屉初始时是否打开
            rightDrawerInitOpen: {
                type: Boolean,
                default: false
            },
            // 是否显示返回按钮
            showBack: {
                type: Boolean,
                default: true
            },
            // 是否自动刷新
            autoRefresh: {
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                loadedAll: true,
                loading: false,
                refreshing: false,
                currentPageIndex: 1,
                currentPageSize: 20,
                currentRequestBody: {}
            }
        },
        created() {

        },
        mounted() {
        },
        methods: {
            openRightDrawer() {
                this.$refs.baseWin.openRightDrawer();
            },
            closeRightDrawer() {
                this.$refs.baseWin.closeRightDrawer();
            },
            closeWin() {
                $lj.closeWin();
            },
            handleAddButton() {
                this.$emit('add-click');
            },
            handleQuerySubmit(queryParams) {
                this.closeRightDrawer();
                this.refresh(queryParams);
                this.$emit('handle-sumbit',queryParams);
            },
            refresh(queryParams) {
                let token = $lj.getStorage("token");
                if (token === "" || token === undefined){
                    return;
                }
                this.currentPageIndex = 1;
                this.currentRequestBody = Object.assign(queryParams || this.currentRequestBody || {}, this.queryHardParms);
                this.currentRequestBody.token = token;
                this.currentRequestBody.pageindex = this.currentPageIndex;
                this.currentRequestBody.pagesize = this.currentPageSize;
                this.refreshing = true;
                let self = this;
                $lj.postLJRequest(this.apiName, this.currentRequestBody, function (ret) {
                    self.refreshing = false;
                    if (ret) {
                        for (let prop in ret) {
                            if (ret[prop] instanceof Array) {
                                if (ret[prop].length === 0) {
                                    $lj.toast("未查找到相关记录，请更改搜索条件后重试");
                                    // self.$refs.baseWin.openRightDrawer();
                                }
                                break;
                            }
                        }
                        self.dataResetCallback(ret);
                        if (self.hasLoadmoreFunction) {
                            self.loadedAll = false;
                        }
                    }
                })
            },
            load() {
                if (!this.hasLoadmoreFunction) {
                    return;
                }
                this.currentPageIndex += 1;
                this.currentRequestBody.pageindex = this.currentPageIndex;
                this.loading = true;
                let self = this;
                $lj.postLJRequest(this.apiName, this.currentRequestBody, function (ret) {
                    self.loading = false;
                    if (ret) {
                        let callbackResult = self.dataLoadedCallback(ret);
                        if (callbackResult !== true && callbackResult !== false) {
                            console.error('加载更多回调错误，必须返回true或false');
                        } else {
                            self.loadedAll = !callbackResult;
                        }
                    }
                })
            },
            handleQueryFieldClick(event) {
                this.$emit("query-field-click", event);
            },
            handleQueryFieldChange(event){
                this.$emit("query-field-change", event);
            },
            setQueryParam(property, value) {
                this.$refs.queryList.setQueryParam(property, value);
            }
        },
        computed: {
            showFilter() {
                return this.queryFields && this.queryFields.length > 0;
            },
            hasLoadmoreFunction() {
                return this.dataLoadedCallback;
            }
        }
    }
</script>