<template>
  <FlexCol :gap="20">
    <FlexRow align="center" justify="center" :gap="10">
      <IconButton icon="arrow-left-bold" @click="prevMonth" />
      <Text class="text-center" :text="`${currentYear}年${currentMonth}月`" />
      <IconButton icon="arrow-right-bold" @click="nextMonth" />
    </FlexRow>
    <SimplePageContentLoader :loader="listLoader">
      <FlexCol>
        <Box2LineImageRightShadow
          v-for="(item, i) in listLoader.content.value"
          titleColor="title-text"
          fixSize
          :key="i"
          :title="item.title"
          :desc="item.desc"
          @click="goDetail(item.id)"
        >
          <template #image>
            <FlexCol backgroundColor="background.primary" :radius="14" center :width="150" :height="150">
              <Text color="primary" :fontSize="42" bold :text="item.dateDay" />
              <Text color="primary" :fontSize="30" :text="`${item.dateMonth}月`" />
            </FlexCol>
          </template>
        </Box2LineImageRightShadow>
      </FlexCol>
    </SimplePageContentLoader>
  </FlexCol>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { GetContentListParams } from '@/api/CommonContent';
import { useSimplePageContentLoader } from '@/common/composeabe/SimplePageContentLoader';
import { navTo } from '@/components/utils/PageAction';
import type { ListItem } from './index.vue';
import CalendarContent from '@/api/fusion/CalendarContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import IconButton from '@/components/basic/IconButton.vue';
import Text from '@/components/basic/Text.vue';
import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';

const now = new Date();
const currentMonth = ref(now.getMonth() + 1);
const currentYear = ref(now.getFullYear());
 
const listLoader = useSimplePageContentLoader(async () => {
  const res = (await CalendarContent.getCalendarList(new GetContentListParams(), 1, 100));
  const list : ListItem['data'] = [];
  for (const item of res.list) {
    if (item.dateYear != currentYear.value) 
      continue;
    if (item.dateMonth != currentMonth.value)
      continue;
    if (list.length >= 6)
      break;
    list.push({
      id: item.id,
      title: item.title,
      desc: item.dateString + (item.desc || ''), 
      place: item.district + (item.regionText || ''),
      time: item.dateString ?? item.date,
      dateYear: item.dateYear,
      dateMonth: item.dateMonth,
      dateDay: item.dateDay,
      status: item.dateObj > new Date() ? 0 : 1,
    })
  }
  return list;
});

function goDetail(id: number) {
  navTo('/pages/article/details', { id })
}
function prevMonth() {
  if (currentMonth.value == 1) {
    currentMonth.value = 12;
    currentYear.value--;
  } else {
    currentMonth.value--;
  }
  listLoader.loadData(undefined, true);
}
function nextMonth() {
  if (currentMonth.value == 12) {
    currentMonth.value = 1;
    currentYear.value++;
  } else {
    currentMonth.value++;
  }
  listLoader.loadData(undefined, true);
}
onMounted(() => {
  listLoader.loadData(undefined, true);
});
</script>

<style lang="scss">
@use "sass:map";
@use "@/common/scss/define/colors.scss" as *;

$color-primary: map.get($colors, "primary");

.travel_calendar {
  .banner {
    height: 400rpx;
    margin-top: 0;

    .swiper {
      height: 400rpx;
      border-radius: 0 0 28rpx 28rpx;

      .item {
        image {
          border-radius: 0 0 28rpx 28rpx;
        }
      }
    }
  }

  .main {
    margin: 30rpx;
    height: calc(100vh - 400rpx - 120rpx);
  }
  .activity-wrap {
    display: flex;

    .activity-list {
      .head {
        background: #FFFFFF;
        border-radius: 28rpx;
        margin-bottom: 18rpx;
        color: #111111;
        padding: 12rpx 42rpx 12rpx 50rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 24rpx;

        .year-month {
          font-weight: 600;
          font-size: 30rpx;
          flex: 1;
        }

        text {
          font-weight: 600;
          display: inline-block;
          margin-left: 12rpx;
        }
      }

      .activity {
        padding: 36rpx 32rpx 38rpx 48rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 12rpx 28rpx 0rpx rgba(215, 215, 215, 0.35);
        border-radius: 24rpx;
        position: relative;
        font-size: 24rpx;
        overflow: hidden;
        margin-bottom: 46rpx;

        .desc {
          text-align: justify;
          margin-bottom: 36rpx;
        }

        .dot {
          width: 12rpx;
          height: 12rpx;
          background: #E0E0E0;
          border-radius: 50%;
          position: absolute;
          left: 20rpx;
          top: 50rpx;

          &.ing {
            background: $color-primary;
          }
        }

        .title {
          font-weight: 600;
          font-size: 30rpx;
          color: #111111;
          margin-bottom: 25rpx;
        }

        .place {
          margin-bottom: 18rpx;
          align-items: center;
          display: flex;
          font-size: 28rpx;

        }

        .iconfont {
          display: inline-block;
          margin-right: 6rpx;
          font-size: 36rpx;
        }

        .time {
          display: flex;
          align-items: center;
          font-size: 28rpx;
        }

        .status {
          position: absolute;
          bottom: 0;
          right: 0;
          background: $color-primary;
          padding: 14rpx 26rpx;
          border-radius: 31rpx 0rpx 0rpx 0rpx;
          color: #fff;

          view {
            font-size: 24rpx;
          }

          &.ing {
            background: #24515D;
          }

          &.end {
            background: #C9C9C9;
          }
        }
      }
    }

    .month-list {
      text-align: center;
      flex-shrink: 0;
      margin-right: 28rpx;

      .month {
        border-radius: 10rpx;
        margin-bottom: 10rpx;
        padding: 10rpx 20rpx;

        &.active {
          border: 1px solid $color-primary;
          background: #FFFFFF;
        }
      }
    }
  }

  scroll-view {
    height: calc(100vh - 620rpx);
  }

  .change-year {
    padding: 0 34rpx 34rpx 34rpx;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .year {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .current-year {
      font-size: 36rpx;
      color: #333333;
    }

    text.icon-arrow-left {
      display: inline-block;
      margin-right: 100rpx;
      font-size: 32rpx;
    }

    text.icon-arrow-right {
      display: inline-block;
      margin-left: 100rpx;
      font-size: 32rpx;
    }

    text.icon-calendar {
      position: absolute;
      right: 0;
      top: 8rpx;
    }
  }
}
</style>
