{$layout "layout_popup"}

<!-- <h3 v-if="!isUpdating">添加条件分组</h3>
<h3 v-if="isUpdating">修改条件分组</h3> -->
<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
	<input type="hidden" name="condGroupJSON" :value="JSON.stringify(group)"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">{{t('conds_addGroupPopup@子条件列表')}}</td>
			<td style="word-break: break-all">
				<div v-if="group.conds.length > 0">
					<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
						<span class="ui label small">
							<var v-if="cond.type.length == 0 || cond.type == 'params'" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
							<var v-if="cond.type.length > 0 && cond.type != 'params'" style="font-style: normal">{{typeName(cond)}}: </var>
							{{cond.value}}
                            <sup v-if="cond.isCaseInsensitive" :title="t('conds_addGroupPopup@不区分大小写')"><i class="icon info small"></i></sup> &nbsp;
							<a href="" :title="t('conds_addGroupPopup@修改')" @click.prevent="updateCond(index, cond)"><i class="icon pencil small"></i></a> <a href="" :title="t('conds_addGroupPopup@删除')" @click.prevent="removeCond(index)"><i class="icon remove"></i></a> </span>
						<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
					</var>
					<div class="ui divider"></div>
				</div>
				<b-add-button @click="addCond()"></b-add-button>
			</td>
		</tr>
        <tr>
            <td>{{t('conds_addGroupPopup@子条件之间关系')}}</td>
            <td>
							<b-select
								v-model="group.connector"
								auto-width
								:options="[
									{label: t('conds_addGroupPopup@和'), value: 'and'},
									{label: t('conds_addGroupPopup@或'), value: 'or'},
								]"
							></b-select>

							<!-- <select class="ui dropdown auto-width" v-model="group.connector">
									<option value="and">和</option>
									<option value="or">或</option>
							</select> -->
							<p class="comment" v-if="group.connector == 'and'">{{t('conds_addGroupPopup@必须满足所有条件才能成立')}}</p>
							<p class="comment" v-if="group.connector == 'or'">{{t('conds_addGroupPopup@只要满足其中一个条件即可成立')}}</p>
            </td>
        </tr>
		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
			<tr>
				<td>{{t('conds_addGroupPopup@补充说明')}}</td>
				<td>
					<textarea rows="3" v-model="group.description" maxlength="100"></textarea>
				</td>
			</tr>
			<tr>
				<td>{{t('conds_addGroupPopup@启用当前分组')}}</td>
				<td>
					<checkbox v-model="group.isOn"></checkbox>
				</td>
			</tr>
		</tbody>
	</table>
	<submit-btn>{{t('conds_addGroupPopup@确定')}}</submit-btn>
</form>