<template>
  <div style="width: 5rem">
    <div class="search-menu">
      <common-btn id="timeBtn"
                  :bg="timeBg" :bg-hover="timeHover"
                  :select="currentSelect"
                  width="5" height="5"
                  text-hover="时间筛选"
                  @click="btnClick" v-on="$listeners"/>
    </div>
    <el-date-picker
      v-show="currentSelect" class="time-input"
      v-model="timeRange"
      type="daterange"
      range-separator="至"
      value-format="yyyy-MM-dd"
      start-placeholder="起始时间"
      end-placeholder="终止时间"
      clearable
      @change="handleTimeRange"
    />
  </div>
</template>

<script>
import CommonBtn from "../CommonBtn";
import { getDate } from '@/utils/calendarUtil'

export default {
  name: 'TimeManager',
  components: { CommonBtn },
  props: {
    select: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentSelect: this.select,
      timeBg: require('@/assets/images/function/视频云/时间筛选未选中.png'),
      timeHover: require('@/assets/images/function/视频云/时间筛选选中.png'),
      time: {
        startTime: '',
        endTime: '',
      },
      timeRange: [],
    }
  },
  watch: {
    select(val) {
      this.currentSelect = val
    }
  },
  mounted() {
    this.timeRange = [getDate(-7, 'DATE'), getDate(0, 'DATE')]
    this.time.startTime = this.timeRange[0]
    this.time.endTime = this.timeRange[1]
    this.$emit('handleTimeRange',this.time)
  },
  methods: {
    btnClick() {
      this.currentSelect=!this.currentSelect
      if(this.currentSelect){
        this.$emit('changeState','timeBtn')
      }
    },
    handleTimeRange(date) {
      if (date) {
        this.time.startTime = date[0]
        this.time.endTime = date[1]
      } else {
        this.time.startTime = ''
        this.time.endTime = ''
      }
      this.$emit('handleTimeRange',this.time)
    },
  }
}
</script>

<style scoped>
.search-menu {
  display: flex;
  z-index: 111111111;
  position: relative;
  left: 0px;
  top: 0px;
}
.time-input {
  position: relative;
  width: 33rem;
  z-index: 999999999;
  margin-top: -0.25rem;
  -webkit-animation: vibrate-1 0.3s linear both;
  animation: vibrate-1 0.3s linear both;
}
</style>