<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="index">
                <div class="header">
                    <div class="header-content">
                        <div class="header-content-item">
                            <div class="header-content-item-value">38</div>
                            <div class="header-content-item-label">正常设备</div>
                        </div>
                        <div class="header-content-item">
                            <div class="header-content-item-value">5</div>
                            <div class="header-content-item-label">报警设备</div>
                        </div>
                        <div class="header-content-item">
                            <div class="header-content-item-value">3</div>
                            <div class="header-content-item-label">离线设备</div>
                        </div>
                    </div>
                </div>
                <Cn-grid title="常用功能" class="mt20">
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="设备管理"
                        @click="jump('/pages/device/list')"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="网关管理" @click="send"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="直连装置管理" @click="send"></Cn-grid-item>
                </Cn-grid>
                <!-- <Cn-grid title="统计" class="mt20">
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="设备数量"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="设备状态" @click="send"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="告警数量" @click="send"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="暂态事件数量" @click="send"></Cn-grid-item>
                    <Cn-grid-item background="#fff"></Cn-grid-item>
                    <Cn-grid-item background="#fff"></Cn-grid-item>
                </Cn-grid> -->
                <!-- <Cn-grid title="能耗分析" class="mt20">
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="稳态治理"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="稳态报表" @click="send"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="暂态治理"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="暂态报表"></Cn-grid-item>
                    <Cn-grid-item background="#fff"></Cn-grid-item>
                    <Cn-grid-item background="#fff"></Cn-grid-item>
                </Cn-grid>
                <Cn-grid title="日志" class="mt20">
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="设备操作"></Cn-grid-item>
                    <Cn-grid-item background="#fff" src="/static/zantai.png" text="运维" @click="send"></Cn-grid-item>
                    <Cn-grid-item background="#fff"></Cn-grid-item>
                </Cn-grid> -->
            </view>
        </view>
    </Cn-page>
</template>
<script>
export default {
    data () {
        return {
            loading: false
        }
    },
    methods: {
        send () {
            uni.createPushMessage({
                title: '灿能',
                content: '灿能推送',
                success: function (res) {
                    console.log('推送成功')
                },
                fail: function (res) {
                    console.log('推送失败')
                }
            })
        },
        jump (url) {
            uni.navigateTo({
                url: url
            })
        },
    },
    onShow () {
        setTimeout(() => {
            this.loading = false
        }, 500);
    }
}
</script>
<style lang="scss">
.index {
    padding: 34rpx;

    .header {
        background: #fff;
        border-radius: 12rpx;
        background: $uni-color-primary;
        padding: 30rpx 10rpx 40rpx;

        .header-content {
            display: flex;
            justify-content: space-around;

            .header-content-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #fff;
                font-size: 28rpx;

                .header-content-item-value {
                    margin-bottom: 10rpx;
                }
            }
        }
    }
}
</style>
