<template>
  <div class="filter-row">
    <div class="label" v-if="title">{{title}}</div>
    <div class="filter-cont">
      <el-date-picker
        v-model="value"
        style="width: 100%;"
        clearable
        size="mini" 
        type="datetimerange"
        @change="change"
        range-separator="-"
        start-placeholder="开始日期"
        end-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:Array<any>=[]
  @Prop()
  title:string|undefined

  clear(){
    this.value = []
  }

  change(v:any){
    this.value[0] = Format(v[0],'yyyy-MM-dd HH:mm:ss');
    this.value[1] = Format(v[1],'yyyy-MM-dd HH:mm:ss');
    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>