<!--参数：
title-标题 string
ifUseTime-是否使用时间 boolean
beforeDate-开始时间 string
afterDate-结束时间 string
rptype --- 0汇总表 1明细表 number
-->
<template>
    <lj-win-common :title="title" :closeWinHandler="closeWinHandler" right-drawer-title="搜索" :rightDrawerInitOpen="rightDrawerInitOpen" :hideHeaderSub="hideHeaderSub" @fix-body="fixbody"
                   ref="baseWin">
        <!-- <mu-button v-if="showFilter" icon slot="header_right" @click="openRightDrawer">
            <i class="iconfont icon-filter"></i>
        </mu-button> -->
        <template slot="header_title">
            <slot name="header_title"></slot>
        </template>
        <template slot="header_right">
            <slot name="header_right"></slot>
        </template>
        <slot name="header_sub" slot="header_sub" v-if="!hideHeaderSub">
            <lj-tabs-quick
                ref="ljTabsQuick"
                :apiName="apiName"
                :query-fields="queryQuick"
                @confirm="handleFilterConfirm"
            >
                <template slot="right" slot-scope="data">
                    <slot name="tabs-right"></slot>
                </template>
            </lj-tabs-quick>
        </slot>
        <div class="body" slot="body" ref="bodyref">
            <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="refresh(queryParams)" :style="{'min-height': '100vh'}">
                <slot name="content" :loading="refreshing"></slot>
            </van-pull-refresh>
        </div>
        <template slot="footer">
            <slot name="rp_footer"></slot>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjTabsQuick from 'components/filtrate-widget/lj-tabs-quick';

    export default {
        name: "lj-win-report",
        components: {
            LjWinCommon,
            LjTabsQuick
        },
        props: {
            //标题
            title: {
                type: String,
                required: true,
                default: "报表"
            },
            // 获取单据列表的接口的接口
            apiName: {
                type: String,
                required: true
            },
            // 同lj-query-list的queryFields，快捷筛选
            queryQuick: {
                type: Array
            },
            rightDrawerInitOpen: {
                type: Boolean,
                default: false
            },
            closeWinHandler: {
                type: Function,
            },
            hideHeaderSub: {
                type: Boolean,
                default: false
            },
            innerFieldHandler: {
                type: Function,
            },
            resetStateHandler: {
                type: Function,
            },
            // tabsQuickRightHandler: {
            //     type: Function,
            //     default: function() {}
            // },


            // //报表类型； 0-普通报表  1-明细报表
            // rptype: {
            //     type: Number,
            //     // required: true,
            //     default: 0
            // },
            // ifUseTime: {
            //     type: Boolean,
            //     default: false
            // },
            // // showFilter: {
            // //     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
            // },
            // beforeDate: {
            //     type: String,
            //     default: ""
            // },
            // afterDate: {
            //     type: String,
            //     default: ""
            // },
            // // 明细报表类型 1-红色、2-蓝色、3-绿色、4-紫色、5-金色、6-青色
            // rpmxtype: {
            //     type: Number,
            //     default: 1
            // },
            // // 用于读写用户习惯，此筛选条件对应的key
            // habitKey: {
            //     type: String
            // },
            // //0精确到月 1精确到日
            // showday: {
            //     type: Number,
            //     default: 0
            // },             
        },
        data() {
            return {
                beforeDateTemp: "",
                afterDateTemp: "",
                queryParams:{},
                refreshing: false, // 下拉加载状态
                bodyHeight: 'auto',
            }
        },
        created() {
            this.beforeDateTemp = this.beforeDate;
            this.afterDateTemp = this.afterDate;
            if (this.habitKey ) {
                let userhabit = $lj.getStorage("reportHabit");
                if (!userhabit) {
                    userhabit = {}; 
                    if (this.habitKey) {
                        userhabit[this.habitKey] = {
                            beforeDate: this.beforeDate,
                            afterDate: this.afterDate,
                        }
                        $lj.setStorage("reportHabit", userhabit);
                    }
                } 
            }
        },
        mounted() {
            this.initSearched();
        },
        methods: {
            fixbody(obj){
                this.bodyHeight = obj.minHeight;
            },
            // /**取消搜索 */
            // fnResetParam(item) {
            //     // this.$refs.scrollToTop.totop();
            //     console.log('handleSearchbarCancel item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
            //     // let searchPro = this.fnSetSearchProperty(item);
            //     $lj.setUserFilterParams(this.apiName, item);
            //     this.refresh(item);
            //     // this.$refs.refresh_list.onRefresh(searchPro);
            //     // this.showFilter && this.$refs.ljBottomFiltrate.initSearched(searchPro);
            //     // this.$refs.ljTabsFiltrate && this.$refs.ljTabsFiltrate.close();
            //     this.$refs.ljTabsQuick && this.$refs.ljTabsQuick.close();
            //     // 清空关键字
            //     // this.emitChangeKeyword('');
            // },
            fnSetSearchProperty(item) {
                /**
                 * 情况1：只输入搜索栏
                 * 情况2：只选择tab菜单
                 * 情况3：先选择tab，后输入，属性不冲突
                 *          属性共存
                 *              目前情况：输入时清空tab
                 * 情况4：先输入，后选择tab，属性冲突
                 *          清空输入框
                 * 情况5：先选择tab，后输入，属性冲突
                 *          清空tab选择
                 * 
                 * 先检查【输入】【tab】重复属性
                 * 后判断是否需要清空操作
                 * 
                 * 对于冲突属性，如果是tab
                 */
                // 搜索菜单属性数组
                // let SPropArr = []; 
                // if (this.searchActions && this.searchActions.length > 0) {
                //     for (let i = 0; i < this.searchActions.length; i++) {
                //         SPropArr.push(this.searchActions[i].property);
                //     }
                // }
                let sameProArr = []
                // if (this.queryQuick && this.queryQuick.length > 0) {
                //     for (let i = 0; i < this.queryQuick.length; i++) {
                //         if (SPropArr.indexOf(this.queryQuick[i].property) > -1) {
                //             // 记录相同属性
                //             sameProArr.push(this.queryQuick[i].property);
                //         }
                //     }
                // }
                // console.log('冲突属性 sameProArr :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(sameProArr));
                // // 搜索栏与tabs栏没有冲突属性
                // if (!sameProArr.length) {
                //     return item
                // }
                // 检查输入的属性列表
                if (this.$refs.ljTabsQuick) {
                    let tabsCurrent = this.$refs.ljTabsQuick.currentQueryField;
                    for (const key in item) {
                        if (sameProArr.indexOf(key) > -1) {
                            if (item[key] != '') {
                                // 通过搜索栏，主动搜索, 出现与tabs栏属性冲突，清除tabs栏选择
                                this.$refs.ljTabsQuick.fnResetTabs(key);
                                let keywordObjTitle = $lj.getUserFilterTitle(this.apiName);
                                console.log('删除前 keywordObjTitle :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObjTitle));
                                if (keywordObjTitle.hasOwnProperty(key)) {
                                    // Reflect.deleteProperty(keywordObjTitle, key);
                                    keywordObjTitle[key] = '';
                                    $lj.setUserFilterTitle(this.apiName, keywordObjTitle);
                                    console.log('删除后 keywordObjTitle :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObjTitle));
                                }
                            } else {
                                if (this.currentRequestBody[key] && tabsCurrent[key] == this.currentRequestBody[key]) {
                                    // 与tabs栏已有属性共存，读取旧属性
                                    item[key] = this.currentRequestBody[key]
                                }
                            }
                        }
                    }
                }
                console.log('赋值后 item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                return item
            },
            /**读取搜索记录 */
            initSearched() {
                let keywordObj = $lj.getUserFilterParams(this.apiName);
                let keywordObjTitle = $lj.getUserFilterTitle(this.apiName);
                console.log('initSearched keywordObj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObj));
                console.log('initSearched keywordObjTitle :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObjTitle));
                // this._fnSetSearchedForTabsFiltrate(keywordObj, keywordObjTitle)
                // this._fnSetSearchedForSearchbar(keywordObj)
                this.queryParams = keywordObj;
                this.innerFieldHandler && this.innerFieldHandler(keywordObj, keywordObjTitle);

                this.refresh(keywordObj);

                // this.showFilter && this.$refs.ljBottomFiltrate.initSearched(keywordObj);
            },
            /**设置ljTabsFiltrate的搜索状态 */
            _fnSetSearchedForTabsFiltrate(keywordObj, keywordObjTitle) {
                console.log('this.$refs.ljTabsQuick  :>>>>>>>>>>>>>>>>>>>>>', this.$refs.ljTabsQuick);
                if (JSON.stringify(keywordObj) == '{}') {
                    // 如果是第一次进来，或没有历史搜索记录，读取默认属性
                    for (let i = 0; i < this.queryFields.length; i++) {
                        if (this.queryFields[i].hasOwnProperty("initValue")) {
                            keywordObj[this.queryFields[i].property] = this.queryFields[i].initValue
                        }
                    }
                    for (let i = 0; i < this.queryQuick.length; i++) {
                        if (this.queryQuick[i].hasOwnProperty("initValue")) {
                            keywordObj[this.queryQuick[i].property] = this.queryQuick[i].initValue
                        }
                    }
                    console.log('initSearched 读取默认值 keywordObj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObj));
                }
                // this.$refs.ljTabsFiltrate && this.$refs.ljTabsFiltrate.initSearched(keywordObj, keywordObjTitle);
                this.$refs.ljTabsQuick && this.$refs.ljTabsQuick.initSearched(keywordObj, keywordObjTitle);
            },
            _autoResetStatus() {
                // this.listLoading = false;
                // this.finished = false;
                // this.emptyState = false;
                // this.error = false;
                // console.log('_autoResetStatus this.listLoading :>>', JSON.stringify(this.listLoading));
            },
            /**下拉刷新完成 */
            fnRefreshed() {
                // console.log('this.listLoading :>>', JSON.stringify(this.listLoading));
                this.refreshing = false;
                // this.finished = false;
            },
            /**下拉刷新开始  */
            refresh(data) {
                this.resetStateHandler();
                // this._autoResetStatus();
                // this.listLoading = true;
                this.refreshing = true;
                console.log('组件的onRefresh this.refreshing :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.refreshing));
                this.$emit('refresh', data);


                // this.currentPageIndex = 1;
                // this.currentRequestBody = Object.assign({}, this.currentRequestBody, queryParams, this.queryHardParms);
                // this.currentRequestBody.pagesize = this.currentPageSize;
                // this.load((ret) => {
                //     this.dataResetCallback(ret);
                // });
            },
            /**tabs栏-筛选 */
            handleFilterConfirm(item, titles) {
                // this.$refs.scrollToTop.totop();
                console.log('handleFilterConfirm item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                console.log('handleFilterConfirm titles :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(titles));
                $lj.setUserFilterParams(this.apiName, item);
                titles != undefined && $lj.setUserFilterTitle(this.apiName, titles);
                this.queryParams = item;
                this.refresh(item);
                // this._fnSetSearchedForSearchbar(this.currentRequestBody);
            },


            openRightDrawer() {
                this.$refs.baseWin.openRightDrawer();
            },
            handleQuerySubmit(queryParams) {
                this.queryParams = queryParams;
                this.$refs.baseWin.closeRightDrawer();
                this.refresh();
            },
            // refresh(){
            //     var time = {
            //         beforeDate: this.beforeDateTemp,
            //         afterDate: this.afterDateTemp
            //     };
            //     time = Object.assign(this.queryParams,time);
            //     this.$emit('refresh',time);
            // },
            handleClickDateSelect() {               
                let self = this;
                // if(self.showday == 1){
                //     return;   
                // }
                $lj.removeEventListener("rp_date_select");
                $lj.addEventListener("rp_date_select", function (ret) {
                    if (ret.value) {
                        self.beforeDateTemp = ret.value.begindate;
                        self.afterDateTemp = ret.value.enddate;
                        if (self.habitKey) {
                            let userhabit = $lj.getStorage("reportHabit");
                            userhabit[self.habitKey] = {
                                beforeDate: self.beforeDateTemp,
                                afterDate: self.afterDateTemp,
                            }
                            $lj.setStorage("reportHabit", userhabit);
                        }
                        self.refresh();
                    }
                });
                $lj.openWin('rp-date-select', {
                    begindate: this.beforeDateTemp,
                    enddate: this.afterDateTemp,
                    mode:this.showday,
                })
            },
            showThisYear() {
                var myDate = new Date();
                var time = {};
                time.beforeDate = myDate.getFullYear() + "-" + 1 + '-' + 1;
                time.afterDate = myDate.getFullYear() + "-" + 12 + "-" + 31;
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM');
                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                // this.$refs.beforeDate.render();
                // this.$refs.afterDate.render();
                this.refresh();
            },
            showLastYear() {
                var myDate = new Date();
                var time = {};
                time.beforeDate = (myDate.getFullYear()-1) + "-" + 1 + '-' + 1;
                time.afterDate = (myDate.getFullYear()-1) + "-" + 12 + "-" + 31;
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM');
                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                // this.$refs.beforeDate.render();
                // this.$refs.afterDate.render();
                this.refresh();
            },
            showThisMonth(){
                var myDate = new Date();
                var time = {};
                var nowMonth = myDate.getMonth(); //当前月 
                var LastMonth = myDate.getMonth() - 1; //上月
                var nowYear = myDate.getFullYear(); //当前年 
                time.beforeDate = new Date(nowYear, nowMonth, 1); 
                time.afterDate = new Date(nowYear, nowMonth + 1, 0);
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM-dd');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM-dd');

                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                this.refresh();
            },
            showLastMonth(){
                var myDate = new Date();
                var time = {};
                var nowMonth = myDate.getMonth(); //当前月 
                var LastMonth = myDate.getMonth() - 1; //上月
                var nowYear = myDate.getFullYear(); //当前年 
                time.beforeDate = new Date(nowYear, LastMonth, 1); 
                time.afterDate = new Date(nowYear, LastMonth + 1, 0);
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM-dd');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM-dd');

                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                this.refresh();
            },
        },
        computed: {
            showFilter() {
                return this.queryFields && this.queryFields.length > 0;
            },
            colortop: function () {
                return {
                    kindred: this.rpmxtype == 1,
                    kindblue: this.rpmxtype == 2,
                    kindgreen: this.rpmxtype == 3,
                    kindpurple: this.rpmxtype == 4,
                    kindgold: this.rpmxtype == 5,
                    kindcyan: this.rpmxtype == 6,
                }
            },
            colortitle: function () {
                return {
                    bgred: this.rpmxtype == 1,
                    bgblue: this.rpmxtype == 2,
                    bggreen: this.rpmxtype == 3,
                    bgpurple: this.rpmxtype == 4,
                    bggold: this.rpmxtype == 5,
                    bgcyan: this.rpmxtype == 6,
                };
            }
        }
    }
</script>

<style lang="less">
.background-color {
    background-color: #fff!important;
}
.header-sub {
    padding-top: 5px;
}
.body {
    & > .van-overlay{
        z-index: 99!important;
    }
    & > .van-popover {
        width: -moz-calc(~"100% - 20px");
        width: -webkit-calc(~"100% - 20px");
        width: calc(~"100% - 20px");
        left: 10px!important;
        right: 10px!important;
        .van-popover__action {
            width: 100%;
        }
    }
    .van-popover__arrow {
        display: none;
    }
    .van-pull-refresh {
        // background-color: #ccc;
    }
}

    .reportcom-header-wap {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

    .reportcom-header {
        width: 120%;
        height: 115px;
        background-color: #fd9153;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position: relative;
        left: -10%;
        padding: 10px 0;
        margin-bottom: 10px;
        z-index: 9998;
    }

    .reportcom-header-sub {
        width: 130%;
        height: 125px;
        background-color: #ffba92;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position: relative;
        top: -120px;
        left: -23%;
        padding: 10px 0;
        margin-bottom: 10px;
        z-index: 9997;
    }

    .reportcom-header-sub-two {
        width: 140%;
        height: 125px;
        background-color: #fddecc;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position: relative;
        top: -240px;
        left: -35%;
        padding: 10px 0;
        margin-bottom: 10px;
        z-index: 9996;
    }

    .reportcom-header-title {
        color: #ffffff;
        font-size: 20px;
        margin-left: 10%;
    }

    .reportdetail_mx_title {
        color: white;
        font-size: 15px;
        font-weight: bold;
        padding: 3px 8px;
        margin-left: 20px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .reportdetail_mx_subtitle {
        position: absolute;
        right: 10px;
        padding: 3px;
        font-size: 15px;
        font-weight: bold;
        line-height: 20px;
        color: grey;
        margin-top: 3px;
    }

    .rpdate_ch {
        margin-left: 10px;
        padding: 8px 15px;
        color: #ffffff;
        font-size: 12px;
        background-color: #6495ed;
        border-radius: 10px;
    }

    .kindblue {
        border-top: 8px solid #0195da;
    }

    .kindgreen {
        border-top: 8px solid #88b04b;
    }

    .kindred {
        border-top: 8px solid #ff6f61;
    }

    .kindpurple {
        border-top: 8px solid #ba68c8;
    }

    .kindgold {
        border-top: 8px solid #FFD700;
    }

    .kindcyan {
        border-top: 8px solid #40E0D0;
    }

    .bgblue {
        background-color: rgb(1, 149, 218);
    }

    .bggreen {
        background-color: rgb(136, 176, 75);
    }

    .bgred {
        background-color: rgb(255, 111, 97)
    }

    .bgpurple {
        background-color: #ba68c8
    }

    .bggold {
        background-color: #FFD700
    }

    .bgcyan {
        background-color: #40E0D0
    }

    .rpdate {
        padding: 15px 8px;
        width: 100%;
        background-color: #f6f6f6;
    }
</style>