<template>
  <div class="lofty-swiper-calendar-view">
    <swiper-container ref="swiper" class="swiper-calendar-container"
        :init="false"
        :space-between="10"
        :slides-per-view="slidesPerView"
        :slides-per-group="slidesPerView"
        :initialSlide="dayIndex">
      <swiper-slide class="day-slide" v-for="(day,index) in dayList"
                    @click="changeDay(index)"
                    :class="{'day-active':dayIndex === index}">
        <div>{{day.week}}</div>
        <div class="day-num">{{day.dayNum}}</div>
        <div>{{day.month}}</div>
      </swiper-slide>
    </swiper-container>
    <div class="day-prev-button" ref="prev">
      <i class="lofty_iconfont lofty-icon-arrow_08_left"></i>
    </div>
    <div class="day-next-button" ref="next">
      <i class="lofty_iconfont lofty-icon-arrow_08_right"></i>
    </div>
  </div>
</template>

<script setup>
import store from '../store.js';
const { id, slidesPerView } = defineProps({
  id: String,
  slidesPerView: {
    type: Number,
    default: 3,
  }
});
const { dayList, dayIndex } = store[id]

const swiper = useTemplateRef('swiper')
const prev = useTemplateRef('prev')
const next = useTemplateRef('next')
function initSwiper() {
  const params = {
    navigation: {
      prevEl: prev.value,
      nextEl: next.value,
    }
  }
  Object.assign(swiper.value, params);
  swiper.value.initialize();
}

function changeDay(index) {
  dayIndex.value = index
}
onMounted(()=>{
  initSwiper()
})
</script>
<style lang="scss">
.lofty-swiper-calendar-view {
  position: relative;
  .day-prev-button {
    left: 0;
  }
  .day-next-button {
    right: 0;
  }
  .day-prev-button, .day-next-button {
    position: absolute;
    top: 40px;
    cursor: pointer;
  }
  .swiper-button-disabled {
    cursor: not-allowed;
    color: rgba(25, 25, 25, 0.2);
  }
}
.swiper-calendar-container {
  width: calc(100% - 40px);
  height: 100px;
  .day-slide {
    width: 77px;
    height: 100px;
    text-align: center;
    border: solid 1px rgba(218, 218, 218, 0.5);
    padding-top: 16px;
    font-size: 14px;
    color: rgba(80, 80, 80, 1);
    font-family: var(--lofty-font-regular);
    cursor: pointer;
    box-sizing: border-box;
    &:hover {
      background: rgba(17, 17, 17, 0.05);
      border-color: rgba(25, 25, 25, 1);
    }
    .day-num {
      font-size: 20px;
      font-family: var(--lofty-font-bold);
      color: rgba(25, 25, 25, 1);
    }
    >div {
      line-height: 1.5;
    }
  }
  .day-active {
    background: rgba(17, 17, 17, 0.05);
    border-color: rgba(25, 25, 25, 1);
  }
}
</style>