<template>
  <div class="monthBox" style="display:flex;align-item:center;">
    <a-month-picker
      id="customerCountList-startValue"
      :disabled-date="disabledStartDate"
      format="YYYY-MM"
      v-model="startValue"
      placeholder="开始月份"
      @openChange="handleStartOpenChange"
    />
    <span>~</span>
    <a-month-picker
      id="customerCountList-endValue"
      :disabled-date="disabledEndDate"
      format="YYYY-MM"
      v-model="endValue"
      placeholder="结束月份"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      startValue: moment().format('YYYY-MM'),
      endValue: moment().format('YYYY-MM'),
      endOpen: false
    }
  },
  watch: {
    startValue (a, b) {
      this.hanldChange(a ? moment(a).format('YYYY-MM') : '', this.endValue)
    },
    endValue (a, b) {
      this.hanldChange(this.startValue, a ? moment(a).format('YYYY-MM') : '')
    }
  },
  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
      }
    },
    // 结束时间
    handleEndOpenChange (open) {
      this.endOpen = open
    },
    hanldChange (s, e) {
      console.log(s, e)
      const val = [s, e]
      this.startValue = val[0]
      this.endValue = val[1]
      this.$emit('change', val)
      this.$emit('input', val)
    },
    // 获取指定月份   第一天和最后一天
    getMonthRange (targetMonth) {
      // 获取指定月第一天（格式化为 YYYY-MM-DD）
      const firstDay = moment(targetMonth).startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
      // 获取指定月最后一天（格式化为 YYYY-MM-DD）
      const lastDay = moment(targetMonth).endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
      return { firstDay, lastDay }
    },
    resetDate () {
      this.startValue = moment().format('YYYY-MM')
      this.endValue = moment().format('YYYY-MM')
      this.hanldChange(this.startValue, this.endValue)
    }
  }
}
</script>

<style lang="less" scoped>
  .monthBox{
    /deep/.ant-calendar-picker-icon{
      display:none !important;
    }
    /deep/.ant-calendar-picker input{
      text-align:center;
    }
  }
</style>
