{$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">子条件列表</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="不区分大小写"
                ><i class="icon info small"></i
              ></sup>
              &nbsp;
              <a href="" title="修改" @click.prevent="updateCond(index, cond)"
                ><i class="icon pencil small"></i
              ></a>
              <a href="" title="删除" @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>
        <button class="ui button tiny" type="button" @click.prevent="addCond()">
          +
        </button>
      </td>
    </tr>
    <tr>
      <td>子条件之间关系</td>
      <td>
        <b-select
          v-model="group.connector"
          auto-width
          :options="[
						{label: '和', value: 'and'},
						{label: '或', 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'">
          必须满足所有条件才能成立。
        </p>
        <p class="comment" v-if="group.connector == 'or'">
          只要满足其中一个条件即可成立。
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="2"><more-options-indicator></more-options-indicator></td>
    </tr>
    <tbody v-show="moreOptionsVisible">
      <tr>
        <td>补充说明</td>
        <td>
          <textarea
            rows="3"
            v-model="group.description"
            maxlength="100"
          ></textarea>
        </td>
      </tr>
      <tr>
        <td>启用当前分组</td>
        <td>
          <div class="ui checkbox">
            <input type="checkbox" v-model="group.isOn" />
            <label></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <submit-btn>确定</submit-btn>
</form>
