<template>
    <!-- 存储 -->
    <div class="v-widget-item sds-window-v5 syno-sds-widget-item">
        <div class="v-widget-item-header"><img
                :src="storageDetail.titleImgUrl"
                class="v-widget-item-header-icon">
            <div class="v-widget-item-header-title"><span
                    class="v-widget-item-header-title-text">
                    {{storageDetail.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 x-panel-noborder" style="width: 318px;">
                <div class="x-panel-bwrap">
                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                        style="width: 100%; height: 168px;">
                        <div class=" x-panel sds-widget-gridpanel sys-storage-grid x-panel-noborder x-grid-panel"
                            style="width: 100%;">
                            <div class="x-panel-bwrap">
                                <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                                    style="width: 100%; height: 168px;">
                                    <div class="x-grid3" hidefocus="true"
                                        style="width: 100%; height: 168px;">
                                        <div class="x-grid3-viewport">
                                            <div class="x-grid3-scroller"
                                                style="overflow: hidden; width: 100%; height: 168px;">
                                                <div class="x-grid3-body"
                                                    style="width:290px;">
                                                    <div class="x-grid3-row  x-grid3-row-first x-grid3-row-last"
                                                        style="width: 100%;">
                                                        <table
                                                            class="x-grid3-row-table"
                                                            border="0"
                                                            cellspacing="0"
                                                            cellpadding="0"
                                                            style="width: 100%;">
                                                            <tbody>
                                                                <tr v-for="detailMessage in storageDetail.detailMessageList" :key="detailMessage.id">
                                                                    <td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first x-grid3-cell-first-visible x-grid3-cell-last-visible" tabindex="0" style="width: 288px;"><div class="x-grid3-cell-inner x-grid3-col-0 x-unselectable" unselectable="on"><div class="syno-sysinfo-storage-usage-volume-box"><div class="icon-block"><div :class="detailMessage.cls"></div><div :class="detailMessage.cls1"></div></div><div class="data-block"><div class="volume-name-status">{{detailMessage.title}} (<span class="green-status">{{detailMessage.text}}</span>)</div><div class="usage-bar-container"><div class="usage-bar-bg"><div class="usage-bar-fill" :style="{width:`${detailMessage.progressPrecent}`}"></div></div></div><div class="usage-text"><span class="usage-used-text">{{detailMessage.progressNumerator}}GB</span>&nbsp;/&nbsp;<span>{{detailMessage.progressDenominator}}GB</span></div><div class="usage-ratio-text">{{detailMessage.progressPrecent}}</div></div></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>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
        storageDetail:{
            id: 1,
            title: '存储',
            titleImgUrl: '../../../../public/image/index/wdgt_icn_title_storage_manager.png',
            detailMessageList: [
                {
                    id: 10,
                    title: '存储空间',
                    text: '良好',
                    task:  '',
                    progressNumerator:4.4,
                    progressDenominator:19.2,
                    progressPrecent:'23%',
                    cls: 'icon-volume-img',
                    cls1:'icon-volume-status normal'
                }
            ]
        }
    }
  },
  components:{
  }

}
</script>