<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 option.list" :key="`filter_${val.label}_${index}`" class="pa-3" v-show="!val.hidden">
              <v-text-field
                  v-if="val.type === 'textField'"
                  v-model="val.value"
                  :label="val.label"
                  :disabled="val.disabled"
                  :placeholder="val.placeholder || `请输入${val.label}`"
                  :style="`width: ${val.width || 250}px`"
                  outlined dense clearable hide-details @keyup.enter.native="search"
              ></v-text-field>
              <v-combobox
                    v-if="val.type === 'combobox'"
                    v-model="val.value"
                    :label="val.label"
                    :placeholder="val.placeholder || `请选择${val.label}`"
                    :items="val.items"
                    :item-text="val.itemText || 'label'"
                    :item-value="val.itemValue || 'value'"
                    :style="`width: ${val.width || 250}px`"
                    :search-input="val.searchInput"
                    :readonly="val.readonly"
                    :multiple="val.multiple"
                    outlined dense :clearable="!val.clearable" attach
                    @change="$event => val.change ? val.change($event) : changeAutocomplete($event)"
                    @update:search-input="$event => inputUpdateAutocomplete($event, val)"
                    hide-details
              ></v-combobox>
              <v-autocomplete
                    v-if="val.type === 'autocomplete'"
                    v-model="val.value"
                    :label="val.label"
                    :placeholder="val.placeholder || `请选择${val.label}`"
                    :items="val.canCreate ? [inputUpdateValue, ...val.items].filter(Boolean) : val.items"
                    :item-text="val.itemText || 'label'"
                    :item-value="val.itemValue || 'value'"
                    :style="`width: ${val.width || 250}px`"
                    :search-input.sync="val.searchInput"
                    :return-object="val.returnObject || false"
                    :readonly="val.readonly"
                    :multiple="val.multiple"
                    outlined dense :clearable="!val.clearable" attach
                    :no-data-text="val.noDataText || 'No data available'"
                    @change="$event => val.change ? val.change($event) : changeAutocomplete($event)"
                    @update:search-input="$event => val.canCreate ? inputUpdateValue = $event : inputUpdateAutocomplete($event)"
                    hide-details
              ></v-autocomplete>
              <!-- autocomplete2 多选纸片样式 -->
              <v-autocomplete
                  v-if="val.type === 'autocomplete2'"
                  v-model="val.value"
                  :loading="val.loading"
                  :label="val.label"
                  :placeholder="val.placeholder || `请选择${val.label}`"
                  :items="val.canCreate ? [inputUpdateValue, ...val.items].filter(Boolean) : val.items"
                  :item-text="val.itemText || 'label'"
                  :item-value="val.itemValue || 'value'"
                  :style="`width: ${val.width || 250}px`"
                  :search-input.sync="val.searchInput"
                  :readonly="val.readonly"
                  :multiple="val.multiple"
                  outlined dense :clearable="!val.clearable" attach
                  @blur="$event => val.blur ? val.blur($event, val) : blurAutocomplete($event)"
                  @change="$event => val.change ? val.change($event) : changeAutocomplete($event)"
                  @update:search-input="$event => val.canCreate ? inputUpdateValue = $event : inputUpdateAutocomplete($event)"
                  hide-details
                  deletable-chips
                  small-chips
                  :no-data-text="val.noDataText || 'No data available'"
                  class="mr-2"
                >
                  <template v-slot:selection="{ item, index }">
                    <v-chip
                      v-if="index === 0"
                      class="autoInput"
                      :style="val.multiple && val.value.length > 1 ? 'width: calc(100% - 70px);' : ''"
                      small
                      close
                      @click:close="val.value.shift(); val.change(val.value)"
                    >
                      <span class="over">{{ item[val.itemText] }}</span>
                    </v-chip>
                    <span v-if="index === 1" class="grey--text text-caption autoInput">(+{{ val.value.length - 1 }} 其他)</span>
                  </template>
              </v-autocomplete>
              <v-select
                v-if="val.type === 'select'"
                  v-model="val.value"
                  :label="val.label"
                  :placeholder="val.placeholder || `请选择${val.label}`"
                  :items="val.items"
                  :item-text="val.itemText || 'label'"
                  :item-value="val.itemValue || 'value'"
                  :style="`width: ${val.width || 250}px`"
                  :readonly="val.readonly"
                  :multiple="val.multiple"
                  :clearable="val.clearable"
                  :menu-props="val.menuProps ?? { offsetY: true }"
                  hide-details outlined dense attach
                  @change="$event => val.change ? val.change($event) : $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 v-if="showBtn">
              <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" v-if="showResetBtn" 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: 'filter-list',
  components: { DatePicker, MDataPicker },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    showResetBtn: {
      type: Boolean,
      default: true
    },
    option: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      inputUpdateValue: '',
      valid: false
      // filter: {},
      // resetData: {}
    }
  },
  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)
    },
    inputUpdateAutocomplete (val, item) {
      this.$emit('inputUpdateAutocomplete', val, item)
    },
    blurAutocomplete (val, item) {
      this.$emit('blurAutocomplete', val, item)
    },
    changeAutocomplete (val) {
      this.$emit('changeAutocomplete', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .autoInput+input {
  min-width: unset !important;
}
</style>
