{$layout} {$template "/left_menu"}

<div class="http-config-container">
  <form class="ui form http-config-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 gift"></i>
        套餐设置
      </div>
      
      <div class="config-item">
        <div class="item-label">
          <i class="icon box"></i>
          当前绑定套餐
        </div>
        <div class="item-content">
          <span v-if="userPlan.id == 0" class="disabled">
            暂时还没有绑定套餐。
            <a href="" @click.prevent="update()" v-if="!isUpdating" class="more-options-toggle">
              <i class="icon edit"></i>修改
            </a>
            <a href="" @click.prevent="update()" v-if="isUpdating" class="more-options-toggle">
              <i class="icon cancel"></i>取消修改
            </a>
          </span>
          <div v-else>
            {{userPlan.plan.name}}<span v-if="userPlan.name.length > 0">-{{userPlan.name}}</span>
            （到期时间：{{userPlan.dayTo}}）&nbsp;
            <a href="" @click.prevent="update()" v-if="!isUpdating" class="more-options-toggle">
              <i class="icon edit"></i>修改
            </a>
            <a href="" @click.prevent="update()" v-if="isUpdating" class="more-options-toggle">
              <i class="icon cancel"></i>取消修改
            </a>
            <div class="ui-message warning" v-if="userPlan.isExpired">
              <i class="icon warning circle"></i>
              <a href="/plans">已过期，请及时续费</a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="config-item" v-if="isUpdating">
        <div class="item-label">
          <i class="icon plus"></i>
          新套餐 *
        </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"
              @change="changeUserPlan"
              auto-width
              :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">
          <i class="icon tasks"></i>
          所选套餐限制
        </div>
        <div class="item-content">
          <div v-if="newUserPlan != null && newUserPlanDescription.length > 0">
            {{newUserPlanDescription}}
          </div>
          <div v-else><span class="disabled">没有限制</span></div>

          <div class="ui-message warning" v-if="newUserPlanLimit.length > 0 && newUserPlanId != userPlan.id">
            <i class="icon warning circle"></i>
            {{newUserPlanLimit}}
          </div>
        </div>
      </div>
    </div>
    
    <div class="config-section" v-if="!isUpdating && hasTrafficLimit">
      <div class="section-title">
        <i class="icon chart bar"></i>
        流量限制
      </div>
      
      <div class="config-item" v-if="userPlan.plan.trafficLimit.dailySize != null && userPlan.plan.trafficLimit.dailySize.count > 0">
        <div class="item-label">
          <i class="icon calendar day"></i>
          套餐日流量限制
        </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">
          <i class="icon calendar"></i>
          套餐月流量限制
        </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>

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