{$layout}
{$template "menu"}

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

<form class="ui form" data-tea-action="$" data-tea-success="success" ref="calculatorForm">
    <!-- 使用 config-section 和 config-item 结构 -->
    <div class="config-section">
        <div class="section-title">{{t("finance_fee_menu@价格计算器")}}</div>

        <div class="config-item">
            <div class="item-label">{{t("finance_fee_calculator@计费类型")}}</div>
            <div class="item-content">
                <radio name="priceType" :v-value="'bandwidth'" v-model="config.priceType">{{t("finance_fee_calculator@按带宽计费")}}</radio>
                &nbsp; &nbsp;
                <radio name="priceType" :v-value="'traffic'" v-model="config.priceType">{{t("finance_fee_calculator@按流量计费")}}</radio> &nbsp; &nbsp;
            </div>
        </div>

        <div class="config-item" v-show="config.priceType == 'bandwidth'">
            <div class="item-label">{{t("finance_fee_calculator@所需带宽")}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                    <div class="ui field">
                        <input type="text" name="bandwidth" size="10" maxlength="10" @input="change" ref="bandwidthInput"/>
                    </div>
                    <div class="ui field">
                        <b-select
                            name="bandwidthUnit"
                            v-model="bandwidthUnit"
                            @change="change"
                            auto-width
                            :options="[
                                {label: 'Mbps', value: 'mb'},
                                {label: 'Gbps', value: 'gb'},
                                {label: 'Tbps', value: 'tb'},
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown auto-width" name="bandwidthUnit" @change="change">
                            <option value="mb">Mbps</option>
                            <option value="gb">Gbps</option>
                            <option value="tb">Tbps</option>
                        </select> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="config-item" v-show="config.priceType == 'traffic'">
            <div class="item-label">{{t("finance_fee_calculator@所需流量")}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                    <div class="ui field">
                        <input type="text" name="traffic" size="10" maxlength="10" @input="change" ref="trafficInput"/>
                    </div>
                    <div class="ui field">
                        <b-select
                            name="trafficUnit"
                            v-model="trafficUnit"
                            @change="change"
                            auto-width
                            :options="[
                                {label: 'GiB', value: 'gb'},
                                {label: 'TiB', value: 'tb'},
                                {label: 'EiB', value: 'eb'},
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown auto-width" name="trafficUnit" @change="change">
                            <option value="gb">GiB</option>
                            <option value="tb">TiB</option>
                            <option value="eb">EiB</option>
                        </select> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="config-item" v-show="regions.length > 0">
            <div class="item-label">{{t("finance_fee_calculator@所在区域")}}</div>
            <div class="item-content">
                <b-select
                    name="regionId"
                    v-model="regionId"
                    @change="change"
                    auto-width
                    :options="[
                        {label: `[${t('finance_fee_calculator@不区分区域')}]`, value: '0'},
                        ...regions.map(region => ({
                            label: region.name,
                            value: region.id,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="regionId" @change="change">
                    <option value="0">[不区分区域]</option>
                    <option v-for="region in regions" :value="region.id">{{region.name}}</option>
                </select> -->
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t("finance_fee_calculator@价格")}}</div>
            <div class="item-content">
                <strong v-if="formattedAmount.length > 0">
                    ￥{{formattedAmount}} {{t("finance_fee_calculator@元")}}
                    <span v-if="hasRegionPrice" class="small grey" style="font-weight: normal"> {{t("finance_fee_calculator@基于区域价格设定")}}</span>
                </strong>
                <span v-else class="disabled">-</span>
            </div>
        </div>

        <!-- 提交按钮放在最后一个 config-item -->
        <div class="config-item">
            <div class="item-label"></div> <!-- 占位 -->
            <div class="item-content">
                <submit-btn>{{t("finance_fee_calculator@计算价格")}}</submit-btn>
            </div>
        </div>
    </div> <!-- config-section 结束 -->
</form>