<template>
  <view class="travel_calendar bg-base">
    <view class="position-absolute t-0 l-0 r-0" :style="{ zIndex: 1000 }">
      <StatusBarSpace backgroundColor="transparent" />
      <NavBar 
        leftButton="back"
        :iconProps="{ color: 'white' }" 
        :innerStyle="{ }" 
        textColor="white"
        title="节庆日历" 
        backgroundColor="transparent" 
      />
    </view>
    <view class="banner">
      <swiper class="swiper right-indicator" circular :indicator-dots="true" :autoplay="true" :interval="2000"
        :duration="1000">
        <swiper-item 
          v-for="item in bannerData"
          :key="item.id"
          @click="goDetail(item.id)"
        >
          <view class="item">
            <image class="w-100" :src="item.image" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="main radius-l p-3 bg-light">
      <view class="change-year">
        <view class="year">
          <text class="iconfont icon-arrow-left" @click="changeYear(currentYear - 1)"></text>
          <picker mode="date" :value="currentYear" @change="(e: any) => changeYear(e.detail.value)" fields="year">
            <view class="current-year">公历{{ currentYear }}年</view>
          </picker>
          <text class="iconfont icon-arrow-right" @click="changeYear(currentYear + 1)"></text>
        </view>
        <text class="iconfont icon-calendar"></text>
      </view>
      <view class="activity-wrap mt-3">
        <view class="month-list">
          <view 
            v-for="month in monthList"
            :key="month.value"
            class="month" 
            @click="goMonth(month.value)"
          >
          <!-- :class="{ active: month.value === currentMonth }"  -->
            {{ month.label }}
          </view>
        </view>
        <SimplePageContentLoader 
          :loader="listLoader"
          :showEmpty="!listLoader.content.value?.length"
          class="w-100"
        >
          <view 
            v-if="listLoader.content.value && listLoader.content.value.length" 
            class="activity-list"
          >
            <scroll-view scroll-y :scroll-into-view="'month' + currentMonth" scroll-with-animation>
              <template v-for="(item, key) in listLoader.content.value" :key="key">
                <view v-if="item" class="item">
                  <view class="head" :id="'month' + item.month">
                    <view class="year-month">{{ item.year }}年{{ item.month }}月</view>
                    <text>{{ item.lunar }}</text>
                    <view>本月活动 <text>{{ item.data.length }}</text></view>
                  </view>
                  <view v-if="item.data.length == 0" class="activity">
                    <view class="title">
                      <text class="iconfont icon-activity"></text>
                      本月暂无活动
                    </view>
                  </view>
                  <view 
                    class="activity" 
                    v-for="act in item.data"
                    :key="act.id"
                    @click="goDetail(act.id)"
                  >
                    <view class="title">{{ act.title }}</view>
                    <view class="dot" :class="{ ing: act.status === 0 }"></view>
                    <view class="desc ellipsis-2">{{ act.desc }}</view>
                    <view class="place"><text class="iconfont icon-place"></text>{{ act.place }}</view>
                    <view class="time"><text class="iconfont icon-time"></text>{{ act.time }}</view>
                  </view> 
                </view>
              </template>
            </scroll-view>
          </view>
        </SimplePageContentLoader>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { GetContentListParams } from '@/api/CommonContent';
import CalendarContent from '@/api/fusion/CalendarContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { useSimplePageContentLoader } from '@/common/composeabe/SimplePageContentLoader';
import { navTo } from '@/components/utils/PageAction';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { CalendarUtils, DateUtils } from '@imengyu/imengyu-utils';
import NavBar from '@/components/nav/NavBar.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';

export interface ListItem {
  id: number;
  month: number,
  year: number,
  lunar: string,
  data: {
    id: number,
    title: string,
    desc: string,
    place: string,
    time: string,
    dateYear: number,
    dateMonth: number,
    dateDay: number,
    status: number,
  }[]
}

const activeTab = ref(0);
const bannerData = ref<{ id: number, image: string }[]>([])

const currentMonth = ref(1);
const currentYear = ref(new Date().getFullYear());
const monthList = [
  {
    label: '1月',
    value: 1
  }, {
    label: '2月',
    value: 2
  }, {
    label: '3月',
    value: 3
  }, {
    label: '4月',
    value: 4
  }, {
    label: '5月',
    value: 5
  }, {
    label: '6月',
    value: 6
  }, {
    label: '7月',
    value: 7
  }, {
    label: '8月',
    value: 8
  }, {
    label: '9月',
    value: 9
  }, {
    label: '10月',
    value: 10
  }, {
    label: '11月',
    value: 11
  }, {
    label: '12月',
    value: 12
  }
];

 
const listLoader = useSimplePageContentLoader<ListItem[]>(async () => {
  const res = (await CalendarContent.getCalendarList(new GetContentListParams(), 1, 100));
  const res2 : ListItem[] = [];
  for (let i = 0; i < 12; i++) {
    const month = i + 1;
    const startDay = CalendarUtils.solar2lunar(currentYear.value, month, 1);
    const endDay = CalendarUtils.solar2lunar(currentYear.value, month, DateUtils.getMonthDays(currentYear.value, month - 1));
    res2[i] = {
      id: i,
      month: i + 1,
      year: currentYear.value,
      lunar:  `${startDay.IMonthCn}${startDay.IDayCn} - ${endDay.IMonthCn}${endDay.IDayCn}`,
      data: []
    }
  }
  for (const item of res.list) {
    if (item.dateYear != currentYear.value) 
      continue;
    const it = res2[item.dateMonth - 1];
    it.data.push({
      id: item.id,
      title: item.title,
      desc: 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,
    })
    if (bannerData.value.length < 3)
      bannerData.value.push({
        id: item.id,
        image: item.thumbnail || item.image,  
      })
  }
  return res2.filter(p => p);
});

function tabClick(e: { index: number }) {
  activeTab.value = e.index;
}
function goMonth(month: number) {
  currentMonth.value = month;
}
async function changeYear(year: number) {
  currentYear.value = year;
  listLoader.loadData(undefined, true);
}
function goDetail(id: number) {
  navTo('/pages/article/details', { id })
}

onLoad(() => {
  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>
