{$layout}
{$template "menu"}

<div class="cache-config-container">
    <div class="cache-config-form">
        <div class="form-title">
            <a href=".tasks" class="back-button">
                <i class="icon angle left"></i>
                {{t('返回列表')}}
            </a>
            <i class="icon info circle"></i> {{t('任务详情')}}
        </div>
        
        <div class="config-section">
            <div class="section-title">
                <i class="icon tasks"></i> {{t('基本信息')}}
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('任务编号')}}</div>
                <div class="item-content">{{task.id}}</div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('任务类型')}}</div>
                <div class="item-content">
                    <span v-if="task.type == 'purge'" class="ui label blue basic small">
                        <i class="icon refresh"></i> {{t('刷新')}}
                    </span>
                    <span v-if="task.type == 'fetch'" class="ui label green basic small">
                        <i class="icon download"></i> {{t('预热')}}
                    </span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('缓存URL类型')}}</div>
                <div class="item-content">
                    <span v-if="task.keyType == 'key'" class="ui label basic small">
                        <i class="icon linkify"></i> {{t('URL')}}
                    </span>
                    <span v-if="task.keyType == 'prefix'" class="ui label basic small">
                        <i class="icon folder"></i> {{t('目录')}}
                    </span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('创建时间')}}</div>
                <div class="item-content">{{task.createdTime}}</div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('完成时间')}}</div>
                <div class="item-content">
                    <span v-if="task.isDone">{{task.doneTime}}</span>
                    <span v-else class="disabled">{{t('尚未完成')}}</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('所属用户')}}</div>
                <div class="item-content">
                    <span v-if="task.user != null && task.user.id > 0"><user-link :v-user="task.user"></user-link></span>
                    <span v-else="" class="disabled">-</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('任务状态')}}</div>
                <div class="item-content">
                    <span v-if="task.isOk" class="ui label green small">
                        <i class="icon check"></i> {{t('已完成')}}
                    </span>
                    <span v-else-if="task.isDone" class="ui label red small">
                        <i class="icon times"></i> {{t('失败')}}
                    </span>
                    <span v-else-if="!task.isDone" class="ui label grey small">
                        <i class="icon clock"></i> {{t('等待执行')}}
                    </span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('操作')}}</div>
                <div class="item-content">
                    <div class="action-buttons">
                        <a href="" @click.prevent="deleteTask(task.id)" class="ui button small basic red">
                            <i class="icon trash"></i> {{t('删除任务')}}
                        </a>
                        <a href="" @click.prevent="resetTask(task.id)" class="ui button small basic">
                            <i class="icon redo"></i> {{t('重置状态')}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="config-section">
            <div class="section-title">
                <i class="icon key"></i> {{t('要操作的缓存Key')}}
            </div>
            
            <div class="table-box">
                <table class="ui table selectable celled">
                    <thead>
                        <tr>
                            <th>
                                <span v-if="task.keyType == 'key'">{{t('URL')}}</span>
                                <span v-if="task.keyType == 'prefix'">{{t('前缀')}}</span>
                            </th>
                            <th class="two wide">{{t('所属集群')}}</th>
                            <th class="width6">{{t('状态')}}</th>
                        </tr>
                    </thead>
                    <tbody v-for="key in task.keys">
                        <tr>
                            <td>
                                {{key.key}}
                                <div v-if="key.errors.length > 0" class="domain-labels" style="margin-top: 0.5em">
                                    <a :href="'/clusters/cluster/node?nodeId=' + err.nodeId" v-for="err in key.errors" class="ui label basic tiny red">
                                        <i class="icon exclamation triangle"></i> {{t('节点')}}{{err.nodeId}}：{{err.error}}
                                    </a>
                                </div>
                            </td>
                            <td>
                                <span v-if="key.cluster != null && key.cluster.id > 0">
                                    <a :href="'/clusters/cluster?clusterId=' + key.cluster.id" class="ui label small basic">
                                        <i class="icon server"></i>
                                        {{key.cluster.name}}
                                    </a>
                                </span>
                                <span v-else class="disabled">-</span>
                            </td>
                            <td>
                                <span v-if="key.isDone && key.errors.length == 0" class="ui label green tiny">
                                    <i class="icon check"></i> {{t('完成')}}
                                </span>
                                <span v-if="key.isDone && key.errors.length > 0" class="ui label red tiny">
                                    <i class="icon times"></i> {{t('失败')}}
                                </span>
                                <span v-if="!key.isDone && !key.isDoing" class="ui label grey tiny">
                                    <i class="icon clock"></i> {{t('未执行')}}
                                </span>
                                <span v-if="!key.isDone && key.isDoing" class="ui label orange tiny">
                                    <i class="icon spinner"></i> {{t('部分完成')}}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>