<template>
  <div class="data-range-container">
    <el-button type="primary" @click="previous">前一月</el-button>
    <el-date-picker
      v-model="datePrivate"
      type="month"
      format="yyyy 第 MM 月"
      :picker-options="dateOption"
      placeholder="选择月">
    </el-date-picker>
    <el-button type="primary" @click="next">后一月</el-button>
  </div>
</template>

<script>
  import {GetDateStr, getLastMonthDay, GetNextMonthDay, GetPreMonthDay} from '@/utils/util'
  export default {
    name: 'date-signal',
    props: {
      value:{ // 必须要使用value
        default: ()=>([]),
      },
    },
    data() {
      return {
        datePrivate: '',
        dateOption:{
          firstDayOfWeek: 1,
          disabledDate: (time) => {
            return time.getTime() > this.today;
          }
        },
      }
    },
    computed: {
      today: {
        get: function(){
          return (new Date()).getTime()
        },
      },
    },
    watch:{
      datePrivate(val) {
        let arr=['', '']
        if (val) {
          arr = [GetDateStr(val,0), getLastMonthDay(val)]
        }
        this.$emit('input', arr)
      },
    },
    mounted(){
      // console.log(this.total)
    },
    methods: {
      next(){
        let current=this.datePrivate?this.datePrivate:new Date()
        let newDate=GetNextMonthDay(current,1)
        this.datePrivate=new Date(newDate.replace(/-/g, '/'))
      },
      previous(){
        let current=this.datePrivate?this.datePrivate:new Date()
        let newDate=GetPreMonthDay(current,1)
        this.datePrivate=new Date(newDate.replace(/-/g, '/'))
      }
    },
  }
</script>

