{$layout "layout_popup"}

<h3 v-if="!isUpdating">添加规则</h3>
<h3 v-if="isUpdating">修改规则</h3>

<form class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="ruleId" :value="rule.id"/>
	<input type="hidden" name="optionsJSON" v-if="checkpoint != null && checkpoint.options != null" :value="JSON.stringify(checkpoint.options)"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">参数</td>
			<td>
				<select name="prefix" class="ui dropdown auto-width" @change="changeCheckpoint()" v-model="rule.checkpointPrefix">
					<option value="">[选择参数]</option>
					<option v-for="cp in checkpoints" :value="cp.prefix">{{cp.name}} - [ {{cp.prefix}}]</option>
				</select>
				<p class="comment" v-if="checkpoint != null"><span class="ui label tiny">${<em style="font-style: normal;">{{checkpoint.prefix}}</em>}</span>{{checkpoint.description}}</p>
			</td>
		</tr>
		<tr v-if="checkpoint != null && checkpoint.hasParams">
			<td>参数名</td>
			<td>
				<select name="param" v-model="rule.checkpointParam" class="ui dropdown auto-width" v-if="checkpoint.params != null">
					<option v-for="o in checkpoint.params" :value="o.value">{{o.name}}</option>
				</select>
				<input type="text" maxlength="100" v-model="rule.checkpointParam" v-if="checkpoint.params == null"/>
			</td>
		</tr>

		<!-- 选项 -->
		<tbody v-if="checkpoint != null && checkpoint.options != null && checkpoint.options.length > 0">
		<tr v-for="option in checkpoint.options">
			<td>{{option.name}}</td>
			<td>
				<div class="ui fields inline" v-if="option.type == 'field'">
					<div class="ui field">
						<input type="text" name="" :placeholder="option.placeholder" :maxlength="(option.maxLength > 0)?option.maxLength:1024" :size="option.size" v-model="option.value"/>
					</div>
					<div class="ui field">
                        {{option.rightLabel}}
					</div>
				</div>
				<div class="ui fields inline" v-if="option.type == 'options'">
					<div class="ui field">
						<select class="ui dropdown" :style="'width:' + option.size + 'em'" name="" v-model="option.value">
							<option v-for="opt in option.options" :value="opt.value">{{opt.name}}</option>
						</select>
					</div>
					<div class="ui field">
                        {{option.rightLabel}}
					</div>
				</div>
				<p class="comment" v-if="option.comment != null && option.comment.length > 0">{{option.comment}}</p>
			</td>
		</tr>
		</tbody>

		<tr>
			<td>操作符</td>
			<td>
				<select class="ui dropdown" name="operator" style="width:10em" v-model="rule.operator" @change="changeOperator()">
					<option v-for="op in operators" :value="op.code">{{op.name}}</option>
				</select>
				<p class="comment" v-if="operator != null" v-html="operator.description"></p>
			</td>
		</tr>
		<tr v-if="operator.case != 'none'">
			<td>开启大小写不敏感</td>
			<td>
				<div class="ui checkbox">
					<input name="case" type="checkbox" value="1"  v-model="rule.isCaseInsensitive"/>
					<label></label>
				</div>
				<p class="comment">开启后忽略英文字母大小写</p>
			</td>
		</tr>
		<tr>
			<td>对比值</td>
			<td>
				<textarea rows="3" maxlength="4096" name="value" v-model="rule.value"></textarea>
			</td>
		</tr>
	</table>

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