<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="always">
                    <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
                        <div style="color:orangered;font-size: large;">
                            {{realData.rtuCount}}
                        </div>
                        <div>
                            <i class="el-icon-camera"></i><label>测站总数</label>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always">
                    <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
                        <div style="color:orangered;font-size: large;">
                            {{realData.warningRtuCount}}
                        </div>
                        <div>
                            <i class="el-icon-camera"></i><label>设备预警</label>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always">
                    <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
                        <div style="color:orangered;font-size: large;">
                            {{realData.orderDelayProcess}}
                        </div>
                        <div>
                            <i class="el-icon-camera"></i><label>超时工单</label>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always">
                    <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
                        <div style="color:orangered;font-size: large;">
                            {{realData.equipmentinspectionRtu}}
                        </div>
                        <div>
                            <i class="el-icon-camera"></i><label>已巡检测站</label>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>今日工单动态</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>今日巡检动态</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>通知公告</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>

<script>
// import { mapGetters } from "vuex";
//   import VueGridLayout from "vue-grid-layout";
//   import Navigation from "./component/navigation.vue";
//   import StateModel from "./component/stateModel.vue";
//   import ToDo from "./toDo.vue";
//   import EventModel from "./component/eventModel.vue";

//   import Dynamic from "./component/dynamic.vue";
//   import AddressBook from "./component/addressBook.vue";
//   import Work from "./component/work.vue";
//   import Yjxy from "./component/yjxy.vue";
//   import YjxyReport from "./component/yjxyReport.vue";

//   import { insertCustom, getLayout, getHomeGuide } from "@/api/home/home";

// import Stomp from "stompjs";
// import SockJS from "sockjs-client";
import { getRealData } from "@/api/home/home.js"
export default {
    name: "wel",
    components: {
        //   GridLayout: VueGridLayout.GridLayout,
        //   GridItem: VueGridLayout.GridItem,
        //   Navigation,
        //   StateModel,
        //   ToDo,
        //   Dynamic,
        //   EventModel,
        //   AddressBook,
        //   Work,

        //   YjxyReport,
    },

    data() {
        return {
            realData: {
                rtuCount: 0,
                warningRtuCount: 0,
                orderDelayProcess: 0,
                equipmentinspectionRtu: 0,
            },
            stompClient: null,
            init: [
                { x: 0, y: 0, w: 18, h: 5, i: "导航", isShow: 1 },
                { x: 18, y: 0, w: 6, h: 5, i: "状态", isShow: 1 },
                { x: 0, y: 8, w: 9, h: 9, i: "待办", isShow: 1 },
                { x: 9, y: 8, w: 9, h: 9, i: "动态", isShow: 1 },
                { x: 18, y: 8, w: 6, h: 19, i: "应急大事件", isShow: 1 },
                { x: 9, y: 17, w: 9, h: 10, i: "应急通讯录", isShow: 1 },
                { x: 0, y: 17, w: 9, h: 10, i: "应急排班表", isShow: 1 },
            ],
            layout: [],
            cache: [],
            editSw: false,
            dialog: false,
            id: "",
            guideForm: {},
            second: 0,
            timer: null,
            state: 5,
        };
    },
    created() {
        this.getData();
    },

    computed: {
        // ...mapGetters(["userInfo"]),
    },
    mounted() { },

    methods: {
        close() {
            this.dialog = false;
        },
        openReport() {
            // this.dialog = true;
            // this.$nextTick(() => {
            //   this.$refs["YjxyReport"].open();
            // });
        },
        getData() {


            getRealData().then((res) => {
                if (res.data.code === 200) {
                    this.realData.rtuCount = res.data.data.rtus;
                    this.realData.warningRtuCount = res.data.data.warningRtus;
                    this.realData.orderDelayProcess = res.data.data.delayOrders;
                    this.realData.equipmentinspectionRtu = res.data.data.equipmentInspectionCount;
                }
            });

            // this.layout = [];
            // getLayout().then((res) => {
            //   if (res.data.code === 200) {
            //     if (res.data.data.length) {
            //       res.data.data.forEach((e) => {
            //         if (e.type === 1) {
            //           this.layout.push({
            //             x: e.x,
            //             y: e.y,
            //             w: e.width,
            //             h: e.height,
            //             i: e.moduleName,
            //             isShow: e.isShow,
            //           });
            //         }
            //       });
            //     }

            //     if (this.layout.length === 0) {
            //       this.layout = this.init;
            //     }
            //   } else {
            //     this.layout = this.init;
            //   }
            // });
        },

        changeState(state) {
            this.state = state;

            if (state != 5) {
                if (this.timer) clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.second++;
                }, 1000);
            } else {
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.second = 0;
            }
        },
        confirm() {
            // let arr = this.layout.map((e) => {
            //   return {
            //     x: e.x,
            //     y: e.y,
            //     width: e.w,
            //     height: e.h,
            //     isShow: e.isShow,
            //     moduleName: e.i,
            //     moduleCode: e.i,
            //   };
            // });
            // let params = {
            //   layoutId: "",
            //   homeLayoutDetailEntityList: arr,
            // };
            // insertCustom(params).then((res) => {});
            // this.cache = [...this.layout];
            // this.editSw = false;
        },

        /**
         * 建立websocket连接
         */
        // initWebsocket: function () {
        //   console.log("WebSocket 准备建立连接");
        //   const socket = new SockJS("/api/galaxy-yjjcpt/ws");
        //   this.stompClient = Stomp.over(socket);
        //   this.stompClient.connect({}, this.onConnected, this.onError);
        // },

        /**
         * 连接成功： 订阅服务器的地址。为了浏览器可以接收到消息，必须先订阅服务器的地址
         */
        // onConnected: function () {
        //   console.log("WebSocket 连接成功");

        //   // 设置心跳发送接受频率（ms）默认为10000ms。 heart-beating是利用window.setInterval()去规律地发送heart-beats或者检查服务端的heart-beats。
        //   this.stompClient.heartbeat.outgoing = 10000;
        //   this.stompClient.heartbeat.incoming = 0;

        //   // 订阅
        //   this.stompClient.subscribe("/topic/event", this.onMessageReceived);
        // },

        /**
         * 连接失败
         */
        // onError: function (error) {
        //   console.log("WebSocket 连接失败", error);
        // },

        /**
         * 接收消息
         */
        // onMessageReceived: function (res) {
        //   console.log(res.body);

        //   console.log("WebSocket 接收消息-----------------------------------");
        // },

        /**
         * 发送消息
         */
        // sendMessage: function () {
        //   const chatMessage = {
        //     sender: "",
        //     content: "",
        //     type: "CHAT",
        //   };
        //   this.stompClient.send(
        //     "/app/chat.sendMessage",
        //     {},
        //     JSON.stringify(chatMessage)
        //   );
        // },

        /**
         * 关闭websocket连接
         */
        // closeSocket: function () {
        //   if (this.stompClient != null) {
        //     // this.stompClient.disconnect();
        //     this.stompClient.disconnect(() => {
        //       console.log("连接关闭");
        //     });
        //   }
        // },
    },
};
</script>
  
<style>
.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>