<template>
  <div class="filter-row">
    <div class="label" v-if="title" :style="{width:labelWidth?labelWidth+'px':'70px'}">{{title}}</div>
    <div class="filter-cont">
      <el-input v-model="value" size="mini" :type="type" :placeholder="placeholder?placeholder:title" @input="input" clearable></el-input>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class FilterInput extends Vue {
  value=''
  @Prop()
  title:string|undefined
  @Prop()
  placeholder?:string
  @Prop()
  type?:string
  @Prop()
  labelWidth?:number

  clear(){
    this.value = ''
  }

  input(v:any){
    this.$emit('input',v)
  }
}
</script>

<style lang="scss" scoped>
.filter-row{
  width: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 4px;
  .label{
    width: 70px;
    flex-shrink: 0;
    font-size: 14px;
    text-align: right;
  }
  .filter-cont{
    width: 100%;
    padding-left: 8px;
    box-sizing: border-box;
  }
}
</style>