{$layout} {$template "menu"}

<div class="http-config-container">
  <form class="ui form http-config-form" method="post" data-tea-success="success" data-tea-action="$">
    <csrf-token></csrf-token>
    
    <div class="config-section">
      <div class="section-title">
        <i class="icon globe"></i>
        创建负载均衡
      </div>
      
      <div class="config-item">
        <div class="item-label">
          <i class="icon font"></i>
          网站名称 *
        </div>
        <div class="item-content">
          <input type="text" name="name" maxlength="50" ref="focus" />
          <p class="comment">请设置一个容易识别的网站名称。</p>
        </div>
      </div>
      
      <div class="config-item">
        <div class="item-label">
          <i class="icon tag"></i>
          网站类型 *
        </div>
        <div class="item-content">
          <b-select
            name="serverType"
            v-model="serverType"
            auto-width
            @change="changeServerType"
            :options="[
              ...serverTypes.map(serverType => ({
                label: serverType.name,
                value: serverType.code,
              })),
            ]"
          ></b-select>
        </div>
      </div>
      
      <div class="config-item">
        <div class="item-label">
          <i class="icon exchange"></i>
          监听协议 *
        </div>
        <div class="item-content">
          <span v-if="serverType == 'tcpProxy'">
            <checkbox
              name="protocols"
              :key="'tcp'"
              :v-value="'tcp'"
              v-model="enableTCP"
              >TCP</checkbox
            >
            &nbsp; &nbsp; &nbsp;
            <checkbox
              name="protocols"
              :key="'tls'"
              :v-value="'tls'"
              v-model="enableTLS"
              >TLS</checkbox
            >
          </span>
          <span v-if="serverType == 'udpProxy'">
            <checkbox
              name="protocols"
              :key="'udp'"
              :v-value="'udp'"
              v-model="enableUDP"
              >UDP</checkbox
            >
          </span>
        </div>
      </div>
      
      <div class="config-item" v-show="enableTLS">
        <div class="item-label">
          <i class="icon shield"></i>
          HTTPS证书 *
        </div>
        <div class="item-content">
          <ssl-certs-box></ssl-certs-box>
        </div>
      </div>
      
      <div class="config-item" v-if="canSpecifyTCPPort && enableTCP">
        <div class="item-label">
          <i class="icon plug"></i>
          TCP监听端口 *
        </div>
        <div class="item-content">
          <values-box
            size="5"
            maxlength="5"
            placeholder="端口"
            name="tcpPorts"
          ></values-box>
          <p class="comment">
            添加服务器监听用户网络连接的端口，需要在1024-65534之间。TCP和TLS端口之间不能重复。
          </p>
        </div>
      </div>
      
      <div class="config-item" v-if="canSpecifyTCPPort && enableTLS">
        <div class="item-label">
          <i class="icon plug"></i>
          TLS监听端口 *
        </div>
        <div class="item-content">
          <values-box
            size="5"
            maxlength="5"
            placeholder="端口"
            name="tlsPorts"
          ></values-box>
          <p class="comment">
            添加服务器监听用户网络连接的端口，需要在1024-65534之间。TCP和TLS端口之间不能重复。
          </p>
        </div>
      </div>
      
      <div class="config-item" v-if="!canSpecifyTCPPort && serverType == 'tcpProxy'">
        <div class="item-label">
          <i class="icon plug"></i>
          TCP/TLS监听端口
        </div>
        <div class="item-content">
          <span class="disabled">保存后自动生成</span>
        </div>
      </div>
      
      <div class="config-item" v-if="canSpecifyUDPPort && enableUDP">
        <div class="item-label">
          <i class="icon plug"></i>
          UDP监听端口 *
        </div>
        <div class="item-content">
          <values-box
            size="5"
            maxlength="5"
            placeholder="端口"
            name="udpPorts"
          ></values-box>
          <p class="comment">
            添加服务器监听用户网络连接的端口，需要在1024-65534之间。
          </p>
        </div>
      </div>
      
      <div class="config-item" v-if="!canSpecifyUDPPort && serverType == 'udpProxy'">
        <div class="item-label">
          <i class="icon plug"></i>
          UDP监听端口
        </div>
        <div class="item-content">
          <span class="disabled">保存后自动生成</span>
        </div>
      </div>
      
      <div class="config-item">
        <div class="item-label">
          <i class="icon server"></i>
          源站信息 *
        </div>
        <div class="item-content">
          <origin-input-box
            :v-family="family"
            ref="originInputBox"
          ></origin-input-box>
        </div>
      </div>
    </div>
    
    <submit-btn></submit-btn>
  </form>
</div>
