<style  lang="less" scoped>
.monthcom {
    .column {
        text-align: center;
    }
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height:70px;
        &.disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
        .btn_com {
            width: 240rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: 500;
            background: #ffda1a;
            box-shadow: 0px 8rpx 12rpx rgba(0, 0, 0, 0.07);
            border-radius: 60rpx;
            color: #000000;
        }
    }
    .dateSy {
        line-height: 45px;
        font-size: 18px;
    }
    .pickerView {
        width: 100%;
        height: 250px;
        transform: rotate3d(1, 0, 0, 15deg);
    }
}
</style>




<template>
    <div class="monthcom">
        <picker-view
            @change="bindChange"
            bindpickstart="bindpickstart"
            bindpickend="bindpickend"
            indicator-style="height: 45px;"
            class="pickerView"
            :value="currentValue"
        >
            <picker-view-column class="column">
                <div
                    class="dateSy"
                    v-for="yr in yearArr"
                    :key="yr"
                >{{yr}} 年</div>
            </picker-view-column>
            <picker-view-column class="column">
                <div
                    class="dateSy"
                    v-for="mn in monthArr"
                    :key="mn"
                >{{mn}} 月</div>
            </picker-view-column>
        </picker-view>
        <div
            class="btn"
            :class="{'disabled':!canEmit}"
            @click="emitTime"
        >
            <div class="btn_com">
                确定
            </div>
        </div>

    </div>
</template>

<script>
import wepy from '@wepy/core';
import moment from 'moment';
let yearArr = [];
let nowYear = Number(moment().format('YYYY'));
function timeYearData() {
  for (let i = 2020; i <= nowYear; i++) {
    yearArr.push(i);
  }
  return yearArr
}
function timeMonthData(yearIndex ) {
  let monthArr = [];
  let jStart = 1;
  let lastMonth = 0;
  if(yearIndex==undefined){
    var initYear = moment().subtract(1, 'month').format("YYYY");
    yearArr.forEach((item, idx) => {
          if (initYear== item) {
            yearIndex = idx
          }
        });
  }
  console.log('yearIndex----',yearIndex)

  if (yearIndex && yearArr[yearIndex] == nowYear) {
    lastMonth = Number(moment().format('MM'));
  } else {
    lastMonth = 12;
  }

  if (yearArr[yearIndex] == 2020) {
    jStart = 11;
  } else {
    jStart = 1;
  }
  for (let j = jStart; j <= lastMonth; j++) {
    if (j < 10) {
      monthArr.push('0' + j);
    } else {
      monthArr.push(j);
    }
  }
  return monthArr
}

wepy.component({
  props: {
    yearMonthText: String
  },
  name: 'monthcom',
  data: {
    yearArr: timeYearData(),
    monthArr: timeMonthData(),
    currentValue: [9999, 2], // 默认值
    checkTime: '',
    flag: false,
    canEmit: true // 滚动
  },

  watch: {
    yearMonthText() {
      let arr = this.yearMonthText.split('.');
      let yearIndex;
      let monthIndex;
      this.yearArr.forEach((item, idx) => {
        if (arr[0] == item) {
          yearIndex = idx
        }
      })
      this.monthArr.forEach((item, idx) => {
        if (arr[1] == item) {
          monthIndex = idx
        }
      })
      //console.log("yearMonthText",this.yearMonthText,yearIndex,monthIndex)
      this.currentValue = [yearIndex, monthIndex];
    }
  },
  methods: {
    emitTime() {
      if (!this.canEmit) return;
      this.$emit('checkTime', this.checkTime?this.checkTime:this.yearMonthText);
    },

    bindpickstart() {
      this.canEmit = false;
    },
    bindpickend() {
      this.canEmit = true;
    },
    bindChange(e) {
      const checkArr = e.$wx.detail.value;
      this.monthArr = timeMonthData(checkArr[0]);
      let year = String(this.yearArr[checkArr[0]]);
      let month = String(this.monthArr[checkArr[1]])
      this.checkTime = year + month;
    }

  }

})
</script>
