<template>
    <div class="table-box">
         <div class="max-w flex jc-sb">
            <div class="flex-1 mr-1 call-persondata flex">
                <div class="flex-1 flex ai-c jc-c">
                    <img class="img" src="img/zcry.png" />
                </div>
                <div class="flex-1 flex column jc-c">
                    <div class="titles">注册人员</div>
                    <div class="span">{{listDataInfo.allcount}}</div>
                </div>
            </div>
            <div class="flex-1 call-persondata flex">
                <div class="flex-1 flex ai-c jc-c">
                    <img class="img" src="img/zxry.png" />
                </div>
                <div class="flex-1 flex column jc-c">
                    <div class="titles">在线人员</div>
                    <div class="span">{{listDataInfo.onlineCount}}</div>
                </div>
            </div>
         </div>
         <div class="call-line"></div>
         <div class="call-content flex column">
            <el-carousel height="150px" indicator-position="outside">
                <el-carousel-item v-for="(item,index) in BannersArr" :key="index">
                    <div class="content-li flex">
                        <div class="content-title flex ai-c">
                            <span class="content-title-span"></span>
                            <span class="fz-14 fw-b fc-w">督查长</span>
                        </div>
                        <div class="flex-1 fz-14 fc-w" style="line-height:28px">{{item.title}}</div>
                    </div>
                    <div class="content-li flex">
                        <div class="content-title flex ai-c">
                            <span class="content-title-span"></span>
                            <span class="fz-14 fw-b fc-w">副督查长</span>
                        </div>
                        <div class="flex-1 fz-14 fc-w" style="line-height:28px">{{item.label}}</div>
                    </div>
                    <div class="content-li flex">
                        <div class="content-title flex ai-c">
                            <span class="content-title-span"></span>
                            <span class="fz-14 fw-b fc-w">防火片区</span>
                        </div>
                        <div class="flex-1 fz-14 fc-w" style="line-height:28px">{{item.value}}</div>
                    </div>
                </el-carousel-item>
            </el-carousel>
         </div>
         <div >
            <img class="call-phone cursor"  src="img/callphone.png"  @click="callPhoneAll" />
         </div>
    </div>
</template>

<script>
import axios from 'axios'
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
export default {
    name: 'setting',
    props:['globalmap'],
    data(){
        return {
            allPersonArr:[],
            areaName: localStorage.getItem("areaName"),
            BannersArr:[
                {
                    title: '张效玺',
                    label: '解清 杨东霞  鲍衍萍',
                    value: '大田庄乡、上冶镇、国有塔山林场平山分区、国有塔山林场牛岚分区'
                },
                {
                    title: '刘文军',
                    label: '朱孔现 王永祥 马杰',
                    value: '薛庄镇、胡阳镇、国有大青山林场、山东沂蒙抽水蓄能有限公司'
                },
                {
                    title: '张  雷',
                    label: '张  浩 刘成武',
                    value: '费城街道、国有祊河林场、国有许家崖林场'
                },
                {
                    title: '孔德阳',
                    label: '谭成亮 纪成永 于 杰       刘 露 刘宏达 张勇   ',
                    value: '梁邱镇、石井镇、新庄镇、朱田镇、国有老虎山林场'
                },
                {
                    title: '黄  芸',
                    label: '王  雷',
                    value: '东蒙镇、国有塔山林场塔山分区、国有塔山林场谭庄分区、山东天蒙旅游开发有限公司'
                },
                {
                    title: '赵元吉',
                    label: '龙希锋 周均营 郭永军     孟凡学',
                    value: '探沂镇、马庄镇'
                }
            ],
            listDataInfo:[]
        }
    },
    watch:{
         
    },
    created(){
        this.initWebSocket()
        this.getListData()  
    },
    mounted(){
        
    },
    methods:{
        getOnLineInfo(){
            getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
                this.listDataInfo = res.data
            })
        },
        getListData(){
          let arr = [1,2]
          let _this = this
          postMethodCommon("/FireCodePC/GetForestRangers?areaname="+this.areaName,arr).then(res =>{
            let rel = res.data
            _this.allPersonArr = rel
          })
        },
        callPhoneAll(){

        },
        initWebSocket() {
            let _this = this;
            if ("WebSocket" in window) {
                // 打开一个 web socket
                var ws = new WebSocket("ws://123.132.248.154:9225/ws");
                var heartCheck;
                ws.onopen = function () {
                    //Web Socket 已连接上，使用 send() 方法发送数据
                    console.log('WEBSOCKET-ONLINE')
                    heartCheck = setInterval(function() {
                        ws.send('HeartBeat');
                    }, 5000);
                };
                ws.onmessage = function (evt) {
                    clearInterval(heartCheck);
                    heartCheck = setInterval(function() {
                        ws.send('HeartBeat');
                    }, 5000);

                    _this.getOnLineInfo()
              
                };
                ws.onclose = function () {
                    console.log('WEBSOCKET-CLOSED')
                    clearInterval(heartCheck);
                    _this.initWebSocket()
                };
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        },
        
    }
}
</script>

<style scoped>
.table-box{
    width: 100%;
    height: 100%;
    padding: 20px 15px;
}
.call-persondata{
    height: 86px;
    border-image: linear-gradient(270deg, rgba(255, 223, 105, 0), rgba(255, 189, 56, 1)) 1 1;
}
.call-persondata .img{
    width: 68px;
    height: 67px;
}
.call-persondata .titles{
    font-weight: bold;
    color: #FFA513;
    font-size: 18px;
}
.call-persondata .span{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #D0D0D0;
}
.call-line{
    width: 404px;
    height: 2px;
    margin-top: 25px;
}
.call-content{
    height: 185px;
}
.content-li{
    width: 400px;
    min-height: 28px;
    /* background: linear-gradient(270deg, rgba(121,74,14,0) 0%, #442406 100%); */
    background-image:url(/img/call-center-bar.png);
    background:100% 100%;
    margin-top: 12px;
}
.content-title{
    width: 111px;
    height: 28px;
    /* background-image: url(/img/callleftbg.png); */
    background-size: 100% 28px;
    margin-right: 8px;
}
.content-title-span{
    width: 6px;
    height: 6px;
    background: #FACD44;
    margin: 0 10px;
}

.call-phone{
    width: 360px;
    height: 78px;
}




::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
}
  
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    border-radius: 5px
}

::-webkit-scrollbar-thumb {
    padding-top: 100px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
    background-color: #797979;
    min-height: 28px;
    border-radius: 4px;
    background-clip: padding-box
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .4)
}

::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
    background-color: rgba(0, 0, 0, .5)
}
</style>