<template>
    <!-- 系统状况 -->
    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
        <div class="v-widget-item-header"><img
                :src="runningStateDetail.titleImgUrl"
                class="v-widget-item-header-icon">
            <div class="v-widget-item-header-title"><span
                    class="v-widget-item-header-title-text">
                    {{runningStateDetail.title}}
                </span></div>
            <div class="v-widget-item-header-tools">
                <div class="v-widget-item-header-tool-icon toolbar"></div>
                <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 x-panel-noborder"
                style="width: 318px; height: 172px;">
                <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-panel syno-sysinfo-system-health x-panel-noborder"
                            style="width: 318px;">
                            <div class="x-panel-bwrap">
                                <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct"
                                    style="padding: 0px 11px 5px; width: 296px; height: 163px;">
                                    <div class="x-box-inner"
                                        style="width: 296px; height: 164px;">
                                        <div class=" syno-sysinfo-system-health-status x-box-item"
                                            style="width: 296px; height: 76px; left: 0px; top: 0px;">
                                            <div>
                                                <div
                                                    :class="runningStateDetail.centerDetail.cls">
                                                </div>
                                            </div>
                                            <div>
                                                <div
                                                    class="syno-sysinfo-system-health-content-wrap">
                                                    <div
                                                        class="syno-sysinfo-system-health-summary syno-sysinfo-system-health-content-header-normal">
                                                        {{runningStateDetail.centerDetail.title}}</div>
                                                    <div
                                                        class="syno-sysinfo-system-health-content">
                                                        {{runningStateDetail.centerDetail.text}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class=" x-panel x-panel-noborder x-box-item"
                                            style="width: 296px; left: 0px; top: 80px;">
                                            <div class="x-panel-bwrap">
                                                <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                                                    style="width: 296px; height: 84px;">
                                                    <div
                                                        class=" x-panel sys-info-south-table">
                                                        <div class="x-panel-bwrap">
                                                            <div class="x-panel-body x-panel-body-noheader x-table-layout-ct"
                                                                style="height: 82px;">
                                                                <table
                                                                    class="x-table-layout"
                                                                    cellspacing="0">
                                                                    <tbody>
                                                                        <tr v-for="detailMessage in runningStateDetail.detailMessageList" :key="detailMessage.id">
                                                                            <td
                                                                                class="x-table-layout-cell">
                                                                                <div>
                                                                                    <p
                                                                                        class="syno-sysinfo-system-health-south-title">
                                                                                        {{detailMessage.title}}
                                                                                    </p>
                                                                                </div>
                                                                            </td>
                                                                            <td
                                                                                class="x-table-layout-cell">
                                                                                <div>
                                                                                    <p
                                                                                        class="syno-sysinfo-system-health-south-data">
                                                                                       {{detailMessage.text}}
                                                                                    </p>
                                                                                </div>
                                                                            </td>
                                                                        </tr>

                                                                        <!-- 
                                                                        <tr>
                                                                            <td
                                                                                class="x-table-layout-cell sys-info-row x-row-alt row-left">
                                                                                <div
                                                                                    class=" x-panel">
                                                                                    <div
                                                                                        class="x-panel-bwrap">
                                                                                        <div
                                                                                            class="x-panel-body x-panel-body-noheader">
                                                                                            <span
                                                                                                cellspacing="0"
                                                                                                class="x-btn sys-info-btn syno-ux-button syno-ux-button-default syno-ux-button-dropdown x-btn-noicon"
                                                                                                style="width: auto; margin-left: 0px;">
                                                                                                <em
                                                                                                    class="x-btn-arrow x-unselectable"><button
                                                                                                        type="button"
                                                                                                        class=" x-btn-text">局域网
                                                                                                    </button>
                                                                                                </em>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td
                                                                                class="x-table-layout-cell sys-info-row x-row-alt">
                                                                                <div>
                                                                                    <p
                                                                                        class="syno-sysinfo-system-health-south-data">
                                                                                        172.21.2.64
                                                                                    </p>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td
                                                                                class="x-table-layout-cell">
                                                                                <div>
                                                                                    <p
                                                                                        class="syno-sysinfo-system-health-south-title">
                                                                                        运行时间
                                                                                    </p>
                                                                                </div>
                                                                            </td>
                                                                            <td
                                                                                class="x-table-layout-cell">
                                                                                <div>
                                                                                    <p
                                                                                        class="syno-sysinfo-system-health-south-data">
                                                                                        04:22:02
                                                                                    </p>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        -->
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
        runningStateDetail:{
            id: 1,
            title: '系统状况',
            titleImgUrl: '../../../../public/image/index/windowInfo.png',
            centerDetail:{
                title:'正常',
                text:'您的 VirtualDSM 运转正常。',
                cls:'syno-sysinfo-system-health-west-normal',
            },
            
            detailMessageList: [
                {
                    id: 10,
                    title: '服务器名称',
                    text: 'DSM-Demo',
                    cls: '',
                },
                {
                    id: 11,
                    title: '局域网',
                    text: '172.21.2.64',
                    cls: '',
                },
                 {
                    id: 11,
                    title: '运行时间',
                    text: '04:22:02',
                    cls: '',
                }
            ]
        }
    }
  },
  components:{
  },
  name:'RunningState',

}
</script>