<template>
  <!-- 月份选择器 -->
  <div class="month-date-box">
    <div class="month-date-year monthBox">
      <a-month-picker
        :disabled-date="disabledStartDate"
        format="YYYY-MM"
        v-model="startValue"
        placeholder="开始月份"
        @openChange="handleStartOpenChange"
        @change="getStartDate"
      />
      <span>~</span>
      <a-month-picker
        :disabled-date="disabledEndDate"
        format="YYYY-MM"
        v-model="endValue"
        placeholder="结束月份"
        :open="endOpen"
        @openChange="handleEndOpenChange"
        @change="getEndDate"
      />
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  data () {
    return {
      monthVal: this.value,
      startValue: undefined, // 统计月份 开始
      endValue: undefined, // 统计月份 结束
      endOpen: false // 打开结束月份弹窗
    }
  },
  watch: {
    value (val) {
      this.monthVal = val
      if (val.length > 0) {
        this.startValue = val[0]
        this.endValue = val[1]
      }
    }
  },
  methods: {
    // 统计月份  选择月份限制
    disabledStartDate (current) {
      const endValue = this.endValue
      const md = moment(current).startOf('month').valueOf()
      const cd = moment().startOf('month').valueOf() // 当前月份
      if (!current || !endValue) {
        return md > cd
      }
      const ed = moment(endValue).startOf('month').valueOf()
      return md > ed || md > cd
    },
    disabledEndDate (current) {
      const startValue = this.startValue
      const md = moment(current).startOf('month').valueOf()
      const cd = moment().startOf('month').valueOf() // 当前月份
      if (!current || !startValue) {
        return md > cd
      }
      const sd = moment(startValue).startOf('month').valueOf()
      return md < sd || md > cd
    },
    // 开始时间
    handleStartOpenChange (open) {
      if (!open) {
        this.endOpen = true
      }
    },
    getStartDate (date, dateString) {
      this.startValue = dateString
      this.$emit('input', [this.startValue, this.endValue])
      this.$emit('change', [this.startValue, this.endValue])
    },
    // 结束时间
    handleEndOpenChange (open) {
      this.endOpen = open
    },
    getEndDate (date, dateString) {
      this.endValue = dateString
      this.$emit('input', [this.startValue, this.endValue])
      this.$emit('change', [this.startValue, this.endValue])
    },
    resetDate () {
      this.currYear = undefined
      this.currJd = undefined
      this.$emit('input', [this.startValue, this.endValue])
      this.$emit('change', [this.startValue, this.endValue])
    }
  }
}
</script>
<style lange="less">
.month-date-box{
  width:100%;
  .month-date-year{
    display:flex;
    align-item:center;
  }
  .monthBox{
    .ant-calendar-picker-icon{
      display:none !important;
    }
    .ant-calendar-picker input{
      text-align:center;
    }
  }
}
</style>
