{$layout} 
{$template "menu"}

<div class="ui message error" v-if="!serversIsEnabled">
  当前账号下的网站不可用，请检查账号状态以及是否有逾期未支付的账单。
</div>

<div class="ui message warning" v-if="serversIsEnabled && countUnpaidBills > 0">
  <a href="/finance/bills?paidFlag=0"
    >有逾期未支付的账单，可能会影响你的CDN服务正常运行，请尽快完成支付。</a
  >
</div>

<div class="margin"></div>
<form class="ui form" action="/servers" id="searchForm">
  <div class="ui fields inline">
    <div class="ui field">
      <input type="text" name="domainNames" v-model="domainNames" placeholder="域名(多个空格分离)" />
    </div>
    <div class="ui field">
      <input type="text" name="originIp" v-model="originIp" placeholder="源服务器IP" />
    </div>
    <div class="ui field">
      <input type="number" :min="1" name="httpListenPort" v-model="httpListenPort" placeholder="http侦听端口" />
    </div>
    <div class="ui field">
      <input type="number" :min="1" name="httpsListenPort" v-model="httpsListenPort" placeholder="https侦听端口" />
    </div>
    <div class="ui field" v-if="groups && groups.length > 0">
      <b-select
        name="groupId"
        v-model="groupId"
        :options="[
            {label: '[分组]', value: '0'},
            ...(groups || []).map(group => ({
                label: group.name,
                value: group.id,
            }))
        ]"
      ></b-select>
    </div>
    <div class="ui field" v-if="groups && groups.length > 0">
      <b-select
        name="userPlanId"
        v-model="userPlanId"
        :options="[
            {label: '[不限制套餐]', value: '0'},
            ...(userPlans || []).map(userPlan => ({
                label: userPlan.name,
                value: userPlan.id,
            }))
        ]"
      ></b-select>
    </div>
    <div class="ui field">
      <b-select
        name="serverIsOn"
        v-model="serverIsOn"
        :options="[
            {label: '[不限站点启用]', value: '0'},
            {label: '站点启用', value: '1'},
            {label: '站点停用', value: '2'},
        ]"
      ></b-select>
    </div>
    <div class="ui field">
      <a-button type="submit" @click="searchServers">搜索</a-button>
      &nbsp;
      <a href="/servers" v-if="(domainNames && domainNames.length > 0) || (originIp && originIp.length > 0) || httpListenPort || httpsListenPort || groupId > 0 || serverIsOn > 0 || userPlanId > 0">[清除条件]</a>
    </div>
    <div class="ui field">
      <a-button @click="createServer">
        <i class="pi pi-pen-to-square" style="margin-right: .5rem;"></i>
        添加网站
      </a-button>
    </div>
    <div class="ui field">
      <a-button @click="applyCertificates">
        <i class="pi pi-align-justify" style="margin-right: .5rem;"></i>
        批量申请证书
      </a-button>
    </div>
  </div>
</form>

<b-empty v-if="!servers || servers.length == 0">暂时还没有任何域名。</b-empty>

<div v-if="checkedServerIds && checkedServerIds.length > 0" class="ui segment">
  <button class="ui button basic" @click.prevent="resetCheckedServers">
    取消所选
  </button>
  &nbsp; &nbsp;
  <button class="ui button basic" @click.prevent="deleteServers">
    删除所选{{checkedServerIds.length}}网站
  </button>
</div>
<div class="margin"></div>
<b-table
    v-if="servers && servers.length > 0 && columns"
    :columns="columns"
    :data-source="servers"
    :row-key="'id'"
    :row-selection="{
        type: 'checkbox',
        selectedRowKeys: checkedServerIds,
        onChange: (selectedRowKeys) => {
            checkedServerIds = selectedRowKeys;
            updateCheckedServers();
        }
    }"
    :scroll="{ x: 1100 }"
    size="middle"
>
    <template slot="domainNames" slot-scope="{ text, record }">
        <div v-if="record" style="white-space: nowrap;">
            <a class="ant-btn-link" :href="'/servers/server?serverId=' + (record.id || '')">
                <span v-if="record.serverNames && record.serverNames.length > 0">
                    <span v-if="!record.serverNames[0].subNames || record.serverNames[0].subNames.length === 0">
                        <keyword :v-word="domainNames">{{record.serverNames[0].name}}</keyword>
                    </span>
                    <span class="ant-btn-link" v-else>{{record.serverNames[0].subNames[0]}}</span>
                    <span v-if="record.countServerNames > 1">
                        等{{record.countServerNames}}个域名
                        <popup-icon :href="'/servers/serverNamesPopup?serverId=' + (record.id || '')" height="20em"></popup-icon>
                    </span>
                </span>
                <span v-else class="disabled">-</span>
            </a>
        </div>
    </template>

    <template slot="groups" slot-scope="{ text, record }">
        <span v-if="record && record.groups && record.groups.length > 0">
            <span class="small grey" v-for="serverGroup in record.groups">[{{serverGroup.name}}] &nbsp;</span>
        </span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="websiteName" slot-scope="{ text, record }">
        <div v-if="record && record.name" style="white-space: nowrap;">
            <span class="grey small" style="max-width: 200px; text-overflow: ellipsis; overflow: hidden;">
                {{record.name}}
                <a class="ant-btn-link" href="" @click.prevent="updateServerName(record.id)">修改</a>
            </span>
        </div>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="userPlan" slot-scope="{ text, record }">
        <div v-if="record && record.userPlan && record.userPlan.id > 0">
            <span class="small" :class="{grey: !record.userPlan.isExpired, red: record.userPlan.isExpired}">
                {{record.userPlan.name}} / {{record.userPlan.dayTo}}
                <span v-if="record.userPlan.isExpired">已过期</span>
            </span>
            <div v-if="record.trafficLimitStatus">
                <server-traffic-limit-status-viewer v-model="record.trafficLimitStatus"></server-traffic-limit-status-viewer>
            </div>
        </div>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="serverType" slot-scope="{ text, record }">
        <span v-if="text === 'pages'">静态网站</span>
        <span v-else-if="text === 'httpProxy'">CDN加速</span>
        <span v-else>静态网站</span>
    </template>

    <template slot="cname" slot-scope="{ text, index }">
        <span v-if="text">
          <span :id="'cname-' + index">{{text}}</span>
          <copy-to-clipboard :v-target="'cname-' + index"></copy-to-clipboard>
        </span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="status" slot-scope="{ text, record }">
        <span v-if="record && record.isOn === false" class="grey">停用中</span>
        <span v-else-if="record && record.status && record.status.isOk" class="green">
          <i class="pi pi-circle-fill" style="font-size: 8px; margin-right: 4px"></i>正常
        </span>
        <span v-else-if="record && record.status && record.status.message && record.status.message.length === 0">检查中</span>
        <span v-else-if="record && record.status && record.status.message" class="red">
            {{record.status.message}}
            <tip-icon v-if="record.status.todo" :content="record.status.todo"></tip-icon>
        </span>
        <span v-else>检查中</span>
    </template>

    <template slot="httpsIsOn" slot-scope="{ text, record }">
        <span v-if="record.loading" class="grey"><i class="pi pi-spinner-dotted pi-spin" style="font-size: 12px; padding: 4px;"></i></span>
        <span v-else-if="text === true" class="green"><i class="pi pi-lock green" style="font-size: 12px; padding: 4px;"></i></span>
        <span v-else class="red"><i class="pi pi-lock-open red" style="font-size: 12px; padding: 4px;"></i></span>
    </template>

    <template slot="action" slot-scope="{ text, record }">
        <div v-if="record && record.id">
            <a-button type="link" @click="goToServer(record.id)"><i class="pi pi-cog" style="font-size: 12px; padding: 4px 2px;"></i> 管理</a-button>
            <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    更多 <i class="pi pi-chevron-down"></i>
                </a>
                <a-menu slot="overlay">
                    <a-menu-item v-if="record.isOn">
                        <a @click="updateServerOff(record.id)"><i class="pi pi-pause" style="font-size: 12px; padding: 4px 2px;"></i> 停用</a>
                    </a-menu-item>
                    <a-menu-item v-if="record.isOn === false">
                        <a @click="updateServerOn(record.id)"><span class="red"><i class="pi pi-play" style="font-size: 12px; padding: 4px 2px;"></i> 启用</span></a>
                    </a-menu-item>
                    <a-menu-item>
                        <a @click="deleteServer(record.id)"><i class="pi pi-trash" style="font-size: 12px; padding: 4px 2px;"></i> 删除</a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    </template>
</b-table>

<div class="page" v-html="page"></div>
