{$layout}

{$template "policy_menu"}

<div class="cache-config-container">
    <!-- {{t('cache_clean@选择集群')}} -->
    <div class="cache-config-form">
        <div class="form-title">
            <i class="icon server"></i> {{t('cache_clean@选择集群')}}
        </div>
        <div class="config-section">
            <div class="config-item">
                <div class="item-content">
                    <b-select
                        v-model="clusterId"
                        auto-width
                        :options="[
                            ...clusters.map(cluster => ({
                                label: cluster.name,
                                value: cluster.id,
                            }))
                        ]"
                    ></b-select>
                </div>
            </div>
        </div>
    </div>

    <div class="ui divider"></div>

    <!-- {{t('cache_clean@清理')}} -->
    <div class="cache-config-form">
        <div class="form-title">
            <i class="icon trash"></i> {{t('cache_clean@清理')}}
        </div>
        <div class="ui warning message">
            <i class="icon warning"></i>
            <span class="red">{{t('cache_clean@严重警告提示Part1')}}<a href="/servers/components/cache/batch?keyType=prefix" target="_blank">{{t('cache_policy_menu@刷新预热LinkText')}}</a>{{t('cache_clean@严重警告提示Part2')}}</span>
        </div>
        
        <form method="post" data-tea-action="$" data-tea-before="before" data-tea-success="success" data-tea-fail="fail" data-tea-done="done" data-tea-timeout="300">
            <input type="hidden" name="cachePolicyId" :value="cachePolicyId"/>
            <input type="hidden" name="clusterId" :value="clusterId"/>
            
            <div class="config-section">
                <div class="config-item">
                    <div class="item-label">{{t('cache_clean@操作原因')}} *</div>
                    <div class="item-content" style="display: flex; flex-direction: column; gap: 10px;">
                        <p class="comment">{{t('cache_clean@操作原因提示')}}</p>
                        <div class="ui radio checkbox">
                            <radio v-model="reason" :v-value="REASON_NEW_PIE">
                                <i class="icon user"></i> {{t('cache_clean@原因新手')}}
                            </radio>
                        </div>
                        <div class="ui radio checkbox" style="margin-top: 0.6em">
                            <radio v-model="reason" :v-value="REASON_BATCH_DELETE">
                                <i class="icon trash"></i> {{t('cache_clean@原因懒人Part1')}}"{{t('cache_clean@刷新预热功能名')}}"{{t('cache_clean@原因懒人Part2')}}
                            </radio>
                        </div>
                        <div class="ui radio checkbox" style="margin-top: 0.6em">
                            <radio v-model="reason" :v-value="REASON_MAINTAINS">
                                <i class="icon wrench"></i> {{t('cache_clean@原因维护')}}
                            </radio>
                        </div>
                        <div class="ui radio checkbox" style="margin-top: 0.6em">
                            <radio v-model="reason" :v-value="REASON_ISSUE_REPORT">
                                <i class="icon bug"></i> {{t('cache_clean@原因怀疑Part1')}}"{{t('cache_clean@刷新预热功能名')}}"{{t('cache_clean@原因怀疑Part2')}}
                            </radio>
                        </div>
                    </div>
                </div>

                <div class="config-item" v-show="!isReasonable()">
                    <div class="item-label">{{t('cache_clean@新手操作建议')}}</div>
                    <div class="item-content">
                        <i class="icon info circle"></i> {{t('cache_clean@请使用左侧主菜单中的')}} <a href="/servers/components/cache/batch?keyType=prefix" target="_blank">{{t('cache_policy_menu@刷新预热LinkText')}}</a> {{t('cache_clean@功能来清理你的缓存')}}
                    </div>
                </div>

                <div class="config-item" v-show="reason == REASON_ISSUE_REPORT">
                    <div class="item-label">{{t('cache_clean@操作建议')}}</div>
                    <div class="item-content">
                        <i class="icon info circle"></i> {{t('cache_clean@当前系统提供的')}} <a href="/servers/components/cache/batch?keyType=prefix" target="_blank">{{t('cache_policy_menu@刷新预热LinkText')}}</a> {{t('cache_clean@功能可靠提示')}}
                    </div>
                </div>

                <div class="config-item" v-show="reason == REASON_BATCH_DELETE">
                    <div class="item-label">{{t('cache_clean@操作建议')}}</div>
                    <div class="item-content">
                        <i class="icon info circle"></i> {{t('cache_clean@请尽可能使用')}} <a href="/servers/components/cache/batch?keyType=prefix" target="_blank">{{t('cache_policy_menu@刷新预热LinkText')}}</a> {{t('cache_clean@避免影响提示')}}
                    </div>
                </div>

                <div class="config-item" v-show="reason == REASON_MAINTAINS">
                    <div class="item-label">{{t('cache_clean@操作建议')}}</div>
                    <div class="item-content">
                        <i class="icon info circle"></i> {{t('cache_clean@缓存文件较多提示')}}
                    </div>
                </div>

                <div class="config-item" v-show="isReasonable()">
                    <div class="item-label">{{t('cache_fetch@操作结果')}}</div>
                    <div class="item-content">
                        <div v-if="isRequesting" class="ui info message mini">
                            <i class="icon spinner loading"></i> {{t('cache_fetch@数据发送中')}}
                        </div>
                        <div v-if="!isRequesting && !isOk && message.length > 0" class="ui negative message mini">
                            <i class="icon exclamation circle"></i> {{t('cache_fetch@失败')}}{{message}}
                        </div>
                        <div v-if="!isRequesting && isOk" class="domain-labels">
                            <div v-if="results.length == 0" class="ui negative message mini">
                                <i class="icon exclamation circle"></i> {{t('cache_clean@无可用节点')}}
                            </div>
                            <div class="domain-label" v-for="one in results" :class="{'enabled': one.isOk, 'red': !one.isOk}">
                                <span class="domain-name">
                                    <i class="icon server"></i>
                                    {{one.nodeName}}：{{one.message}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="action-buttons">
                <submit-btn v-if="!isRequesting && isReasonable()" class="negative">
                    <i class="icon trash"></i> {{t('cache_fetch@提交')}}
                </submit-btn>
                <button class="ui button disabled" type="button" v-if="!isReasonable()">
                    <i class="icon ban"></i> {{t('cache_fetch@提交')}}
                </button>
            </div>
        </form>
    </div>
</div>