<!--事件处理统计查询框-->
<template>
  <div>
    <search-area :need-clear="false" :need-search-more="false" :size="size" type="default" search-more-type="default" @search="search">
      <chart-tools @change="changeTime"/>
      <!--一般查询条件-->
      <search-item>
        <el-date-picker
          v-model="timeRange"
          :size="size"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="统计开始日期"
          end-placeholder="统计结束日期"/>
      </search-item>
    </search-area>
  </div>
</template>

<script>
import SearchArea from '../../../../components/SearchArea/SearchArea'
import SearchItem from '../../../../components/SearchArea/SearchItem'
// import { getDayTime, getToday } from '@/utils/dateutils'
import ChartTools from '../../components/chartTools'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'CallSearch',
  components: { ChartTools, SearchItem, SearchArea },
  props: {
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      listQuery: {
        startTime: '',
        endTime: ''
      },
      timeRange: []
    }
  },
  watch: {
    timeRange(val) {
      if (this.timeRange && this.timeRange.length === 2) {
        this.listQuery.startTime = this.timeRange[0]
        this.listQuery.endTime = this.timeRange[1]
      }
    }
  },
  created() {
    this.timeRange = [getToday('yyyy-MM-dd'), getToday('yyyy-MM-dd')]
    this.search()
  },
  methods: {
    search() {
      if (this.timeRange && this.timeRange.length === 2) {
        this.listQuery.startTime = this.timeRange[0]
        this.listQuery.endTime = this.timeRange[1]
      }
      this.$emit('search', this.listQuery)
    },
    changeTime(val) {
      this.timeRange = val
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.level-txt{
  margin-left:20px;
  color: #909399;
  font-size:15px;
  line-height: 32px
}
.level-radio{
  margin-right: 20px;
  color: #909399;
  line-height: 32px;
}
.level-radio label{
  vertical-align: middle;
}

</style>