<template>
    <!-- 资源监控 -->
    <div class="v-widget-item sds-window-v5 syno-sds-widget-item active">
        <div class="v-widget-item-header"><img
                :src="resourceMonitorDetail.titleImgUrl"
                class="v-widget-item-header-icon">
            <div class="v-widget-item-header-title"><span
                    class="v-widget-item-header-title-text">
                    {{resourceMonitorDetail.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 resource-monitor-widget x-panel-noborder"
                style="width: 296px; height: 163px;">
                <div class="x-panel-bwrap">
                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct"
                        style="width: 296px; height: 159px;">
                        <div class="x-box-inner"
                            style="width: 296px; height: 164px;">
                            <div class=" resource-monitor-percentage-cmp horizontal x-box-item"
                                style="width: 296px; height: 24px; left: 0px;"
                                :style="{top:`${detailMessageIndex*24}px`}"
                                 v-for="(detailMessage,detailMessageIndex) in resourceMonitorDetail.detailMessageList" :key="detailMessage.id">
                                <div class="percentage-cmp-title">{{detailMessage.title}}</div>
                                <div class="percentage-cmp-hbar-background">
                                    <div class="percentage-cmp-hbar-fill"
                                        :style="{width:`${detailMessage.progressPrecent}`}"></div>
                                </div>
                                <div class="percentage-cmp-value">{{detailMessage.progressPrecent}}
                                </div>
                            </div>
                            <!--
                            <div class=" resource-monitor-percentage-cmp horizontal x-box-item"
                                style="width: 296px; height: 24px; left: 0px; top: 24px;">
                                <div class="percentage-cmp-title">RAM</div>
                                <div class="percentage-cmp-hbar-background">
                                    <div class="percentage-cmp-hbar-fill"
                                        style="width: 44.8px;"></div>
                                </div>
                                <div class="percentage-cmp-value">
                                    28%</div>
                            </div>
                            -->
                            <div class=" x-panel resource-Monitor-networkio-cmp x-panel-noborder x-box-item"
                                style="width: 296px; left: 0px;"
                                :style="{top:`${(selectMessageIndex*24)+48}px`}"
                                v-for="(selectMessage,selectMessageIndex) in resourceMonitorDetail.selectMessageList" :key="selectMessage.id">
                                <div class="x-panel-bwrap">
                                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                                        style="width: 296px; height: 24px;">
                                        <div
                                            style="float: left; width: 86px; height: 24px;">
                                            <span cellspacing="0"
                                                class="x-btn interface-selection-button syno-ux-button syno-ux-button-default syno-ux-button-dropdown x-btn-noicon"
                                                style="margin-left: 0px; width: auto;">
                                                <em
                                                    class="x-btn-arrow x-unselectable"><button
                                                        type="button"
                                                        class=" x-btn-text">{{selectMessage.title}}</button></em></span>
                                        </div>
                                        <div
                                            class=" x-form-display-field"
                                            :class="selectMessage.cls">
                                        </div>
                                        <div
                                            class=" x-form-display-field networkio-cmp-label out">
                                            {{selectMessage.text}}</div>
                                        <div
                                            class=" x-form-display-field"
                                            :class="selectMessage.cls1">
                                        </div>
                                        <div
                                            class=" x-form-display-field networkio-cmp-label">
                                            {{selectMessage.task}}</div>
                                        <div role="presentation"
                                            class="x-form-hidden-error-msg"></div>
                                        <div role="presentation"
                                            class="x-form-hidden-error-msg"></div>
                                        <div role="presentation"
                                            class="x-form-hidden-error-msg"></div>
                                        <div role="presentation"
                                            class="x-form-hidden-error-msg"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
        resourceMonitorDetail:{
            id: 1,
            title: '资源监控',
            titleImgUrl: '../../../../public/image/index/resource.png',
            detailMessageList: [
                {
                    id: 10,
                    title: 'CPU',
                    text: '',
                    task:  '',
                    progressNumerator:0,
                    progressDenominator:0,
                    progressPrecent:'1%',
                    cls: '',
                },
                {
                    id: 11,
                    title: 'RAM',
                    text: '',
                    task:  '',
                    progressNumerator:0,
                    progressDenominator:0,
                    progressPrecent:'28%',
                    cls: '',
                },
            ],
            selectMessageList:[
                {
                    id: 20,
                    title: '总计',
                    text: '1.2KB/s',
                    task:  '4.4KB/s',
                    cls: 'networkio-cmp-icon out',
                    cls1: 'networkio-cmp-icon in',
                }
            ],
        }

    }
  },
  components:{
  },
  name:'ResourceMonitor'

}
</script>