{$layout}
{$template "menu"}

<div v-if="key == null">
    <div class="margin"></div>
    <div class="ui message error icon" v-if="plusErr.length > 0">
        <i class="p-message-icon pi pi-exclamation-triangle"></i>
        {{t('settings_authority_index@出现异常错误，请重新激活')}}：{{plusErr}}
    </div>

    <div>
        <warning-message>
            {{t('settings_authority_index@你暂时尚未激活商业版本')}}：
            <ul>
                <li><a href="https://cdn1.com/docs/Plus/Index.md" target="_blank">{{t('settings_authority_index@了解专业版')}}</a> </li>
                <li><a href="https://cdn1.com/docs/Plus/Price.md" target="_blank">{{t('settings_authority_index@价格体系')}}</a> </li>
                <li><a href="https://cdn1.com/company/contactUs" target="_blank">{{t('settings_authority_index@其他方式购买专业版')}}</a> </li>
                <li><a href="https://cdn1.com/company/contactUs" target="_blank">{{t('settings_authority_index@联系试用')}}</a> </li>
            </ul>
        </warning-message>
        <warning-message>
            <a href="/settings/authority/activate">{{t('settings_authority_index@如果你已经有注册码，点这里激活')}} &raquo;</a>
        </warning-message>
    </div>
</div>

<div v-if="key != null">
    <div class="margin"></div>

    <div class="ui message success icon" v-if="!key.isExpired && plusErr.length == 0">
        <i class="pi pi-trophy green"></i>
        <div class="content green">
            {{t('settings_authority_index@恭喜您已经成为尊贵的商业版用户。')}}
        </div>
    </div>

    <div class="ui message error icon" v-if="plusErr.length > 0">
        <i class="p-message-icon pi pi-exclamation-triangle"></i>
        <div class="content">
            {{plusErr}}
        </div>
    </div>

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

    <b-status-card>
        <b-status-card-item :label="t('settings_authority_index@状态')">
            <span class="red" v-if="key.isExpiring">{{t('settings_authority_index@即将过期')}}</span>
            <span class="red" v-else-if="key.isExpired">{{t('settings_authority_index@已过期')}}</span>
            <span class="green" v-else>{{t('settings_authority_index@已认证')}}</span>
        </b-status-card-item>
        <b-status-card-item  v-if="key.editionName != null && key.editionName.length > 0" :label="t('settings_authority_index@版本')">
            {{key.editionName}}
        </b-status-card-item>
        <b-status-card-item v-if="key.nodes > 0" :label="t('settings_authority_index@节点数限制')">
            {{key.nodes}}{{t('settings_authority_index@个节点')}}
            <span class="small grey">（{{t('settings_authority_index@已使用')}}{{quota.countNodes}}{{t('settings_authority_index@个节点')}}）</span>
        </b-status-card-item>
        <b-status-card-item :label="t('settings_authority_index@公司/组织名')">
            {{key.company}}
            <div v-if="key.company != null && key.company.indexOf('试用') > 0">
                <span class="red">{{t('settings_authority_index@试用版本')}}</span>
            </div>
        </b-status-card-item>
        <b-status-card-item :label="t('settings_authority_index@开始日期')">
            {{key.dayFrom}}
        </b-status-card-item>
        <b-status-card-item :label="t('settings_authority_index@结束日期')">
            <span :class="{green: key.dayTo == '终身授权'}">{{key.dayTo}}</span>
            <div v-if="key.isExpiring" style="margin-top: 0.5em">
                <span class="red">{{t('settings_authority_index@即将过期')}}</span>
            </div>
            <div v-else-if="key.isExpired" style="margin-top: 0.5em">
                <span class="red">{{t('settings_authority_index@已过期，请尽快更新认证信息。')}}</span>
            </div>
        </b-status-card-item>
        <b-status-card-item :label="t('settings_authority_index@开通组件')">
            <span v-if="key.components.length == 0" class="component-label">{{t('settings_authority_index@所有组件')}}</span>
            <span v-for="c in key.components" class="component-label">
                {{c==='*'? t('settings_authority_index@所有组件') : c}}
            </span>
        </b-status-card-item>
        <b-status-card-item :label="t('settings_authority_index@验证方式')">
            <span v-if="key.method == 'remote'">{{t('settings_authority_index@远程')}}</span>
            <span v-else>{{t('settings_authority_index@离线')}}</span>
        </b-status-card-item>
    </b-status-card>

    <!-- <table class="ui table definition selectable">
        <tr>
            <td class="title">状态</td>
            <td>
                <span class="red" v-if="key.isExpiring">即将过期</span>
                <span class="red" v-else-if="key.isExpired">已过期</span>
                <span class="green" v-else>已认证</span>
            </td>
        </tr>
        <tr v-if="key.editionName != null && key.editionName.length > 0">
            <td>版本</td>
            <td>{{key.editionName}}</td>
        </tr>
        <tr v-if="key.nodes > 0">
            <td>节点数限制</td>
            <td>{{key.nodes}}个节点<span class="small grey">（已使用{{quota.countNodes}}个节点）</span></td>
        </tr>
        <tr>
            <td>公司/组织名</td>
            <td>{{key.company}}
                <div v-if="key.company != null && key.company.indexOf('试用') > 0">
                    <span class="red">试用版本</span>
                </div>
            </td>
        </tr>
        <tr>
            <td class="title">开始日期</td>
            <td>{{key.dayFrom}}</td>
        </tr>
        <tr>
            <td class="title">结束日期</td>
            <td><span :class="{green: key.dayTo == '终身授权' ? 'green' : ''}">{{key.dayTo}}</span>
                <div v-if="key.isExpiring" style="margin-top: 0.5em">
                    <span class="red">即将过期</span>
                </div>
                <div v-else-if="key.isExpired" style="margin-top: 0.5em">
                    <span class="red">已过期，请尽快更新认证信息。</span>
                </div>
            </td>
        </tr>
        <tr>
            <td>开通组件</td>
            <td>
                <span v-if="key.components.length == 0" class="ui label basic small">*</span>
                <span v-for="c in key.components" class="ui label basic small">{{c}}</span>
            </td>
        </tr>
        <tr>
            <td>验证方式</td>
            <td>
                <span v-if="key.method == 'remote'">远程</span>
                <span v-else>离线</span>
            </td>
        </tr>
    </table> -->
    <p class="comment grey">{{t('settings_authority_index@数据更新于')}}{{key.updatedTime}}{{t('settings_authority_index@。')}}</p>
</div>

<form v-if="!isPlus && key == null" data-tea-action="$" data-tea-success="success" data-tea-timeout="1800">
    <csrf-token></csrf-token>
    <div class="margin"></div>
    <submit-btn>{{t('settings_authority_index@申请试用')}}</submit-btn>
</form>