<template>
  <div id="builder"></div>
</template>

<script>
import { onMounted } from 'vue';
import $ from 'jquery';
import 'jQuery-QueryBuilder/dist/js/query-builder.js'
import 'jQuery-QueryBuilder/dist/css/query-builder.default.css'
export default {
  name: 'QueryBuilder',
  setup() {
    onMounted(() => {
      $('#builder').queryBuilder({
        template: {
          group: function(data) {
            const template = doT.template(`
        <div id="{{=it.group_id}}" class="rules-group-container">
          <div class="rules-group-header">
            <div class="btn-group pull-right group-actions">
              {{? it.condition_readonly === false }}
                <button type="button" class="btn btn-xs btn-success" data-add="rule"><i class="glyphicon glyphicon-plus"></i> Rule</button>
                <button type="button" class="btn btn-xs btn-success" data-add="group"><i class="glyphicon glyphicon-plus-sign"></i> Group</button>
              {{?}}
              {{? it.deletable }}
                <button type="button" class="btn btn-xs btn-danger" data-delete="group"><i class="glyphicon glyphicon-remove"></i></button>
              {{?}}
            </div>
            {{~ it.conditions :condition }}
              <label class="btn btn-xs btn-primary {{? condition.checked }}active{{?}}" data-toggle="condition" data-value="{{=condition.value}}">{{=condition.label}}</label>
            {{~}}
          </div>
          <div class="rules-group-body">
            <div class="rules-list"></div>
          </div>
        </div>
      `);
            return template(data);
          }
        }
        ,
        filters: [
          {
            id: 'name',
            label: 'Name',
            type: 'string',
          },
          {
            id: 'age',
            label: 'Age',
            type: 'integer',
            validation: {
              min: 0,
              max: 100,
            },
          },
          {
            id: 'gender',
            label: 'Gender',
            type: 'string',
            input: 'select',
            values: {
              male: 'Male',
              female: 'Female',
            },
          },
        ],
      });
    });
  },
};
</script>