<template>
    <v-card style="width:100%; min-height: 80px;" elevation="5">
        <v-form v-model="valid" ref="form" @submit.prevent="search">
          <div class="flex-horizon d-flex pa-2 flex-wrap">
            <div v-for="(val, index) in items" :key="`filter_${val.label}_${index}`" class="pa-3" v-show="!val.hidden">
              <v-text-field
                  v-if="val.type === 'text'"
                  v-model="query[val.key]"
                  :placeholder="val.placeholder || `请输入${val.label}`"
                  :style="`width: ${val.width || 250}px`"
                  v-bind="val"
                  outlined dense clearable hide-details @keyup.enter.native="search"
              ></v-text-field>
              <v-autocomplete
                    v-if="val.type === 'autocomplete'"
                    v-model="query[val.key]"
                    :placeholder="val.placeholder || `请选择${val.label}`"
                    :item-text="val.itemText || 'label'"
                    :item-value="val.itemValue || 'value'"
                    :style="`width: ${val.width || 250}px`"
                    :search-input.sync="val.searchInput"
                    outlined
                    dense
                    attach
                    hide-details
                    v-bind="val"
                    @change="$event => val.change && val.change($event)"
              ></v-autocomplete>
              <v-select
                v-if="val.type === 'select'"
                v-model="query[val.key]"
                :placeholder="val.placeholder || `请选择${val.label}`"
                :item-text="val.itemText || 'label'"
                :item-value="val.itemValue || 'value'"
                :style="`width: ${val.width || 250}px`"
                v-bind="val"
                hide-details outlined dense attach
                @change="$event => val.change && val.change($event)"
              ></v-select>
              <date-picker
                  v-if="val.type === 'datePicker'"
                  v-model="val.value"
                  ref="picker"
                  :option="{
                    max: val.max,
                    min: val.min,
                    range: val.range,
                    placeholder: val.placeholder || val.label,
                    type: val.dateType || 'date',
                    clearable: val.clearable || false
                  }"
                  @change="val.change && val.change($event), val.value = $event"
              />
              <m-data-picker
                v-if="val.type === 'dataPicker'"
                v-model="val.value"
                :style="`width: ${val.width || 250}px`"
                :label="val.label"
                :placeholder="val.placeholder || val.label"
                :item-children="val.itemChildren ?? 'children'"
                :item-label="val.itemLabel ?? 'label'"
                :item-value="val.itemValue ?? 'value'"
                :items="val.items"
                @change="$event => val.change && val.change($event)"
              ></m-data-picker>
              <template v-if="val.type === 'checkbox'">
                <div class="d-flex">
                  <v-checkbox
                    v-model="val.value"
                    v-for="k in val.items"
                    :key="k.key"
                    :label="k.label"
                    :color="val.color"
                    :value="k.value"
                    hide-details
                    :multiple="true"
                    class="mr-3"
                    style="margin-top: 0;padding-top: 6px;"
                  ></v-checkbox>
                </div>
              </template>
            </div>
            <template>
              <div class="pt-3 mr-3">
                <v-btn color="primary" class="elevation-5 half-button" rounded @click="search">查 询</v-btn>
              </div>
              <div class="pt-3">
                <v-btn color="#5cbbf6" rounded class="white--text elevation-5 half-button" @click="reset">重 置</v-btn>
              </div>
            </template>
            <slot name="btn"></slot>
          </div>
          <slot></slot>
        </v-form>
        <slot name="footer"></slot>
    </v-card>
</template>

<script>
import DatePicker from '@/components/Form/datePicker.vue'
import MDataPicker from '@/components/MDataPicker'
export default {
  name: 'MSearch',
  components: { DatePicker, MDataPicker },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    items: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data () {
    return {
      query: {
        ...this.value
      },
      inputUpdateValue: '',
      valid: false
      // filter: {},
      // resetData: {}
    }
  },
  watch: {
    value: {
      handler (val) {
        this.query = val
      },
      deep: true
    },
    query: {
      handler (val) {
        this.$emit('input', val)
      },
      deep: true
    }
  },
  created () {
    // this.option?.list.forEach(item => {
    //   this.filter[item.key] = item.value
    //   this.resetData[item.key] = item.value
    // })
  },
  methods: {
    search () {
      const obj = this.option?.list.reduce((res, item) => {
        res[item.key] = item.value
        return res
      }, {})
      this.$emit('search', obj)
    },
    reset () {
      if (this.$listeners.resetNoParams) {
        this.$emit('resetNoParams')
        return
      }
      this.$refs.form.reset()
      if (this.$refs?.picker && this.$refs.picker.length) {
        this.$refs.picker.forEach(e => {
          e.reset()
        })
      }
      const obj = this.option?.list.reduce((res, item) => {
        res[item.key] = null
        return res
      }, {})
      if (this.$listeners.customReset) {
        this.$emit('customReset')
        return
      }
      this.$emit('search', obj, true)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
