<style  lang="less" scoped>
.monthcom {
  .monthtitle {
    height: 90rpx;
    line-height: 100rpx;
    text-align: center;
    font-size:36rpx;
  }
  .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 monthArr"
                    :key="yr"
                >{{yr.showstr}}</div>
            </picker-view-column>
            <picker-view-column class="column">
                <div
                    class="dateSy"
                    v-for="mn in weekArr"
                    :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 = [2020, 2021, 2022, 2023];
let nowYear = Number(moment().format('YYYY'));
let monthArr = [];
function timeMonthData() {
  let jStart = 1;
  let lastMonth = 12;
  for (let i = 0; i < yearArr.length; i++) {
    if (yearArr[i] == nowYear) {
      lastMonth = Number(moment().format('MM'));
    } else {
      lastMonth = 12;
    }
    if (yearArr[i] == 2020) {
      jStart = 11;
    } else {
      jStart = 1;
    }
    for (let j = jStart; j <= lastMonth; j++) {
      if (j < 10) {
        if (j == 1) {
          monthArr.push({
            time: yearArr[i] + '年' + '0' + j + '月',
            showstr: yearArr[i] + '年' + '0' + j + '月',
          });
        } else {
          monthArr.push({
            time: yearArr[i] + '年' + '0' + j + '月',
            showstr: '0' + j + '月',
          });
        }
      } else {
        monthArr.push({
          time: yearArr[i] + '年' + j + '月',
          showstr: j + '月',
        });
      }
    }
  }
  return monthArr;
}
function timeWeekData(mindex) {
  var monthStr;
  if (mindex == undefined) {
    monthStr = moment()
      .weekday(-6)
      .format('YYYY.MM');
  } else {
    var monthSel = monthArr[mindex].time;
    monthStr = monthSel.replace('年', '.').replace('月', '');
  }

  var weekArr = [];
  for (let i = 0; i < 6; i++) {
    var weekMonth = moment(monthStr.replaceAll('.','-'))
      .day(1 + i * 7); //找到周一的日期

    if (weekMonth.format('YYYY.MM') == monthStr&&weekMonth<moment()) {
      //如果是本月的
      var weekDate = moment(monthStr.replaceAll('.','-'))
        .day(1 + i * 7)
        .format('DD');
      weekArr.push(weekDate + '日');
    }
  }
  console.log('monthArr', monthArr, weekArr);
  return weekArr;
}

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

  watch: {
    yearWeekText(val) {
      if (!val) return;
      var monthStr =
        moment(val.replaceAll('.','-')).format('YYYY') + '年' + moment(val.replaceAll('.','-')).format('MM') + '月';
        //console.log('yearWeekText', moment('2023.01.11'),moment('2023-01-11'),moment('2023-02'),);

      this.showYearStr = moment(val.replaceAll('.','-')).format('YYYY') + '年';
      var dateStr = moment(val.replaceAll('.','-')).format('DD') + '日';
      let monthIndex;
      let weekIndex;
      this.monthArr.forEach((item, idx) => {
        if (monthStr == item.time) {
          monthIndex = idx;
        }
      });
      this.weekArr.forEach((item, idx) => {
        if (dateStr == item) {
          weekIndex = idx;
        }
      });
      //console.log('yearWeekText', monthStr, monthIndex, weekIndex);
      this.currentValue = [monthIndex, weekIndex];
    },
  },
  methods: {
    emitTime() {
      if (!this.canEmit) return;
      this.$emit('checkTime', this.checkTime?this.checkTime:this.yearWeekText);
    },
    bindpickstart() {
      this.canEmit = false;
    },
    bindpickend() {
      this.canEmit = true;
    },
    bindChange(e) {
      const checkArr = e.$wx.detail.value;
      //console.log('checkArr', e.$wx.detail);
      this.weekArr = timeWeekData(checkArr[0]);
      let monthStr = String(this.monthArr[checkArr[0]].time);
      let weekStr = String(this.weekArr[checkArr[1]]);
      this.showYearStr = monthStr.substring(0, 5);
      monthStr = monthStr.replace('年', '.').replace('月', '');
      weekStr = weekStr.replace('日', '');
  
      this.checkTime = monthStr + '.' + weekStr;
      //console.log('this.checkTime',this.checkTime);
    },
  },
});
</script>
