<template>
  <div class="filter-row">
    <div class="label">{{title}}</div>
    <div class="filter-cont">
      <el-date-picker
        v-model="value"
        clearable
        size="mini" 
        type="date"
        @change="change"
        placeholder="选择日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Format from '@/benyun/utils/dateFormat'
@Component
export default class FilterInput extends Vue {
  value=''
  @Prop()
  title:string|undefined

  clear(){
    this.value = ''
  }

  change(v:any){
    this.value = Format(v,'yyyy-MM-dd');
    this.$emit('change',this.value)
  }
}
</script>

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