{$layout}
{$template "menu"}

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

<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>

    <!-- 基本设置 Section -->
    <div class="config-section">
        <div class="section-title">{{t("finance_fee_menu@基础设置")}}</div>
        <div class="config-item">
            <div class="item-label">{{t("finance_fee_index@启用计费")}}</div>
            <div class="item-content">
                <checkbox name="isOn" v-model="config.isOn"></checkbox>
            </div>
        </div>

        <div v-show="config.isOn">
            <div class="config-item" v-show="!config.enablePlans">
                <div class="item-label">{{t("finance_fee_index@默认结算周期")}}</div>
                <div class="item-content">
                    <radio name="pricePeriod" :v-value="'daily'" v-model="config.pricePeriod">{{t("finance_fee_index@按日结算")}}</radio> &nbsp; &nbsp;
                    <radio name="pricePeriod" :v-value="'monthly'" v-model="config.pricePeriod">{{t("finance_fee_index@按月结算")}}</radio> &nbsp;
                    <div v-if="config.pricePeriod == 'daily'">
                        <p class="comment">{{t("finance_fee_index@按自然日流量或带宽峰值结算每天出前一天的账单此选项不适用于套餐计费")}}<br/><strong style="margin-top: 0.3em;display: block">{{t("finance_fee_index@请谨慎修改此选项如果当月已生成了按月结算账单则结算周期变更需要在下个月才会生效")}}</strong></div>
                    <p class="comment" v-if="config.pricePeriod == 'monthly'"> {{t("finance_fee_index@按自然月流量或带宽峰值结算每月一日出上月的账单此选项不适用于套餐计费")}}<br/><strong style="margin-top: 0.3em;display: block">{{t("finance_fee_index@请谨慎修改此选项如果当月已生成了按日结算账单则结算周期需要在下个月才会生效")}}</strong></p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t("finance_fee_index@默认计费方式")}}</div>
                 <div class="item-content">
                    <radio name="priceType" :v-value="'bandwidth'" v-model="config.priceType">{{t("finance_fee_index@按带宽计费")}} </radio> &nbsp; &nbsp;
                    <radio name="priceType" :v-value="'traffic'" v-model="config.priceType">{{t("finance_fee_index@按流量计费")}} </radio> &nbsp; &nbsp;
                    <p class="comment">{{t("finance_fee_index@用户默认的计费方式")}}<strong>{{t("finance_fee_index@请谨慎修改此选项如果当月已经生成了账单则计费方式需要在下个月才会生效")}}</strong></p>
                </div>
            </div>
            <div class="config-item">
                 <div class="item-label">{{t("finance_fee_index@按带宽计费设置")}}</div>
                 <div class="item-content">
                    <plan-price-bandwidth-config-box :v-plan-price-bandwidth-config="config.bandwidthPrice"></plan-price-bandwidth-config-box>
                </div>
            </div>
            <div class="config-item">
                 <div class="item-label">{{t("finance_fee_index@按流量计费设置")}}</div>
                 <div class="item-content">
                    <plan-price-traffic-config-box :v-plan-price-traffic-config="config.trafficPrice"></plan-price-traffic-config-box>
                </div>
            </div>
            <div class="config-item">
                 <div class="item-label">{{t("finance_fee_index@使用套餐计费")}}</div>
                 <div class="item-content">
                    <checkbox name="enablePlans" v-model="config.enablePlans"></checkbox>
                    <p class="comment">{{t("finance_fee_index@选中后表示使用套餐计费而不使用流量和带宽计费开启后可以在")}} <a href="/plans">{{t("finance_fee_index@套餐管理")}}</a> {{t("finance_fee_index@中添加套餐服务可能在绑定套餐后才能使用如果不开启则表示自动使用流量和带宽阶梯价格计费")}}<br/><strong style="margin-top: 0.3em;display: block">{{t("finance_fee_index@请谨慎选择此选项如果当月已经产生了按流量/带宽账单再修改为使用套餐计费可能会重复产生费用同样如果当月已经产生了套餐计费再改为流量/带宽计费也可能会重复产生费用")}}</strong></p>
                </div>
            </div>
             <div class="config-item" v-show="config.enablePlans">
                <div class="item-label">{{t("finance_fee_index@允许用户管理套餐")}}</div>
                 <div class="item-content">
                    <checkbox name="showPlansInUserSystem" v-model="config.showPlansInUserSystem"></checkbox>
                    <p class="comment">{{t("finance_fee_index@选中后在用户界面中显示套餐列表用户可以购买和续费套餐取消选中表示用户界面中不显示套餐列表")}}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 流量包 Section -->
    <div class="config-section" v-show="config.isOn && !config.enablePlans">
         <div class="section-title">{{t("finance_fee_index@流量包")}}</div>
        <div class="config-item">
            <div class="item-label">{{t("finance_fee_index@启用流量包")}}</div>
             <div class="item-content">
                <checkbox name="enableTrafficPackages" v-model="config.enableTrafficPackages"></checkbox>
                <p class="comment">{{t("finance_fee_index@启用后在流量计费时优先从用户已购流量包中扣除")}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.enableTrafficPackages">
            <div class="item-label">{{t("finance_fee_index@在用户界面显示流量包")}}</div>
             <div class="item-content">
                <checkbox name="showTrafficPackages" v-model="config.showTrafficPackages"></checkbox>
                <p class="comment">{{t("finance_fee_index@在用户界面显示流量包相关内容用户也可以购买流量包")}}</p>
            </div>
        </div>
    </div>

    <!-- 用户自定义 & 用户界面 Section -->
    <div class="config-section" v-show="config.isOn && !config.enablePlans">
        <div class="section-title">{{t("finance_fee_index@用户自定义与界面")}}</div>
        <div class="config-item">
            <div class="item-label">{{t("finance_fee_index@允许用户自选计费方式")}}</div>
             <div class="item-content">
                <checkbox name="userCanChangePriceType" v-model="config.userCanChangePriceType"></checkbox>
                <p class="comment">{{t("finance_fee_index@选中后表示允许用户可以自选计费方式按流量还是按带宽取消选中后所有用户都将使用默认的计费方式")}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t("finance_fee_index@允许用户自选计费周期")}}</div>
             <div class="item-content">
                <checkbox name="userCanChangePricePeriod" v-model="config.userCanChangePricePeriod"></checkbox>
                <p class="comment">{{t("finance_fee_index@选中后表示允许用户可以自选计费周期按月还是按日取消选中后所有用户都将使用默认的计费周期")}}</p>
            </div>
        </div>
         <div class="config-item">
            <div class="item-label">{{t("finance_fee_index@显示价格和价格计算器")}}</div>
             <div class="item-content">
                <checkbox name="userUIShowPrices" v-model="config.userUI.showPrices"></checkbox>
                <p class="comment">{{t("finance_fee_index@选中后表示在用户界面中显示价格和价格计算器")}}</p>
            </div>
        </div>
    </div>

    <!-- 逾期账单处理 Section -->
    <div class="config-section" v-show="config.isOn">
        <div class="section-title">{{t("finance_fee_index@逾期账单处理")}}</div>
        <div class="config-item">
            <div class="item-label">{{t("finance_fee_index@开启逾期账单处理")}}</div>
            <div class="item-content">
                <checkbox name="unpaidBillPolicyIsOn" v-model="config.unpaidBillPolicy.isOn"></checkbox>
                <p class="comment">{{t("finance_fee_index@开启后有逾期未支付账单将会提醒用户")}}</p>
            </div>
        </div>
        <div v-show="config.unpaidBillPolicy.isOn">
            <div class="config-item">
                <div class="item-label">{{t("finance_fee_index@日账单逾期天数")}}</div>
                 <div class="item-content">
                    <div class="ui input right labeled">
                        <input type="text" name="unpaidBillPolicyMinDailyBillDays" maxlength="4" style="width: 5em" v-model="config.unpaidBillPolicy.minDailyBillDays"/>
                        <span class="ui label">{{t("finance_fee_index@天")}}</span>
                    </div>
                    <p class="comment">{{t("finance_fee_index@按日结算的账单超过一定天数没有支付则认为逾期如果为表示没有限制")}}</p>
                </div>
            </div>
             <div class="config-item">
                <div class="item-label">{{t("finance_fee_index@月账单逾期天数")}}</div>
                 <div class="item-content">
                    <div class="ui input right labeled">
                        <input type="text" name="unpaidBillPolicyMinMonthlyBillDays" maxlength="4" style="width: 5em" v-model="config.unpaidBillPolicy.minMonthlyBillDays"/>
                        <span class="ui label">{{t("finance_fee_index@天")}}</span>
                    </div>
                    <p class="comment">{{t("finance_fee_index@按月结算的账单超过一定天数没有支付则认为逾期如果为表示没有限制")}}</p>
                </div>
            </div>
             <div class="config-item">
                <div class="item-label">{{t("finance_fee_index@逾期后停止网站")}}</div>
                 <div class="item-content">
                    <checkbox name="unpaidBillPolicyDisableServers" v-model="config.unpaidBillPolicy.disableServers"></checkbox>
                    <p class="comment">{{t("finance_fee_index@选中后表示有逾期账单时停止用户的网站")}}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 提交按钮 Section -->
    <div class="config-item">
        <div class="item-label"></div> <!-- 占位 -->
        <div class="item-content">
            <submit-btn></submit-btn>
        </div>
    </div>

</form>