<template>
    <Cn-page :loading='loading' noPadding>
        <view slot='body'>
            <view class='detail'>
                <view class="header"> </view>
                <view class="des">
                    <text>设备基础信息</text>
                    <text class="ml10">设备状态</text>
                </view>
                <view class="nav">
                    <view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
                        v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
                    </view>
                </view>
                <view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
                    <view v-show="navMenuActive == 0">
                        <basic></basic>
                    </view>
                    <view v-show="navMenuActive == 1">
                        <xieBo></xieBo>
                    </view>
                    <view v-show="navMenuActive == 2">
                        <view>
                            <text>设备功率信息</text>
                        </view>
                    </view>
                    <view v-show="navMenuActive == 3">
                        <view>
                            <text>设备波形信息</text>
                        </view>
                    </view>
                    <view v-show="navMenuActive == 4">
                        <view>
                            <text>设备I/O信息</text>
                        </view>
                    </view>
                    <view style="height:20rpx"></view>
                </view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import basic from "./APF/basic.vue";
import xieBo from "./APF/xieBo.vue";

export default {
    components: {
        basic,
        xieBo
    },
    data () {
        return {
            loading: false,
            navMenuActive: 0,
            navHeight: 0,
            navMenuList: [{
                text: '基本'
            }, {
                text: '谐波'
            }, {
                text: '功率'
            }, {
                text: '波形'
            }, {
                text: 'I/O'
            }]
        }
    },
    methods: {
        navMenuClick (idx) {
            this.navMenuActive = idx
        },
        init () {
            setTimeout(() => {
                // 获取nav高度
                uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
                    this.navHeight = rect.height
                }).exec()
            }, 1000);
        }
    },
    onLoad (options) {
        this.init()
    },

}
</script>
<style lang='scss'>
.detail {

    // background: #fff;
    .header {
        height: 400rpx;
        background: $uni-color-primary;
    }

    .des {
        padding: 20rpx 20rpx 0;
        font-size: 28rpx;
        color: #999;
    }

    .nav {
        position: sticky;
        top: 0;
        left: 0;
        padding: 20rpx;
        display: flex;
        background: rgb(243, 244, 245);

        .nav-menu {
            padding: 10rpx 20rpx;
            margin-left: 20rpx;
            font-size: 28rpx;
            border-radius: 8rpx;
            background: #fff;

            &:first-of-type {
                margin-left: 0;
            }

            &-active {
                background: $uni-color-primary;
                color: #fff;
            }
        }

    }

    .content {
        box-sizing: border-box;
        padding: 0 20rpx;
    }


}
</style>