<template>
    <!-- 已连接用户 -->
    <div class="v-widget-item sds-window-v5 syno-sds-widget-item">
        <div class="v-widget-item-header"><img
                :src="connectedUserDetail.titleImgUrl"
                class="v-widget-item-header-icon">
            <div class="v-widget-item-header-title"><span
                    class="v-widget-item-header-title-text">
                    {{connectedUserDetail.title}}
                </span></div>
            <div class="v-widget-item-header-tools">
                <div class="v-widget-item-header-tool-icon minimize"></div>
                <div class="v-widget-item-header-tool-icon close"></div>
            </div>
        </div>
        <div class="v-widget-item-content">
            <div class=" x-panel sds-widget-gridpanel x-panel-noborder x-grid-panel"
                style="width: 318px;">
                <div class="x-panel-bwrap">
                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                        style="width: 318px; height: 168px;">
                        <div class="x-grid3" hidefocus="true"
                            style="width: 318px; height: 168px;">
                            <div class="x-grid3-viewport">
                                <div class="x-grid3-scroller"
                                    style="overflow: hidden; width: 318px; height: 168px;">
                                    <div class="x-grid3-body" style="width:294px;" v-for="detailMessage in connectedUserDetail.detailMessageList">
                                        <div class="x-grid3-row  x-grid3-row-first x-grid3-row-last"
                                            style="width:294px;">
                                            <table class="x-grid3-row-table"
                                                border="0" cellspacing="0"
                                                cellpadding="0"
                                                style="width:294px;">
                                                <tbody>
                                                    <tr>
                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first x-grid3-cell-first-visible "
                                                            style="padding: 0px;width: 38px;"
                                                            tabindex="0">
                                                            <div
                                                                class="x-grid3-cell-inner x-grid3-col-0 x-unselectable">
                                                                <div
                                                                    :class="detailMessage.cls">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-who "
                                                            style="padding: 0px 6px 0px 0px;width: 80px;"
                                                            tabindex="0">
                                                            <div
                                                                class="x-grid3-cell-inner x-grid3-col-who x-unselectable">
                                                                <div
                                                                    class="syno-sysinfo-username">
                                                                </div>{{detailMessage.title}}
                                                            </div>
                                                        </td>
                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-type "
                                                            style="padding: 0px 6px 0px 0px;width: 64px;"
                                                            tabindex="0">
                                                            <div
                                                                class="x-grid3-cell-inner x-grid3-col-type x-unselectable">
                                                                {{detailMessage.text}}</div>
                                                        </td>
                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-time "
                                                            style="padding: 0px 2px 0px 0px;width: 64px;"
                                                            tabindex="0">
                                                            <div
                                                                class="x-grid3-cell-inner x-grid3-col-time x-unselectable">
                                                                {{detailMessage.task}}</div>
                                                        </td>
                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-kick x-grid3-cell-last x-grid3-cell-last-visible "
                                                            style="width: 38px;"
                                                            tabindex="0">
                                                            <div
                                                                class="x-grid3-cell-inner x-grid3-col-kick x-unselectable">
                                                                <div
                                                                    class="syno-crrentconn-split">
                                                                </div>
                                                                <div
                                                                    :class="detailMessage.cls1">
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div><a href="#" class="x-grid3-focus"
                                        tabindex="-1"
                                        style="left: 0px; top: 0px;"></a>
                                </div>
                                <div class="arrow-scroller">
                                    <div class="up arrow-disabled">
                                        <div class="arrow-up"></div>
                                    </div>
                                    <div class="down arrow-disabled">
                                        <div class="arrow-down"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="x-grid3-resize-marker">
                                &nbsp;</div>
                            <div class="x-grid3-resize-proxy">&nbsp;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
        connectedUserDetail:{
            id: 1,
            title: '已连接用户',
            titleImgUrl: '../../../../public/image/index/wdgt_icn_title_current_connections.png',
            detailMessageList: [
                {
                    id: 10,
                    title: 'synology',
                    text: 'HTTP/HTTPS',
                    task:  '00:16:15',
                    cls: 'syno-crrentconn-icon',
                    cls1:'syno-sysinfo-disconn-button',
                },
                {
                    id: 11,
                    title: 'synology',
                    text: 'HTTP/HTTPS',
                    task:  '00:16:15',
                    cls: 'syno-crrentconn-icon',
                    cls1:'syno-sysinfo-conn-button'
                }
            ]
        }
    }
  },
  components:{
  },
  name:'ConnectedUser',

}
</script>