{$layout}

<first-menu>
    <menu-item href="/servers/components/cache" code="index">{{t('@menu@列表')}}</menu-item>
    <span class="separator">|</span>
    <a href="" class="item" @click.prevent="createPolicy()">
        <i class="pi pi-pen-to-square"></i>
        {{t('@menu@创建')}}
    </a>
</first-menu>

<div class="base-container">
    <!-- {{t('certs_index@搜索')}} -->
    <div class="base-form">
        <form class="ui form" method="get" action="/servers/components/cache">
            <div class="action-buttons">
                <div class="search-box">
                    <div class="ui field">
                        <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
                    </div>
                    <div class="ui field">
                        <input type="text" name="keyword" v-model="keyword" :placeholder="t('cache_index_html@策略名称Placeholder')" class="ui input"/>
                    </div>
                    <div class="ui field">
                        <b-select
                            name="storageType"
                            v-model="storageType"
                            :options="[
                                {label: t('cache_index_html@存储类型'), value: ''},
                                ...storageTypes.map(storageType => ({
                                    label: storageType.name,
                                    value: storageType.type,
                                }))
                            ]"
                        ></b-select>
                    </div>
                    <div class="ui field">
                        <button type="submit" class="ui button">{{t('certs_index@搜索')}}</button>
                        <a :href="Tea.url('.')" v-if="keyword.length > 0 || clusterId > 0 || storageType.length > 0" class="ui button basic">[{{t('certs_index@清除条件')}}]</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- {{t('@menu@列表')}} -->
    <b-empty v-if="cachePolicies == null || cachePolicies.length == 0">{{t('cache_index_html@暂无缓存策略')}}</b-empty>
    
    <div class="base-form" v-if="cachePolicies != null && cachePolicies.length > 0">
        <b-table
            :columns="policyColumns"
            :data-source="processPolicyTableData(cachePolicies, infos)"
            row-key="id"
            :bordered="false"
            size="middle"
            :scroll="{ x: 1200 }"
            :pagination="false">
            
            <!-- {{t('cache_index_html@策略名称列')}} -->
            <template slot="name" slot-scope="{ text, record }">
                <a class="ant-btn-link" :href="'/servers/components/cache/policy?cachePolicyId=' + record.id">
                    <keyword :v-word="keyword">{{record.name}}</keyword>
                    &nbsp;
                    <i class="icon disk small" v-if="record.type == 'file'" :title="t('cache_index_html@硬盘')"></i>
                </a>
            </template>
            
            <!-- {{t('cache_index_html@策略类型列')}} -->
            <template slot="type" slot-scope="{ text, record }">
                {{record.typeName}} <span class="small">（{{record.type}}）</span>
            </template>
            
            <!-- {{t('cache_index_html@容量列')}} -->
            <template slot="capacity" slot-scope="{ text, record }">
                <span v-if="record.capacity != null && record.capacity.count > 0">
                    {{record.capacity.count}}{{record.capacity.unit.toUpperCase().replace(/(.)B/, "$1iB")}}
                    <span v-if="record.type == 'file' && record.options.memoryPolicy != null && record.options.memoryPolicy.capacity != null && record.options.memoryPolicy.capacity.count > 0" class="small grey" :title="t('cache_index_html@内存容量')">
                        （{{t('user_内存_9932')}}：{{record.options.memoryPolicy.capacity.count}}{{record.options.memoryPolicy.capacity.unit.toUpperCase().replace(/(.)B/, "$1iB")}}）
                    </span>
                </span>
                <span v-else class="disabled">{{t('cache_index_html@不限')}}</span>
            </template>
            
            <!-- {{t('cache_index_html@集群数列')}} -->
            <template slot="countClusters" slot-scope="{ text, record }">
                <div class="center">{{record.countClusters}}</div>
            </template>
            
            <!-- {{t('certs_index@状态')}} -->
            <template slot="status" slot-scope="{ text, record }">
                <div class="center"><label-on :v-is-on="record.isOn"></label-on></div>
            </template>
            
            <!-- {{t('certs_index@操作')}} -->
            <template slot="actions" slot-scope="{ text, record }">
                    <a :href="'/servers/components/cache/policy?cachePolicyId=' + record.id" class="action-button"><i class="icon info"></i>{{t('certs_index@详情')}}</a>
                    <a href="" @click.prevent="deletePolicy(record.id)" class="action-button"><i class="icon trash"></i>{{t('certs_index@删除')}}</a>
            </template>
        </b-table>
    </div>

    <div class="page" v-html="filterPageContent(page)"></div>
</div>