<template>
  <div>
    <div class="q-gutter-sm" v-if="isDialog">
      <template v-for="(item, index) in conditionLables">
        <q-btn
          :key="index"
          :label="item.label"
          color="primary"
          dense
          icon-right="close"
          v-if="item.showLabel!==false"
          @click.native="removeFilter(item.name)"
        ></q-btn>
      </template>
    </div>
    <component
      v-model="showDialog"
      :is="isDialog ? 'q-dialog' : 'div'"
      transition-show="scale"
      transition-hide="scale"
    >
      <kyb-group is-group :items="conditions" :class="isDialog ? 'bg-white' : ''">
        <template #default="{group,groupIndex}">
          <div class="row q-pa-sm">
            <div
              v-for="(item, index) in group.items"
              v-show="group.extend"
              :class="item.itemClass"
              :key="index"
            >
              <template
                v-if="item.inputType === undefined || item.inputType === 'text' || item.inputType === 'textarea'"
              >
                <q-input
                  outlined
                  clearable
                  dense
                  :label="item.title"
                  :placeholder="item.desc"
                  :class="(item.$error?'bg-red-2':'bg-white')+' '+item.inputType"
                  v-model="valueInner[item.name]"
                  :type="item.inputType||'text'"
                ></q-input>
              </template>

              <template v-else-if="item.inputType === 'select'">
                <q-select
                  v-model="value[item.name]"
                  :options="item.options"
                  dense
                  outlined
                  :label="item.title"
                >
                  <template v-slot:append>
                    <q-icon
                      v-show="value[item.name]"
                      name="close"
                      @click.native="value[item.name] = ''"
                      class="cursor-pointer"
                    />
                  </template>
                </q-select>
              </template>
              <template v-else-if="item.inputType === 'kyb-select'">
                <div class="row items-center">
                  <span class="text-grey-7 text-bold" v-text="item.title"></span>:
                  <div class="col">
                    <kyb-select
                      v-model="valueInner[item.name]"
                      :can-add="false"
                      :can-del="false"
                      title-key="label"
                      value-key="value"
                      hide-toolbar
                      :items="item.options"
                    ></kyb-select>
                  </div>
                </div>
              </template>
            </div>

            <!-- <q-btn
              v-show="group.extend"
              label="查询"
              icon="search"
              color="primary"
              @click.native="hide(); query(valueInner)"
            ></q-btn> -->
          </div>
        </template>
      </kyb-group>
    </component>
  </div>
</template>

<script>
import { extend } from 'quasar'
export default {
  name: 'kyb-condition',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    tag: String,
    value: Object,
    conditions: Array,
    queryAuto: Boolean
  },
  data: function() {
    return {
      showDialog: false,
      valueInner: {}
    }
  },
  computed: {
    isDialog() {
      return this.tag === 'dialog'
    },
    conditionLables() {
      const labels = []
      this.conditions.forEach(item => {
        const itemValue = this.value[item.name]
        if (item.inputType === 'kyb-select' && itemValue) {
          const option = item.options.find(op => op.value === itemValue)
          if (option) {
            labels.push(extend({}, item, { label: option.label }))
          }
        } else if (itemValue) {
          labels.push(extend({}, item, { label: itemValue }))
        }
      })
      return labels
    }
  },
  methods: {
    removeFilter(name) {
      this.$delete(this.value, name)
      this.query(this.value)
    },
    query(value) {
      if (this.isDialog) {
        this.$emit('input', value)
      }
      this.$emit('query', value)
    },
    show() {
      this.valueInner = this.isDialog ? extend({}, this.value) : this.value
      this.showDialog = true
    },
    hide() {
      this.showDialog = false
    }
  },
  mounted() {
    if (this.queryAuto !== false) {
      this.query(this.value)
    }
  }
}
</script>
<style lang="stylus"></style>
