<template>
  <view class="month-calendar">
    <view class="header">
      <view class="arrow" @click="prevYear">‹‹</view>
      <view class="year">
        <picker @change="changeYear" :value="yearIndex" :range="yearList">
					<view class="uni-input">{{yearList[yearIndex]}}</view>
				</picker>
      </view>
      <view class="arrow" @click="nextYear">››</view>
    </view>

    <view class="month-grid">
      <view
        v-for="month in months"
        :key="month.number"
        class="month-item"
        :class="{ active: isActive(month.number) }"
        @click="selectMonth(month.number)"
      >
        <view class="month-number">{{ month.number }}</view>
        <view class="month-english">{{ month.english }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
    year: {//默认当前年
      default: new Date().getFullYear()
    },
    month:{//默认1月
      default:1
    }
})

// 年份列表
const yearIndex = ref(100);
const yearList = computed(() => {
  let date = new Date();
  let y = date.getFullYear();
  let arr = [];
  // 往前100年 往后61年
  let j = 0;
  for (let i = 0; i < 100; i++) {
    let a = (y-100)+i;
    arr.push(a);
    j++;
  }
  
  for (let i = 0; i < 62; i++) {
    let a = y+i
    arr.push(a);
  }
  yearIndex.value = j;
  // console.log(arr,yearIndex.value)
  return arr;
});


const currentYear = ref(props.year);
const selectedMonth = ref(props.month);

// 月份英文处理
const months = ref([
  { number: 1, english: "Jan" },
  { number: 2, english: "Feb" },
  { number: 3, english: "Mar" },
  { number: 4, english: "Apr" },
  { number: 5, english: "May" },
  { number: 6, english: "Jun" },
  { number: 7, english: "Jul" },
  { number: 8, english: "Aug" },
  { number: 9, english: "Sep" },
  { number: 10, english: "Oct" },
  { number: 11, english: "Nov" },
  { number: 12, english: "Dec" },
]);

const isActive = (monthNumber) => {
  return selectedMonth.value === monthNumber;
}

// 调用父组件方法
const emit = defineEmits(["change"]);

// 月份切换
const selectMonth = (monthNumber) => {
  selectedMonth.value = monthNumber;
  // console.log(`选择: ${currentYear.value}年${monthNumber}月`);
  let m = monthNumber<10?'0'+monthNumber:monthNumber
  // { year: currentYear.value, month: m }
  // 触发事件
  emit('change',  {year:currentYear.value,month:monthNumber,ymStr:currentYear.value+'-'+m});
}

// 上一年
const prevYear = () => {
  currentYear.value--;
  yearIndex.value--;
  getCurrentMonth();
}

// 下一年
const nextYear = () => {
  currentYear.value++;
  yearIndex.value++;
  getCurrentMonth();
}

// 年份切换
const changeYear=(e)=>{
  // console.log("年份切换=>",e)
  yearIndex.value = e.detail.value;
  currentYear.value = yearList.value[yearIndex.value];
  getCurrentMonth();
}

// 获取当前月份
const getCurrentMonth = ()=>{
  let date = new Date();
  let year = date.getFullYear();
  selectedMonth.value = 1;
  if(year == currentYear.value){
    selectedMonth.value = date.getMonth()+1;
  }
}

</script>

<style scoped>
.month-calendar {
  padding:0 20rpx;
  background: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0rpx 0 16rpx;
  /* #ifdef APP-PLUS */
  padding:20rpx 0;
  /* #endif */
  margin-bottom: 30rpx;
  border-bottom:1px solid #E7E7E7;
}

.year {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.arrow {
  font-size: 60rpx;
  color: #CACACA;
  padding: 0;
  cursor: pointer;
}

.arrow:active {
  color: #4A95FF;
}

.month-grid {
  /* display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx; */
  display: flex;
  flex-flow:row wrap;
}

.month-item {
  border-radius: 16rpx;
  /* transition: all 0.3s ease; */
  border: 1px solid #05A3F4;
  background-color:#EAF8FF;
  padding:0rpx 0 0;
  /* #ifdef APP-PLUS */
  padding:20rpx 0 0;
  /* #endif */
  width: calc(100% / 4 - 12px); /* 减去一些间隙以避免溢出 */
  margin: 9rpx; /* 可选，用于添加间距 */
}

.month-item.active {
  background: #FFF4EA;
  border-color: #FF9638;
  /* transform: scale(1.05); */
}

.month-item:active {
  /* transform: scale(0.95); */
}

.month-number{
  color:#05A3F4;
  font-size:60rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  text-align: center;
  position: relative;
}
.month-number::after{
  position: absolute;
  content: "月";
  right:5rpx;
  bottom:15rpx;
  color:#05A3F4;
  font-size:22rpx;
  font-weight: normal;
}

.month-english{
  font-size: 26rpx;
  color: #fff;
  font-weight: bold;
  background-color: #05A3F4;
  border-radius: 0 0 14rpx 14rpx;
  text-align: center;
}

.month-item.active .month-number,
.month-item.active .month-number::after{
  color:#FF9638;
}

.month-item.active .month-english{
  background-color: #FF9638;
}
</style>