<template>
    <view :loading="loading" class="report" style="padding-top: 10px">
       
        <view class="navReport">
            <view class="tabsBox">
                <uni-segmented-control
                    :current="curTabs"
                    :values="items"
                    style-type="text"
                    active-color="#376cf3"
                    @clickItem="onClickItem"
                />
            </view>
        </view>
        <!-- 稳态报表 -->
        <SteadyState
            v-if="curTabs == 0"
            ref="SteadyStateRef"
            :indexList="indexList"
            :total="total"
            :status="status"
            :navHeight="navHeight"
            @scrolltolower="scrolltolower"
        />
        <!-- 暂态报表 -->
        <Transient
            v-if="curTabs == 1"
            ref="TransientRef"
            :indexList="indexList"
            :total="total"
            :status="status"
            :navHeight="navHeight"
            @scrolltolower="scrolltolower"
        />
    </view>
</template>
<script>
import SteadyState from './comp/steadyState.vue'
import Transient from './comp/transient.vue'
export default {
    components: {
        SteadyState,
        Transient,
    },
    props: {},
    data() {
        return {
            curTabs: 0,

            total: 6,
            loading: false,
            items: ['稳态报表', '暂降报告'],
            status: 'more', //more加载前  loading加载中 noMore加载后

            navHeight: 0,

            indexList: [],
        }
    },
    created() {},
    onPullDownRefresh() {
        this.refresh()
    },
    mounted() {
        uni.createSelectorQuery()
            .select('.navReport')
            .boundingClientRect((rect) => {
                //
                 this.navHeight = rect.height 
                // // #ifdef H5
               
                // // #endif
                // // #ifdef APP-PLUS
                // this.navHeight = rect.height 
                // // #endif
            })
            .exec()
    },

    methods: {
        onClickItem(e) {
            if (this.curTabs !== e.currentIndex) {
                this.curTabs = e.currentIndex
            }
        },

        scrolltolower() {
            if (this.total != this.indexList.length) {
                this.status = 'loading'
                this.info()
            } else {
                this.status = 'noMore'
            }
        },
        info() {
            setTimeout(() => {
                this.status = 'more'
            }, 1000)
        },
        refresh() {
            switch (this.curTabs) {
                case 0:
                    this.$refs.SteadyStateRef.store.reload()
                    break
                case 1:
                    this.$refs.TransientRef.reload()
                    break
            }
        },
    },

    computed: {},

    watch: {},
}
</script>
<style lang="scss">
.report {
    overflow: hidden;
    /deep/ .u-tabs__wrapper__nav {
        background: #fff;
    }
    /deep/ .u-tabs__wrapper__nav__item {
        flex: 1;
    }
    /deep/ .u-tabs__wrapper__nav__line {
        left: 80rpx;
    }

    /deep/ .u-u-subsection {
        width: 80% !important;
    }
    /deep/.tabsBox {
        .segmented-control {
            // height: 40px;
            background-color: #fff;
            border-bottom: 1px solid #cccccc70;
            .segmented-control__item {
                align-items: baseline;
                margin-top: 5px;
            }
        }

        .segmented-control__text {
            font-size: 30rpx !important;
            color: rgb(96, 98, 102);
        }
        .segmented-control__item--text {
            font-weight: bold;
            padding: 0 0 5rpx;
        }
    }
}
</style>
