<template>
    <div class="dv-home-box">
        <div class="dv-home-left" :style="isScreen ? 'width: 100%;' : ''">
            <div class="content">
                <div class="top_menu">
                    <ul class="top_menu_ul">
                        <li class="top_menu_item">
                            <span class="top_menu_item_title">数据采集测站</span>
                        </li>
                    </ul>
                    <div class="fullscreen_icon" @click="fullscreenTap">
                        <span class="anticon-fullscreen">
                            <svg viewBox="64 64 896 896" focusable="false" data-icon="fullscreen" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                <path d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="content_layout">
                    <el-container>
                        <el-aside :width="isCollapse ? '200px' : '0px'">
                            <div class="sider_menu">
                                <div class="sider_menu_item" :class="menuKey === 'view' ? 'active' : ''" @click="menuTap('view')">
                                    <div class="menu_title">
                                        <i class="i-ic-baseline-remove-red-eye" />
                                        <span>数据查看</span>
                                    </div>
                                </div>
                                <div class="sider_menu_item" :class="menuKey === 'model' ? 'active' : ''" @click="menuTap('model')">
                                    <div class="menu_title">
                                        <i class="i-ic-baseline-view-in-ar" />
                                        <span>模型数据</span>
                                    </div>
                                </div>
                            </div>
                            <div v-if="isCollapse" class="collapse_icon" @click="collapseTap">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABjCAYAAABqpXv5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoNJREFUeNrsmslKA0EQhrvc16hERVxRcUONS1yewqt48eDRk/gCHnwMQbz7ICJ48yYKCl68uIAgBKNjjanAMJn0MlPdpy74CZNAvpnu6ppefhBBWTgIQC02OQCFjCJq0DasDbWNylWptqIHtUVAYRM2hFpHNcbbkzumUQuUFMIWrAG1jBqXZQpHNFPGDajSMmt0UCJ064yBLNGH2kS16g64tDGCWqW+EjZhs6i5NKXENONWUKNp65ZJxoX9k89SJHWik2pcZ9aKrIo8PVEzR/mXxRiqYJJxaWHzqBnuF1tSxq2hhm28RaPRSv3TZ+uVXY1uqnEdNucHgqp1kSPjVLAJeg+Bi5lPQTiKBuEwPMzDPMzDPMzDPIxh3riPmmT6/xfUmQy2xDjL6o1egAjKOwlr5BEGUIB6Rb3LnuwLde+qz5poQQF0d7L+eJesfkJdqWAnqC7Nmz1FfcS+C/eqjlB3OrBHWi6p4g31ndDfxzSknnWa8UJzX6MUuw6n8QeCtvtEbJNMthgspdwXyZkmSJgcU5rNeBO5DvvnF7VL1z86sEODp3mIZeQ1fe7GB3Q92KWo7BmCxpN9Jnx/TU3aEv8hqYJwRc04tVn1A51m3EMtMgGfUOeqqs+1iJ9z1Wd+DuJhHuZhHuZhHsYBu1WsVhinWxUjg5N9fYi4JqyfWEDMomH1LAYS/CDWTplAYj5hPz8DhdOF9WQQNGw1bGeeoOnhYTnNBQPDUOZzajB0J2U6gYeUVqhU3gLI4Lsydk1ARpOXkR8EGBxl2k4XYLKvhZm6gep3AatmqtSdBBaMeXV9V2DJBZjoKAOLlsMarxxY9je2EzDnAlbda/n3N4JL5+afAAMAl2hr012qfrMAAAAASUVORK5CYII=" alt="">
                            </div>
                        </el-aside>
                        <div v-if="!isCollapse" class="open_icon" @click="collapseTap">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABjCAYAAABqpXv5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoNJREFUeNrsmslKA0EQhrvc16hERVxRcUONS1yewqt48eDRk/gCHnwMQbz7ICJ48yYKCl68uIAgBKNjjanAMJn0MlPdpy74CZNAvpnu6ppefhBBWTgIQC02OQCFjCJq0DasDbWNylWptqIHtUVAYRM2hFpHNcbbkzumUQuUFMIWrAG1jBqXZQpHNFPGDajSMmt0UCJ064yBLNGH2kS16g64tDGCWqW+EjZhs6i5NKXENONWUKNp65ZJxoX9k89SJHWik2pcZ9aKrIo8PVEzR/mXxRiqYJJxaWHzqBnuF1tSxq2hhm28RaPRSv3TZ+uVXY1uqnEdNucHgqp1kSPjVLAJeg+Bi5lPQTiKBuEwPMzDPMzDPMzDPIxh3riPmmT6/xfUmQy2xDjL6o1egAjKOwlr5BEGUIB6Rb3LnuwLde+qz5poQQF0d7L+eJesfkJdqWAnqC7Nmz1FfcS+C/eqjlB3OrBHWi6p4g31ndDfxzSknnWa8UJzX6MUuw6n8QeCtvtEbJNMthgspdwXyZkmSJgcU5rNeBO5DvvnF7VL1z86sEODp3mIZeQ1fe7GB3Q92KWo7BmCxpN9Jnx/TU3aEv8hqYJwRc04tVn1A51m3EMtMgGfUOeqqs+1iJ9z1Wd+DuJhHuZhHuZhHsYBu1WsVhinWxUjg5N9fYi4JqyfWEDMomH1LAYS/CDWTplAYj5hPz8DhdOF9WQQNGw1bGeeoOnhYTnNBQPDUOZzajB0J2U6gYeUVqhU3gLI4Lsydk1ARpOXkR8EGBxl2k4XYLKvhZm6gep3AatmqtSdBBaMeXV9V2DJBZjoKAOLlsMarxxY9je2EzDnAlbda/n3N4JL5+afAAMAl2hr012qfrMAAAAASUVORK5CYII=" alt="">
                        </div>
                        <el-main>
                            <div class="content_top" />
                            <index-vue v-if="menuKey === 'view'" />
                            <div v-if="menuKey === 'model'" style="height: calc(100% - 17px);">
                                <iframe width="100%" height="100%" frameborder="0" style="margin-top: 10px" src="http://192.168.0.109:5179/" />
                            </div>
                        </el-main>
                    </el-container>
                </div>
                <div class="footer_container">
                    <div class="footer" />
                </div>
            </div>
        </div>
        <div class="dv-home-right" :style="isScreen ? 'display: none;' : ''">
            <div class="top_line" />
            <div class="row_circle">
                <el-row>
                    <el-col :span="6">
                        <div class="circle_item a">
                            <div>
                                <span class="number">31</span>个
                            </div>
                        </div>
                        <div class="circle_item_title">
                            设备数量
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="circle_item b">
                            <div>
                                <span class="number">0</span>/31个
                            </div>
                        </div>
                        <div class="circle_item_title">
                            网卡欠费
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="circle_item c">
                            <div>
                                <span class="number">29</span>个
                            </div>
                        </div>
                        <div class="circle_item_title">
                            测点数量
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="circle_item d">
                            <div>
                                <span class="number">0</span>个
                            </div>
                        </div>
                        <div class="circle_item_title">
                            近一周报警
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="message_container">
                <div class="card_header">
                    <div class="text_container" :class="msg_type === '1' ? 'selected' : ''" @click="msgTypeTap('1')">
                        报警消息
                    </div>
                    <div class="text_container" :class="msg_type === '2' ? 'selected' : ''" @click="msgTypeTap('2')">
                        报表消息
                    </div>
                </div>
                <div class="message_content">
                    <el-scrollbar v-if="msg_type === '1'">
                        <div v-for="item in dataJson.data" :key="item" class="message-item">
                            <div class="title_wrapper">
                                <span class="dot" />
                                <span class="time">{{ item.time }}</span>
                            </div>
                            <div class="content_wrapper">
                                <span class="content">{{ item.name }}</span>
                            </div>
                        </div>
                    </el-scrollbar>
                    <div v-if="msg_type === '2'" class="message_empty">
                        <div class="empty-imag">
                            <svg class="empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                                <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
                                    <ellipse class="empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7" />
                                    <g class="empty-img-simple-g" fill-rule="nonzero">
                                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
                                        <path class="empty-img-simple-path" d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" />
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="empty-description">
                            暂无数据
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import indexVue from './components/index.vue'
import { useAppStore } from '~src/store'
import { getRandom } from 'js-fast-way'
import dataJson from './data.json'

const appStore = useAppStore()

//菜单
const menuKey = ref('view')
const menuTap = (val) => {
    menuKey.value = val
    isScreen.value = val === 'model'
    appStore.isEchartSize = getRandom()
}

//全屏
const isScreen = ref(false)
const fullscreenTap = () => {
    isScreen.value = !isScreen.value
    appStore.isEchartSize = getRandom()
}

// 侧边栏
const isCollapse = ref(true)
const collapseTap = () => {
    isCollapse.value = !isCollapse.value
    setTimeout(() => {
        appStore.isEchartSize = getRandom()
    }, 200)
}

// 报警消息
const msg_type = ref('1')
const msgTypeTap = (val) => {
    msg_type.value = val
}
</script>

<style lang="scss">
@import "./style";
</style>
