<template>
  <div style="display: flex;align-items: center;justify-content: space-between;">
    <div style="flex:1">
      <a-date-picker
      :size="size"
      :locale="locale"
      v-model="startValue"
      :allowClear="allowClear"
      :disabled-date="disabledStartDate"
      :show-time="showTime"
      :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
      placeholder="开始时间"
      :open="startOpen"
      inputReadOnly
      @openChange="handleStartOpenChange"
      @panelChange="handleStartPanelChange"
      :showToday="false"
      style="width:100%"
    >
      <div slot="renderExtraFooter" v-if="showShortcut">
        <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
        <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
        <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
        <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
        <a-button @click="setVal('date5')" v-if="showShortcut" type="link" size="small">近一年</a-button>
        <a-button @click="setVal('date6')" v-else type="link" size="small">近三个月</a-button>
      </div>
    </a-date-picker>
    </div>
    <span style="width: 20px;text-align: center;">至</span>
    <div style="flex:1">
      <a-date-picker
      :size="size"
      :locale="locale"
      v-model="endValue"
      :allowClear="allowClear"
      :disabled-date="disabledEndDate"
      :show-time="showTime"
      :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
      placeholder="结束时间"
      inputReadOnly
      :open="endOpen"
      @openChange="handleEndOpenChange"
      @panelChange="handleEndPanelChange"
      :showToday="false"
      style="width:100%"
    >
      <div slot="renderExtraFooter">
        <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
        <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
        <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
        <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
        <a-button @click="setVal('date5')" v-if="showShortcut" type="link" size="small">近一年</a-button>
        <a-button @click="setVal('date6')" v-else type="link" size="small">近三个月</a-button>
      </div>
    </a-date-picker>
    </div>
  </div>
</template>
<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment from 'moment';//引入moment 
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    size: {
      type: String,
      default: 'default'
    },
    showTime: {
      type: Boolean,
      default: false
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    showShortcut: {
      type: Boolean,
      default: true
    },
  },
  data () {
    return {
      locale,
      startValue: null,
      endValue: null,
      endOpen: false,
      startOpen: false,
      ranges: {
        'date1': [moment(), moment()],
        'date2': [moment().subtract(1, 'months'), moment()],
        'date3': [moment().startOf('month'), moment()],
        'date4': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
        'date5': [moment().subtract(1, 'years'), moment()],
        'date6': [moment().subtract(3, 'months').startOf('month'), moment().subtract(3, 'months').endOf('month')]
      },
      startMode:'',
      endMode: ''
    }
  },
  watch: {
    startValue (val,old) {
      if(old&&!val){
        this.endValue = null
      }
      if(val && !this.endValue){
        this.endOpen = true
      }
      this.startValue = val || null
      this.changeInput()
    },
    endValue (val,old) {
      if(old&&!val){
        this.startValue = null
      }
      this.endValue = val || null
      this.changeInput()
    }
  },
  methods: {
    setVal (key) {
      this.startValue = this.ranges[key][0]
      this.endValue = this.ranges[key][1]
      this.startOpen = false
      this.endOpen = false
    },
    disabledStartDate (startValue) {
      const endValue = this.endValue
      const maxYearVs = moment().endOf('day') //  今天，包含今天
      if (endValue) {
        if (!this.startValue) {
          return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
        }
        if(this.startMode == 'year'){
          return startValue.valueOf() > moment().endOf('year').valueOf()
        }
        if(this.startMode == 'month'){
          return startValue.valueOf() > moment().endOf('month').valueOf()
        }
        return startValue.valueOf() > moment(endValue).valueOf() || startValue.valueOf() > maxYearVs.valueOf()
      }
      return startValue.valueOf() > maxYearVs.valueOf()
    },
    disabledEndDate (endValue) {
      const startValue = this.startValue
      const maxYearVs = moment().endOf('day') //  今天，包含今天
      if (startValue) {
        if(this.endMode == 'year'){
          const sv = moment(startValue).startOf('year')
          return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('year').valueOf()
        }
        if(this.endMode == 'month'){
          const sv = moment(startValue).startOf('month')
          return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('month').valueOf()
        }
        return moment(startValue).valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
      }
      return endValue.valueOf() > maxYearVs.valueOf()
    },
    handleStartOpenChange (open) {
      if(!open && !this.endValue){
        this.endOpen = !!this.startValue
      }
      if(!open){
        this.startMode = ''
      }
      this.startOpen = open
    },
    handleEndOpenChange (open) {
      if(!open){
        this.endMode = ''
      }
      this.endOpen = open
    },
    handleStartPanelChange (v, mode) {
      console.log(v, mode)
      this.startMode = mode
    },
    handleEndPanelChange (v, mode) {
      console.log(v, mode)
      this.endMode = mode
    },
    changeInput () {
      const startValue = this.startValue
      const endValue = this.endValue
      console.log(startValue, endValue)
      let dateStrings = [startValue, endValue]
      if (!dateStrings[0] && !dateStrings[1]) {
        dateStrings = []
      } else {
        if (!this.showTime) {
          dateStrings[0] = dateStrings[0] ? moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00') : ''
          dateStrings[1] = dateStrings[1] ? moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59') : ''
        } else {
          dateStrings[0] = dateStrings[0] ? moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss') : ''
          dateStrings[1] = dateStrings[1] ? moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss') : ''
        }
      }
      this.$emit('change', dateStrings)
    },
    resetDate (val) {
      this.startValue = val && val[0] ? val[0] : null
      this.endValue = val && val[1] ? val[1] : null
      this.$emit('change', [])
    }
  }
}
</script>
