<template>
  <el-form-item :label="label" :prop="prop" >
    <el-input
      v-if="type === 'input'"
      v-model="queryParams[prop]"
      :placeholder="`请输入${label}`"
      clearable
      @keyup.enter.native="handleQuery"
    />
    <el-select v-else-if="type==='dict'" v-model="queryParams[prop]" :placeholder="`请选择${label}`" clearable @change="handleQuery">
      <el-option
        v-for="dict in dict.type[dictType]"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: "SearchFormItem",
  props: {
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    label: {
      type: String,
      default: null
    },
    prop: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: 'input',
      validator: function (value) {
        return ["custom", "input", "dict", 'date', "dateRange"].includes(value);
      },
    },
    // 字典类型
    dictType: {
      type: String,
      default: null,
    },
    // 字典对象
    dict: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    handleQuery() {
      this.$emit('query');
    }
  }
}
</script>
