{$layout}

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

<!-- 搜索 -->
<div class="margin"></div>
<form class="ui form" method="get" action="/servers/components/cache">
    <div class="ui fields inline">
        <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="策略名称..."/>
        </div>
        <div class="ui field">
            <b-select
                name="storageType"
                v-model="storageType"
                :options="[
                    {label: '[存储类型]', value: ''},
                    ...storageTypes.map(storageType => ({
                        label: storageType.name,
                        value: storageType.type,
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="storageType" v-model="storageType">
                <option value="">[存储类型]</option>
                <option v-for="storageType in storageTypes" :value="storageType.type">{{storageType.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">搜索</button>
            &nbsp;
            <a :href="Tea.url('.')" v-if="keyword.length > 0 || clusterId > 0 || storageType.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<!-- 列表 -->
<b-empty v-if="cachePolicies == null || cachePolicies.length == 0">暂时还没有缓存策略。</b-empty>
<table class="ui table selectable celled" v-if="cachePolicies != null && cachePolicies.length > 0">
    <thead>
        <tr>
            <th>策略名称</th>
            <th>策略类型</th>
            <th>容量</th>
            <th class="center">集群数</th>
            <th class="center">状态</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tr v-for="(policy, index) in cachePolicies">
        <td>
            <a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id"><keyword :v-word="keyword">{{policy.name}}</keyword>
                &nbsp;
                <i class="icon disk small" v-if="policy.type == 'file'" title="硬盘"></i>
            </a>
        </td>
        <td>{{infos[index].typeName}} <span class="small">（{{policy.type}}）</span></td>
        <td>
            <span v-if="policy.capacity != null && policy.capacity.count > 0">
                {{policy.capacity.count}}{{policy.capacity.unit.toUpperCase().replace(/(.)B/, "$1iB")}}
                <span v-if="policy.type == 'file' && policy.options.memoryPolicy != null && policy.options.memoryPolicy.capacity != null && policy.options.memoryPolicy.capacity.count > 0" class="small grey" title="内存容量">
                    （内存：{{policy.options.memoryPolicy.capacity.count}}{{policy.options.memoryPolicy.capacity.unit.toUpperCase().replace(/(.)B/, "$1iB")}}）
                </span>
            </span>
            <span v-else class="disabled">不限</span>
        </td>
        <td class="center">{{infos[index].countClusters}}</td>
        <td class="center"><label-on :v-is-on="policy.isOn"></label-on></td>
        <td>
            <a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> &nbsp; <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
        </td>
    </tr>
</table>

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