<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"
            :indexList="indexList"
            :total="total"
            :status="status"
            :navHeight="navHeight"
            @scrolltolower="scrolltolower"
        />
        <!-- 暂态报表 -->
        <Transient
            v-if="curTabs == 1"
            :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: [
                {
                    name: '测试监测点',
                    item: '2022-01-01至2022-01-01',
                    type: '1',
                    status: '1',
                },
                {
                    name: '测试监测点',
                    item: '2022-01-01至2022-01-01',
                    type: '2',
                    status: '1',
                },
                {
                    name: '测试监测点',
                    item: '2022-01-01至2022-01-01',
                    type: '1',
                    status: '1',
                },
                {
                    name: '测试监测点',
                    item: '2022-01-01至2022-01-01',
                    type: '1',
                    status: '0',
                },
                {
                    name: '测试监测点',
                    item: '2022-01-01至2022-01-01',
                    type: '1',
                    status: '0',
                },
                {
                    name: '测试监测点',
                    item: '2022-01-01至2022-01-01',
                    type: '1',
                    status: '0',
                },
            ],
        }
    },
    created() {},
    mounted() {
        uni.createSelectorQuery()
            .select('.navReport')
            .boundingClientRect((rect) => {
                //
                // #ifdef H5
                this.navHeight = rect.height + 65
                // #endif
                // #ifdef APP-PLUS
                this.navHeight = rect.height + 10
                // #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)
        },
    },

    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 {
        border-bottom: 1px solid #cccccc70;
        .segmented-control {
            height: 49px;
            background-color: #fff;
        }

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