<template>
  <div class="grid-toolbar">
    <a-form-model
			layout="inline"
			@submit.prevent="submit"
			:model="formData">
      <a-form-model-item>
				<a-input-group compact v-if="options && options.length">
					<a-select
						v-model="formData.field"
						placeholder="请选择"
						@change="handleSelectChange"
            :options="options">
					</a-select>
					<a-input
						v-model="formData.keyword"
						style="width: auto;"
						@change="handleInputChange"
						:placeholder="placeholder || '请输入关键词'"
						:allowClear="true" />
				</a-input-group>
				<a-input
					v-else
					v-model="formData.keyword"
					placeholder="请输入关键词"
					:allowClear="true" />
      </a-form-model-item>
			<slot></slot>
      <a-form-model-item>
        <a-button type="primary" html-type="submit">
          <a-icon type="search" />
          查询
        </a-button>
      </a-form-model-item>
      <a-form-model-item v-if="options && options.length">
        <a-button @click="handleReset">
          <a-icon type="close" />
          重置
        </a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click="$emit('refresh')">
          <a-icon type="reload" />
          刷新
        </a-button>
      </a-form-model-item>
			<template v-if="addAuthority">
				<a-form-model-item v-authority="addAuthority" v-if="showAdd">
					<a-button type="primary" @click="$emit('add')">
						<a-icon type="plus" />
						添加
					</a-button>
				</a-form-model-item>
			</template>
			<template v-else>
				<a-form-model-item v-if="showAdd">
					<a-button type="primary" @click="$emit('add')">
						<a-icon type="plus" />
						添加
					</a-button>
				</a-form-model-item>
			</template>
			<slot name="after"></slot>
    </a-form-model>
		<transition name="tag-group">
			<transition-group
				v-show="options && options.length && tags_list.length"
				name="tag-fade"
				tag="div"
				class="toolbar_query">
				<template v-for="item in tags_list">
					<a-tag
						:key="item.field"
						closable
						color="blue"
						@close="handleCloseTag(item.field)"
						@click="handleCloseClick(item.field)">{{ item.value }}</a-tag>
				</template>
			</transition-group>
		</transition>
  </div>
</template>
<script>
export default {
  props: {
    query: {
      type: Object,
      default: () => {}
		},
		addAuthority: {
      type: String,
      default: ''
		},
		showAdd: {
      type: Boolean,
      default: true
		},
    selectOptions: {
      type: Array,
      default: () => []
		},
    defaultSelected: {
      type: String,
      default: 'keyword'
		}
  },
  data() {
    return {
			formData: {
				field: this.defaultSelected,
				keyword: ''
			},
			search_query: {}
    }
	},
	watch: {
		defaultSelected: {
      handler(newVal) {
				if (!this.options || !this.options.length) return
        this.formData.field = newVal || ''
      },
      immediate: true
		},
		query: {
      handler(newVal) {
				if (!this.options || !this.options.length) return this.formData.keyword = (newVal && newVal.keyword) || ''
				this.search_query = {
					// ...this.search_query,
					...newVal
				}
				this.formData.keyword = this.search_query[this.formData.field] || ''
      },
      immediate: true,
      deep: true
		}
	},
	computed: {
		options () {
			return this.selectOptions.map(v => ({
				label: v.label,
				value: v.value
			})) || []
		},
		tags_list () {
			const arr = []
			for (const [key, value] of Object.entries(this.search_query)) {
				value && arr.push({ field: key, value: value })
			}
			return arr
		},
		placeholder () {
			const options = this.selectOptions.filter(v => v.value === this.formData.field)
			return options[0] && options[0].placeholder
		}
	},
  methods: {
		// 切换筛选条件时，初始化输入框的值
		handleSelectChange () {
			this.formData.keyword = this.search_query[this.formData.field] || ''
		},
		// 输入框值发生改变时，记录到 search_query 对象
		handleInputChange () {
			this.$set(this.search_query, this.formData.field, this.formData.keyword || '')
		},
		// 重置
		handleReset () {
			this.formData = {
				field: this.options.map(v => v.value).includes('keyword') ? 'keyword' : this.defaultSelected,
				keyword: ''
			}
			this.search_query = {}
			this.submit()
		},
		// 关闭标签
		handleCloseTag (field) {
			delete this.search_query[field]
			if (field === this.formData.field || field === '') {
				this.formData.keyword = ''
			}
			this.submit()
		},
		// 点击标签
		handleCloseClick (field) {
			this.formData.field = field || ''
			this.formData.keyword = this.search_query[field] || ''
		},
    async submit() {
			if (this.options && this.options.length) {
				const options = {}
				for (const [key, value] of Object.entries(this.search_query)) {
					if (!key && value) {
						options.keyword = value
						continue
					}
					options[key] = value
				}
				this.$emit('submitQuery', { ...options })
				this.$emit('update:query', { ...options })
				return
			}
			this.$emit('submitQuery', { keyword: this.formData.keyword || '' })
			return this.$emit('update:query', { keyword: this.formData.keyword || '' })
    }
  }
}
</script>
