{$layout}
{$template "item_menu"}

<div class="left-right-box-container">
    <div class="right-box">
        <warning-message>{{t('metrics@修改参数时将重新记录数据')}}</warning-message>

        <div class="config-section">
            <div class="section-title">
                <i class="icon edit"></i>
                {{t('metrics@修改指标')}}
            </div>

            <form class="ui form" data-tea-action="$" data-tea-success="success">
                <csrf-token></csrf-token>
                <input type="hidden" name="itemId" :value="item.id"/>
                
                <div class="config-item">
                    <div class="item-label">{{t('metrics@指标名称')}} *</div>
                    <div class="item-content">
                        <input type="text" name="name" maxlength="100" ref="focus" v-model="item.name"/>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('metrics@统计对象')}} *</div>
                    <div class="item-content">
                        <metric-keys-config-box :v-category="item.category" :v-keys="item.keys"></metric-keys-config-box>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('metrics@统计周期')}} *</div>
                    <div class="item-content">
                        <metric-period-config-box :v-period="item.period" :v-period-unit="item.periodUnit"></metric-period-config-box>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('metrics@统计数值')}} *</div>
                    <div class="item-content">
                        <!-- HTTP -->
                        <b-select
                            v-if="item.category == 'http'"
                            name="value"
                            v-model="item.value"
                            auto-width
                            :options="valueDefinitions.map(def => ({
                                label: def.name,
                                value: def.code,
                            }))"
                        ></b-select>

                        <!-- TCP -->
                        <b-select
                            v-if="item.category == 'tcp'"
                            name="value"
                            v-model="item.value"
                            auto-width
                            :options="valueDefinitions.map(def => ({
                                label: def.name,
                                value: def.code,
                            }))"
                        ></b-select>

                        <!-- UDP -->
                        <b-select
                            v-if="item.category == 'udp'"
                            name="value"
                            v-model="item.value"
                            auto-width
                            :options="valueDefinitions.map(def => ({
                                label: def.name,
                                value: def.code,
                            }))"
                        ></b-select>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('metrics@数据保留周期')}}</div>
                    <div class="item-content">
                        <div class="ui input">
                            <input type="text" size="4" maxlength="4" name="expiresPeriod" v-model="item.expiresPeriod"/>
                        </div>
                        <p class="comment">{{t('metrics@自动删除此周期以外的数据')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('metrics@公用')}}</div>
                    <div class="item-content">
                        <checkbox name="isPublic" v-model="item.isPublic"></checkbox>
                        <p class="comment">{{t('metrics@选中表示所有集群自动使用此指标')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('metrics@启用当前指标')}}</div>
                    <div class="item-content">
                        <checkbox name="isOn" v-model="item.isOn" value="1"></checkbox>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label"></div>
                    <div class="item-content">
                        <submit-btn></submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>