{$layout "layout_popup"}

<!-- <h3>修改重写规则</h3> -->
<form
  method="post"
  class="ui form"
  data-tea-action="$"
  data-tea-success="success"
>
  <input type="hidden" name="webId" :value="webId" />
  <input type="hidden" name="rewriteRuleId" :value="rewriteRule.id" />
  <table class="ui table definition selectable">
    <tr>
      <td class="title">匹配规则 *</td>
      <td>
        <input
          type="text"
          name="pattern"
          maxlength="500"
          placeholder="比如 /post/(.+)"
          ref="focus"
          v-model="rewriteRule.pattern"
        />
        <p class="comment">需要符合正则表达式规范，正则表达式语法</p>
      </td>
    </tr>
    <tr>
      <td>目标URL *</td>
      <td>
        <input
          type="text"
          name="replace"
          placeholder="比如 /post/${1}.html"
          maxlength="500"
          v-model="rewriteRule.replace"
        />
        <p class="comment">
          URL中可以包含一些内置的变量，并且可以用<code-label>${1}</code-label>、<code-label>${2}</code-label>等变量形式表示在匹配规则中匹配的第N个括号里的内容，也可以是一个完整的URL，比如：http://example.com/hello。
        </p>
      </td>
    </tr>
    <tr>
      <td>转发方式</td>
      <td>
        <b-select
          name="mode"
          v-model="rewriteRule.mode"
          auto-width
          :options="[
						{label: '隐式', value: 'proxy'},
						{label: '显式', value: 'redirect'},
					]"
        ></b-select>
        <!-- <select
          class="ui dropdown auto-width"
          name="mode"
          v-model="rewriteRule.mode"
        >
          <option value="proxy">隐式</option>
          <option value="redirect">显式</option>
        </select> -->
        <p class="comment">
          隐式表示不在客户端显示重写后的URL；显式表示在客户端跳转URL，将会显示重写后的URL。
        </p>
      </td>
    </tr>
    <tr>
      <td>匹配条件</td>
      <td>
        <http-request-conds-box
          :v-conds="rewriteRule.conds"
        ></http-request-conds-box>
      </td>
    </tr>
    <tr>
      <td colspan="2"><more-options-indicator></more-options-indicator></td>
    </tr>
    <tbody v-show="moreOptionsVisible">
      <tr v-show="rewriteRule.mode == 'redirect'">
        <td>跳转状态码</td>
        <td>
          <b-select
            name="redirectStatus"
            v-model="rewriteRule.redirectStatus"
            auto-width
            :options="[
							...statusOptions.map(status => ({
								label: (status.code??'') + ' ' + (status.text??''),
								value: status.code,
							})),
						]"
          ></b-select>
          <!-- <select
            class="ui dropdown auto-width"
            name="redirectStatus"
            v-model="rewriteRule.redirectStatus"
          >
            <option v-for="status in statusOptions" :value="status.code">
              {{status.code}} {{status.text}}
            </option>
          </select> -->
          <p class="comment">通常使用默认的307即可。</p>
        </td>
      </tr>
      <tr v-show="rewriteRule.mode == 'proxy'">
        <td>代理主机名</td>
        <td>
          <input
            type="text"
            name="proxyHost"
            placeholder="比如 example.com"
            maxlength="100"
            v-model="rewriteRule.proxyHost"
          />
          <p class="comment">
            如果转发的方式为隐式而且目标URL为不同的域名时需要用到此选项，用于修改被代理服务接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持请求变量。
          </p>
        </td>
      </tr>
      <tr>
        <td>是否保留URL参数</td>
        <td>
          <div class="ui checkbox">
            <input
              type="checkbox"
              name="withQuery"
              value="1"
              v-model="rewriteRule.withQuery"
            />
            <label></label>
          </div>
          <p class="comment">
            选中此选项，将会把用户输入的URL中的参数部分转发到目标URL上。
          </p>
        </td>
      </tr>
      <tr>
        <td>是否终止往下匹配</td>
        <td>
          <div class="ui checkbox">
            <input
              type="checkbox"
              name="isBreak"
              value="1"
              v-model="rewriteRule.isBreak"
            />
            <label></label>
          </div>
          <p class="comment">
            如果选中了此选项，一旦匹配成功，不会继续匹配其他的重写规则或路由规则。
          </p>
        </td>
      </tr>
      <tr>
        <td>启用当前重写规则</td>
        <td>
          <div class="ui checkbox">
            <input
              type="checkbox"
              name="isOn"
              value="1"
              v-model="rewriteRule.isOn"
            />
            <label></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <submit-btn></submit-btn>
</form>
