<template>
  <div class="box">
    <el-select v-model="query.type" :disabled="isDisabledKey" clearable placeholder="聚合筛选条件" class="filter-item selectSearch" style="width: 130px" @change="changeType">
      <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
    </el-select>
    <div class="spanItem" />
    <el-input v-model="query.value" :disabled="!query.type||isDisabledKey" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item selectInput" @change="toQuery" />
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    isDisabledKey: {
      type: Boolean,
      required: false,
      default() {
        return false
      }
    },
    queryTypeOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    searchKey: {
      type: String,
      required: false,
      default() {
        return 'type'
      }
    },
    defaultKey: {
      type: String,
      required: false,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      query: {
        type: '',
        value: ''
      }
    }
  },
  mounted() {
    if (this.defaultKey) {
      this.query.type = this.defaultKey
    }
  },
  methods: {
    changeType() {
      this.query.value = ''
      this.toQuery()
    },
    toQuery() {
      const obj = {
        value: this.query.value
      }
      obj[this.searchKey] = this.query.type
      this.$emit('toQuery', obj)
    }
  }
}
</script>

<style scoped>
.box {
  display: inline-block;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  height: 33px;
}
.spanItem {
  display: inline-block;
  width: 2px;
  height: 20px;
  margin-bottom: -1px;
  background-color: #DCDFE6
}
/deep/ .selectSearch .el-input__inner {
  border: none!important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 135px;
}
/deep/ .selectInput .el-input__inner {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border: none;
  margin-left: -5px;
  width: 208px;
}
</style>