{$layout "layout_popup"}

<!-- <h3>修改鉴权方式</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
  <csrf-token></csrf-token>
  <input type="hidden" name="policyId" :value="policy.id" />

  <table class="ui table definition selectable">
    <tr>
      <td class="title">名称 *</td>
      <td>
        <input
          type="text"
          name="name"
          maxlength="50"
          ref="focus"
          v-model="policy.name"
        />
      </td>
    </tr>
    <tr>
      <td>鉴权类型 *</td>
      <td>
        {{policy.typeName}}
        <p class="comment" v-html="authDescription"></p>
      </td>
    </tr>

    <!-- TypeA -->
    <tbody v-show="type == 'typeA'">
      <tr>
        <td>鉴权密钥 *</td>
        <td>
          <input
            type="text"
            maxlength="40"
            name="typeASecret"
            v-model="typeASecret"
            autocomplete="off"
          />
          <p class="comment">
            只能包含字母、数字，长度不超过40。<a
              href=""
              @click.prevent="generateTypeASecret()"
              >[随机生成]</a
            >
          </p>
        </td>
      </tr>
      <tr>
        <td>签名参数 *</td>
        <td>
          <input
            type="text"
            maxlength="30"
            name="typeASignParamName"
            value="sign"
            v-model="typeASignParamName"
            @input="changeTypeASignParamName"
          />
        </td>
      </tr>
      <tr>
        <td>有效时间</td>
        <td>
          <div class="ui input right labeled">
            <input
              type="text"
              maxlength="8"
              name="typeALife"
              value="30"
              style="width: 7em"
              v-model="policy.params.life"
            />
            <span class="ui label">秒</span>
          </div>
          <p class="comment">链接有效时间。</p>
        </td>
      </tr>
    </tbody>

    <!-- TypeB -->
    <tbody v-show="type == 'typeB'">
      <tr>
        <td>鉴权密钥 *</td>
        <td>
          <input
            type="text"
            maxlength="40"
            name="typeBSecret"
            v-model="typeBSecret"
            autocomplete="off"
          />
          <p class="comment">
            只能包含字母、数字，长度不超过40。<a
              href=""
              @click.prevent="generateTypeBSecret()"
              >[随机生成]</a
            >
          </p>
        </td>
      </tr>
      <tr>
        <td>有效时间</td>
        <td>
          <div class="ui input right labeled">
            <input
              type="text"
              maxlength="8"
              name="typeBLife"
              value="30"
              style="width: 7em"
              v-model="policy.params.life"
            />
            <span class="ui label">秒</span>
          </div>
          <p class="comment">链接有效时间。</p>
        </td>
      </tr>
    </tbody>

    <!-- TypeC -->
    <tbody v-show="type == 'typeC'">
      <tr>
        <td>鉴权密钥 *</td>
        <td>
          <input
            type="text"
            maxlength="40"
            name="typeCSecret"
            v-model="typeCSecret"
            autocomplete="off"
          />
          <p class="comment">
            只能包含字母、数字，长度不超过40。<a
              href=""
              @click.prevent="generateTypeCSecret()"
              >[随机生成]</a
            >
          </p>
        </td>
      </tr>
      <tr>
        <td>有效时间</td>
        <td>
          <div class="ui input right labeled">
            <input
              type="text"
              maxlength="8"
              name="typeCLife"
              value="30"
              style="width: 7em"
              v-model="policy.params.life"
            />
            <span class="ui label">秒</span>
          </div>
          <p class="comment">链接有效时间。</p>
        </td>
      </tr>
    </tbody>

    <!-- TypeD -->
    <tbody v-show="type == 'typeD'">
      <tr>
        <td>鉴权密钥 *</td>
        <td>
          <input
            type="text"
            maxlength="40"
            name="typeDSecret"
            v-model="typeDSecret"
            autocomplete="off"
          />
          <p class="comment">
            只能包含字母、数字，长度不超过40。<a
              href=""
              @click.prevent="generateTypeDSecret()"
              >[随机生成]</a
            >
          </p>
        </td>
      </tr>
      <tr>
        <td>签名参数 *</td>
        <td>
          <input
            type="text"
            maxlength="30"
            name="typeDSignParamName"
            value="sign"
            v-model="typeDSignParamName"
            @input="changeTypeDSignParamName"
          />
        </td>
      </tr>
      <tr>
        <td>时间戳参数 *</td>
        <td>
          <input
            type="text"
            maxlength="30"
            name="typeDTimestampParamName"
            value="t"
            v-model="typeDTimestampParamName"
            @input="changeTypeDTimestampParamName"
          />
        </td>
      </tr>
      <tr>
        <td>有效时间</td>
        <td>
          <div class="ui input right labeled">
            <input
              type="text"
              maxlength="8"
              name="typeDLife"
              value="30"
              style="width: 7em"
              v-model="policy.params.life"
            />
            <span class="ui label">秒</span>
          </div>
          <p class="comment">链接有效时间。</p>
        </td>
      </tr>
    </tbody>

    <!-- BasicAuth -->
    <tbody v-show="type == 'basicAuth'">
      <tr>
        <td>用户 *</td>
        <td>
          <http-auth-basic-auth-user-box
            :v-users="policy.params.users"
          ></http-auth-basic-auth-user-box>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <a href="" @click.prevent="showMoreBasicAuthOptions()"
            >更多基本认证选项<i
              class="ui icon angle"
              :class="{up: moreBasicAuthOptionsVisible, down: !moreBasicAuthOptionsVisible}"
            ></i
          ></a>
        </td>
      </tr>
      <tr v-show="moreBasicAuthOptionsVisible">
        <td>认证领域名<em>（Realm）</em></td>
        <td>
          <input
            type="text"
            name="basicAuthRealm"
            value=""
            maxlength="100"
            v-model="policy.params.realm"
          />
        </td>
      </tr>
      <tr v-show="moreBasicAuthOptionsVisible">
        <td>字符集</td>
        <td>
          <input
            type="text"
            name="basicAuthCharset"
            style="width: 6em"
            v-model="policy.params.charset"
            maxlength="50"
          />
          <p class="comment">类似于<code-label>utf-8</code-label>。</p>
        </td>
      </tr>
    </tbody>

    <!-- SubRequest -->
    <tbody v-show="type == 'subRequest'">
      <tr>
        <td>子请求URL *</td>
        <td>
          <input
            type="text"
            name="subRequestURL"
            maxlength="1024"
            v-model="policy.params.url"
          />
          <p class="comment">可以是一个完整的URL，也可以是一个路径。</p>
        </td>
      </tr>
      <tr>
        <td>请求方法</td>
        <td>
          <radio
            name="subRequestFollowRequest"
            :v-value="1"
            v-model="subRequestFollowRequest"
            >同当前请求一致</radio
          >
          &nbsp; &nbsp;
          <radio
            name="subRequestFollowRequest"
            :v-value="0"
            v-model="subRequestFollowRequest"
            >自定义</radio
          >
          <div style="margin-top: 0.8em" v-show="subRequestFollowRequest == 0">
            <div class="ui divider"></div>
            <b-select
              name="subRequestMethod"
              v-model="policy.params.method"
              auto-width
              :options="[
                {label: 'POST', value: 'POST'},
                {label: 'GET', value: 'GET'},
                {label: 'PUT', value: 'PUT'},
                {label: 'HEAD', value: 'HEAD'},
              ]"
            ></b-select>
            <!-- <select
              class="ui dropdown auto-width"
              name="subRequestMethod"
              v-model="policy.params.method"
            >
              <option value="">[请选择]</option>
              <option value="POST">POST</option>
              <option value="GET">GET</option>
              <option value="PUT">PUT</option>
              <option value="HEAD">HEAD</option>
            </select> -->
          </div>
        </td>
      </tr>
    </tbody>
    <tr>
      <td colspan="2"><more-options-indicator></more-options-indicator></td>
    </tr>
    <tbody v-show="moreOptionsVisible">
      <tr>
        <td>限定文件扩展名</td>
        <td>
          <values-box name="exts" :v-values="policy.params.exts"></values-box>
          <p class="comment">
            如果不为空，则表示只有这些扩展名的文件才需要鉴权；扩展名需要包含点符号（.），比如<code-label
              >.png</code-label
            >
          </p>
        </td>
      </tr>
      <tr>
        <td>限定域名</td>
        <td>
          <domains-box :v-domains="policy.params.domains"></domains-box>
          <p class="comment">
            如果不为空，则表示只有这些域名的文件才需要鉴权。
          </p>
        </td>
      </tr>
      <tr>
        <td>启用当前鉴权</td>
        <td>
          <checkbox name="isOn" value="1" v-model="policy.isOn"></checkbox>
        </td>
      </tr>
    </tbody>
  </table>

  <submit-btn></submit-btn>
</form>
