<template>
  <div class="durTime">
    <div class="out">
      <label class="inbk labtm">时间: </label>
      <div class="inbk sty">
        <c-date-picker theme='my97' :startDate='startDate'  format="yyyy-MM-dd HH:mm" @change='timeChangeStart' />
      </div>
      <div class="inbk sty">
        <c-date-picker theme='my97' :startDate='endDate'  format="yyyy-MM-dd HH:mm" @change='timeChangeEnd' />
      </div>
        <span class="inbk sec" @click='secClick'>查询</span>
    </div>
  </div>
</template>
<script>
/**
 * module:开始时间+结束时间+查询按钮
 * author:lwt
 */

export default {
  name: 'durTime',
  components: {
  },
  props: {
    startTm: String,
    endTm: String
  },
  computed: {
    // startDate () {
    //   return this.startTm
    // },
    // endDate () {
    //   return this.endTm
    // }
  },
  data () {
    return {
      quickSelection: [],
      startDate: this.startTm,
      endDate: this.endTm
    }
  },
  created: function () {
    // console.log('实例初始化完成调用')
    this.startDate = this.$props.startTm
    this.endDate = this.$props.endTm
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
  },
  methods: {
    timeChangeStart: function (v) {
      // console.log(v)
      this.startDate = v
    },
    timeChangeEnd: function (v) {
      // console.log(v)
      this.endDate = v
    },
    secClick: function () {
      if ((new Date(this.startDate)).getTime() > (new Date(this.endDate)).getTime()) {
        alert('所选时间范围中，开始时间大于结束时间，请重新选择！')
      } else {
        var dur = {}
        dur['start'] = this.startDate
        dur['end'] = this.endDate
        this.$attrs.secFun(dur)
      }
    }
  },
  directives: {
  },
  filters: {
  },
  watch: {
    startTm: function (val, oldVal) {
      this.startDate = this.startTm
    },
    endTm: function (val, oldVal) {
      this.endDate = this.endTm
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
  },
  beforeUpdate: function () {
    // console.log('更新前调用')
  },
  updated: function () {
    // console.log('更新完成调用')
  },
  deactivated: function () {
    // console.log('keep-alive组件停用时调用')
  },
  beforeDestroy: function () {
    // console.log('销毁之间调用')
  },
  destroyed: function () {
    // console.log('实例销毁后调用')
  },
  errorCaptured: function () {
    // console.log('异常发生处理')
  }
}
</script>
<style>
@import './durTime.css';
</style>
