{$layout} 
{$template "../settings_menu"} 
{$template "/left_menu_with_menu"}

<div class="right-box with-menu plan-config-container">
  <div class="plan-config-form">
    <div class="form-title">套餐设置</div>
    
    <form class="ui form" data-tea-success="success" data-tea-action="$">
      <csrf-token></csrf-token>
      <input type="hidden" name="serverId" :value="serverId" />
      
      <div class="config-section">
        <div class="section-title">
          <i class="icon shopping bag"></i>
          <span>套餐信息</span>
        </div>
        
        <div class="config-item">
          <div class="item-label">当前绑定套餐</div>
          <div class="item-content">
            <span v-if="userPlan.id == 0" class="disabled">暂时还没有绑定套餐。
              <button class="ui mini button primary" type="button" @click="update()" v-if="!isUpdating">修改</button>
              <button class="ui mini button" type="button" @click="update()" v-if="isUpdating">取消修改</button>
            </span>
            <div v-else>
              {{userPlan.plan.name}}<span v-if="userPlan.name.length > 0">-{{userPlan.name}}</span>
              （到期时间：{{userPlan.dayTo}}）&nbsp;
              <button class="ui mini button primary" type="button" @click="update()" v-if="!isUpdating">修改</button>
              <button class="ui mini button" type="button" @click="update()" v-if="isUpdating">取消修改</button>
              <p class="comment" v-if="userPlan.isExpired">
                <a href="/plans" class="ui mini button red">已过期，请及时续费</a>
              </p>
            </div>
          </div>
        </div>
        
        <!-- 注意：必须使用v-if -->
        <div class="config-item" v-if="isUpdating">
          <div class="item-label">新套餐 *</div>
          <div class="item-content">
            <input type="hidden" name="isChanged" value="1" />
            <span v-if="userPlans.length == 0" class="disabled">当前还没有可以使用的套餐。</span>
            <div v-else>
              <b-select
                name="userPlanId"
                v-model="newUserPlanId"
                auto-width
                @change="changeUserPlan"
                :options="[
                  {label: '[不使用套餐]', value: 0},
                  ...userPlans.map(userPlan => ({
                    label: (userPlan.name??'') + '（' + (userPlan.dayTo??'') + '）',
                    value: userPlan.id,
                  })),
                ]"
              ></b-select>
              <p class="comment" v-if="newUserPlanId > 0 && newUserPlanId == userPlan.id">
                当前正在使用的套餐。
              </p>
            </div>
          </div>
        </div>
        
        <div class="config-item" v-if="isUpdating && newUserPlan != null">
          <div class="item-label">所选套餐限制</div>
          <div class="item-content">
            <div v-if="newUserPlan != null && newUserPlanDescription.length > 0">
              {{newUserPlanDescription}}
            </div>
            <div v-else><span class="disabled">没有限制</span></div>

            <div v-if="newUserPlanLimit.length > 0 && newUserPlanId != userPlan.id">
              <span class="red">{{newUserPlanLimit}}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="config-section" v-if="!isUpdating && hasTrafficLimit">
        <div class="section-title">
          <i class="icon chart line"></i>
          <span>流量限制</span>
        </div>
        
        <div class="config-item" v-if="userPlan.plan.trafficLimit.dailySize != null && userPlan.plan.trafficLimit.dailySize.count > 0">
          <div class="item-label">套餐日流量限制</div>
          <div class="item-content">
            <size-capacity-view :v-value="userPlan.plan.trafficLimit.dailySize"></size-capacity-view>
            <p class="comment">当天流量：{{trafficDailyFormat}}</p>
          </div>
        </div>
        
        <div class="config-item" v-if="userPlan.plan.trafficLimit.monthlySize != null && userPlan.plan.trafficLimit.monthlySize.count > 0">
          <div class="item-label">套餐月流量限制</div>
          <div class="item-content">
            <size-capacity-view :v-value="userPlan.plan.trafficLimit.monthlySize"></size-capacity-view>
            <p class="comment">当月流量：{{trafficMonthlyFormat}}</p>
          </div>
        </div>
      </div>

      <div class="margin"></div>
      <submit-btn v-show="newUserPlanLimit.length == 0 && newUserPlanId != userPlan.id && isUpdating"></submit-btn>
      <!-- <button class="ui button disabled" type="button" v-if="newUserPlanLimit.length > 0 || newUserPlanId == userPlan.id">
        保存
      </button> -->
    </form>
  </div>
</div>
