{$layout}
{$template "menu"}

{$var "header"}
<link rel="stylesheet" href="./index.css">
{$end}

<div class="margin"></div>

<form class="ui form" method="get" action="/clusters/ip-addrs">
    <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">
            {{t('clusters_ipaddrs@状态')}}
        </div>
        <div class="ui field">
            <b-select
                name="upState"
                v-model="upState"
                :options="[
                    {label: t('clusters_ipaddrs@全部'), value: '0'},
                    {label: t('clusters_ipaddrs@在线'), value: '1'},
                    {label: t('clusters_ipaddrs@离线'), value: '2'},
                ]"
            ></b-select>
        </div>
        <div class="ui field">
            <input type="text" :placeholder="t('clusters_ipaddrs@IP名称Placeholder')" name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('clusters_ipaddrs@搜索')}}</button>
            <span v-if="addrs.length > 0">
                &nbsp;
                <a :href="'/clusters/ip-addrs/exportExcel?clusterId=' + clusterId + '&upState=' + upState + '&keyword=' + keyword">{{t('clusters_ipaddrs@导出')}}</a>
            </span>
            &nbsp;
            <a href="/clusters/ip-addrs" v-if="clusterId > 0 || upState > 0 || keyword.length > 0">{{t('clusters_ipaddrs@清除条件')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>
<b-empty v-if="addrs.length == 0">{{t('clusters_ipaddrs@暂时还没有IP地址')}}</b-empty>

<b-table
    v-if="addrs.length > 0"
    :columns="[
        {
            title: t('clusters_ipaddrs@IPCol'),
            key: 'ip',
            dataIndex: 'ip',
            scopedSlots: { customRender: 'ip' }
        },
        {
            title: t('clusters_ipaddrs@所属主集群Col'),
            key: 'cluster',
            dataIndex: 'cluster',
            scopedSlots: { customRender: 'cluster' }
        },
        {
            title: t('clusters_ipaddrs@所属节点Col'),
            key: 'node',
            dataIndex: 'node',
            scopedSlots: { customRender: 'node' }
        },
        {
            title: t('clusters_ipaddrs@备注Col'),
            key: 'name',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' }
        },
        {
            title: t('clusters_ipaddrs@阈值Col'),
            key: 'thresholds',
            dataIndex: 'thresholds',
            width: '80px',
            scopedSlots: { customRender: 'thresholds' }
        },
        {
            title: t('clusters_ipaddrs@状态Col'),
            key: 'status',
            dataIndex: 'status',
            width: '120px',
            scopedSlots: { customRender: 'status' }
        },
        {
            title: t('clusters_ipaddrs@操作Col'),
            key: 'actions',
            width: '180px',
            scopedSlots: { customRender: 'actions' }
        }
    ]"
    :data-source="addrs"
    row-key="id"
    :bordered="false"
    :pagination="false"
    :scroll="{ x: '1200px' }"
    >
    <!-- IP列 -->
    <template slot="ip" slot-scope="{ text, record }">
        <div class="ip-addr-name">
            <a :href="'/clusters/ip-addrs/addr?addrId=' + record.id">
                <keyword :v-word="keyword">{{record.ip}}</keyword>
            </a>
            <div v-if="record.clusters.length > 0">
                <grey-label v-for="cluster in record.clusters">{{cluster.name}}</grey-label>
            </div>
        </div>
    </template>

    <!-- 所属主集群列 -->
    <template slot="cluster" slot-scope="{ text, record }">
        <link-icon :href="'/clusters/cluster?clusterId=' + record.cluster.id">{{record.cluster.name}}</link-icon>
    </template>

    <!-- 所属节点列 -->
    <template slot="node" slot-scope="{ text, record }">
        <link-icon :href="'/clusters/cluster/node?clusterId=' + record.cluster.id + '&nodeId=' + record.node.id">
            <keyword :v-word="keyword">{{record.node.name}}</keyword>
        </link-icon>
    </template>

    <!-- 备注列 -->
    <template slot="name" slot-scope="{ text, record }">
        <span v-if="record.name.length > 0">
            <keyword :v-word="keyword">{{record.name}}</keyword>
        </span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 阈值列 -->
    <template slot="thresholds" slot-scope="{ text, record }">
        <span v-if="record.hasThresholds" class="threshold-status green">
            <i class="pi pi-check-circle"></i>
            Y
        </span>
        <span v-else class="threshold-status disabled">
            <i class="pi pi-times-circle"></i>
            N
        </span>
    </template>

    <!-- 状态列 -->
    <template slot="status" slot-scope="{ text, record }">
        <span v-if="!record.isOn" class="ip-addr-status red">
            <i class="pi pi-ban"></i>
            {{t('clusters_ipaddrs@禁用')}}
        </span>
        <span v-else-if="!record.canAccess" class="ip-addr-status red">
            <i class="pi pi-lock"></i>
            {{t('clusters_ipaddrs@不公开访问')}}
        </span>
        <span v-else-if="record.isUp && record.backupIP.length > 0" class="ip-addr-status orange">
            <i class="pi pi-sync"></i>
            {{t('clusters_ipaddrs@备用')}}
            <br/>
            <span class="grey small">{{record.backupIP}}</span>
        </span>
        <span v-else-if="record.isUp" class="ip-addr-status green">
            <i class="pi pi-check-circle"></i>
            {{t('clusters_ipaddrs@在线')}}
        </span>
        <span v-else class="ip-addr-status red">
            <i class="pi pi-times-circle"></i>
            {{t('clusters_ipaddrs@离线')}}
        </span>
    </template>

    <!-- 操作列 -->
    <template slot="actions" slot-scope="{ text, record }">
        <a :href="'/clusters/ip-addrs/addr?addrId=' + record.id" class="action-link">
            <i class="pi pi-info-circle"></i>
            {{t('clusters_ipaddrs@详情')}}
        </a>
        <a href="" @click.prevent="deleteAddr(record.id)" class="action-link">
            <i class="pi pi-trash"></i>
            {{t('clusters_ipaddrs@删除')}}
        </a>
    </template>
</b-table>

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