{$layout}
{$template "../item_menu"}
{$template "chart_menu"}
{$template "/echarts"}

<div class="left-right-box-container">
    <div class="right-box">
        <div class="config-section">
            <div class="section-title">
                <i class="icon chart line"></i>
                {{t('metrics_charts@图表详情')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('metrics_charts@图表名称')}}</div>
                <div class="item-content">
                    {{chart.name}}
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('metrics_charts@状态')}}</div>
                <div class="item-content">
                    <label-on :v-is-on="chart.isOn"></label-on>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('metrics_charts@图表类型')}}</div>
                <div class="item-content">
                    {{chart.typeName}}
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('metrics_charts@对象数限制')}}</div>
                <div class="item-content">
                    <span v-if="chart.maxItems <= 0" class="disabled">{{t('metrics_charts@没有限制')}}</span>
                    <span v-else>{{chart.maxItems}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('metrics_charts@忽略空值对象')}}</div>
                <div class="item-content">
                    <span v-if="chart.ignoreEmptyKeys" class="green">Y</span>
                    <span v-else class="disabled">N</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('metrics_charts@忽略其他对象')}}</div>
                <div class="item-content">
                    <div v-if="chart.ignoredKeys.length > 0">
                        <span v-for="key in chart.ignoredKeys" class="ui label basic small">{{key}}</span>
                    </div>
                    <span v-else class="disabled">{{t('metrics_charts@没有要忽略的对象')}}</span>
                </div>
            </div>
        </div>

        <div class="margin"></div>
        <div class="config-section">
            <div class="section-title">
                <i class="icon chart bar"></i>
                {{t('metrics_charts@图表示例')}}
            </div>
            <div class="config-item">
                <div class="item-content">
                    <p class="comment"><span class="red">{{t('metrics_charts@图中数据均为测试数据')}}</span></p>
                    <metric-board>
                        <metric-chart :v-chart="chart" :v-stats="testingStats" :v-item="item"></metric-chart>
                    </metric-board>
                </div>
            </div>
        </div>
    </div>
</div>