<!--
  * @Date: 2025-05-29 15:34:17
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-26 11:27:26
 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
  * @Description: 文件描述
-->
<template>
  <AppLayout :hasTitle="false">
    <van-config-provider :theme-vars="themeVars">
      <!-- 固定的日历组件 -->
      <div class="fixed-calendar">
        <CollapsibleCalendar
          ref="calendarRef"
          :title="taskDetail.title"
          :formatter="formatter"
          v-model="selectedDate"
          @select="onSelectDay"
          @click-subtitle="onClickSubtitle"
        />
      </div>

      <!-- 可滚动的内容区域 -->
      <div class="scrollable-content">
        <!-- TODO: 作业描述暂时没有字段数据 -->
        <div class="text-wrapper">
          <div class="text-header">作业描述</div>
        </div>

        <div v-if="showProgress" class="text-wrapper">
          <div class="text-header">目标进度</div>
          <div style="background-color: #FFF; margin-top: 1rem;">
            <div class="grade-percentage-main">
              <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
                <van-col span="12">
                  <span>作业目标</span>
                </van-col>
                <van-col span="12" style="text-align: right;">
                  <span style="font-weight: bold;">{{ progress1 }}%</span>
                </van-col>
              </van-row>
              <div style="overflow: hidden;">
                <van-progress :percentage="progress1" color="#4caf50" :show-pivot="false" />
              </div>
            </div>
            <!-- <div class="class-percentage-main">
              <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
                <van-col span="12">
                  <span>班级目标</span>
                </van-col>
                <van-col span="12" style="text-align: right;">
                  <span style="font-weight: bold;">{{ progress2 }}%</span>
                </van-col>
              </van-row>
              <van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" />
            </div> -->
            <div style="padding: 0.75rem 1rem;">
              <van-image round width="2.8rem" height="2.8rem" :src="item ? item : 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="contain"
                v-for="(item, index) in teamAvatars.splice(0, 8)" :key="index"
                :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #eff6ff', background: '#fff' }" />
            </div>
          </div>
        </div>

        <div v-if="!taskDetail.is_finish" class="text-wrapper">
          <div class="text-header">打卡类型</div>
          <div class="upload-wrapper">
            <div @click="goToCheckinImagePage" class="upload-boxer">
              <div><van-icon name="photo" size="2.5rem" /></div>
              <div style="font-size: 0.85rem;">图文打卡</div>
            </div>
            <div @click="goToCheckinVideoPage()" class="upload-boxer">
              <div><van-icon name="video" size="2.5rem" /></div>
              <div style="font-size: 0.85rem;">视频打卡</div>
            </div>
            <div @click="goToCheckinAudioPage()" class="upload-boxer">
              <div><van-icon name="music" size="2.5rem" /></div>
              <div style="font-size: 0.85rem;">音频打卡</div>
            </div>
          </div>
        </div>

        <div class="text-wrapper">
          <div class="text-header">打卡动态</div>
          <van-list
            v-if="checkinDataList.length"
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            class="py-3 space-y-4"
          >
            <div class="post-card" v-for="post in checkinDataList" :key="post.id">
              <div class="post-header">
                <van-row>
                  <van-col span="3">
                    <van-image round width="2.5rem" height="2.5rem" :src="post.user.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" />
                  </van-col>
                  <van-col span="18">
                    <div class="user-info">
                      <div class="username">{{ post.user.name }}</div>
                      <div class="post-time">{{ post.user.time }}</div>
                    </div>
                  </van-col>
                  <van-col span="3">
                    <div v-if="post.is_my" class="post-menu">
                      <van-icon name="edit" @click="editCheckin(post)" />
                      <van-icon name="delete-o" @click="delCheckin(post)" />
                    </div>
                  </van-col>
                </van-row>
              </div>
              <div class="post-content">
                <div class="post-text">{{ post.content }}</div>
                <div class="post-media">
                  <div v-if="post.images.length" class="post-images">
                    <van-image width="30%" fit="cover" v-for="(image, index) in post.images" :key="index" :src="image" radius="5"
                      @click="openImagePreview(index, post)" />
                  </div>
                  <van-image-preview v-if="currentPost" v-model:show="showImagePreview" :images="currentPost.images" :start-position="startPosition" :show-index="true" @change="onChange" />
                  <div v-for="(v, idx) in post.videoList" :key="idx">
                  <!-- 视频封面和播放按钮 -->
                    <div v-if="v.video && !v.isPlaying" class="relative w-full rounded-lg overflow-hidden" style="aspect-ratio: 16/9; margin-bottom: 1rem;">
                      <img :src="v.videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png'"
                        :alt="v.content" class="w-full h-full object-cover" />
                      <div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
                        @click="startPlay(v)">
                        <div
                          class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
                          <van-icon name="play-circle-o" class="text-white" size="40" />
                        </div>
                      </div>
                    </div>
                    <!-- 视频播放器 -->
                    <VideoPlayer v-if="v.video && v.isPlaying" :video-url="v.video" class="post-video rounded-lg overflow-hidden"
                      :ref="el => {
                        if(el) {
                          // 确保不重复添加
                          if (!videoPlayers?.includes(el)) {
                            videoPlayers?.push(el);
                          }
                        }
                      }"
                      @onPlay="handleVideoPlay(player, post)"
                      @onPause="handleVideoPause(post)" />
                  </div>
                  <AudioPlayer
                    v-if="post.audio.length"
                    :songs="post.audio"
                    class="post-audio"
                    :id="post.id"
                    :ref="el => {
                      if(el) {
                        // 确保不重复添加
                        if (!audioPlayers?.includes(el)) {
                          audioPlayers?.push(el);
                        }
                      }
                    }"
                    @play="(player) => handleAudioPlay(player, post)"
                  />
                </div>
              </div>
              <div class="post-footer">
                <van-icon @click="handLike(post)"name="good-job" class="like-icon" :color="post.is_liked ? 'red' : ''" />
                <span class="like-count">{{ post.likes }}</span>
              </div>
            </div>
          </van-list>
          <van-empty v-else description="暂无数据" />
          <van-back-top right="5vw" bottom="10vh" />
        </div>

        <div style="height: 5rem;"></div>
      </div> <!-- 闭合 scrollable-content -->
    </van-config-provider>

    <van-dialog v-model:show="dialog_show" title="标题" show-cancel-button></van-dialog>
  </AppLayout>
</template>

<script setup>
import { ref, onBeforeUnmount, onMounted, computed, nextTick, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showConfirmDialog, showSuccessToast, showFailToast, showLoadingToast } from 'vant';
import AppLayout from "@/components/layout/AppLayout.vue";
import FrostedGlass from "@/components/ui/FrostedGlass.vue";
import VideoPlayer from "@/components/ui/VideoPlayer.vue";
import AudioPlayer from "@/components/ui/AudioPlayer.vue";
import CollapsibleCalendar from "@/components/ui/CollapsibleCalendar.vue";
import { useTitle } from '@vueuse/core';
import dayjs from 'dayjs';

import { getTaskDetailAPI, getUploadTaskListAPI, delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";

const route = useRoute()
const router = useRouter()
useTitle(route.meta.title);

const myRefCalendar = ref(null);

// 窗口尺寸相关的响应式数据
const windowHeight = ref(window.innerHeight);
const windowWidth = ref(window.innerWidth);

// 日历高度相关的响应式数据
const calendarRef = ref(null);
const calendarHeight = ref(200); // 默认高度

/**
 * 动态获取日历组件的实际高度
 */
const updateCalendarHeight = async () => {
    await nextTick();
    if (calendarRef.value) {
        const rect = calendarRef.value.$el.getBoundingClientRect();
        calendarHeight.value = rect.height;
    }
};

/**
 * 监听窗口尺寸变化
 */
const handleResize = () => {
    windowHeight.value = window.innerHeight;
    windowWidth.value = window.innerWidth;
    // 重新计算日历高度
    updateCalendarHeight();
};

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('resize', handleResize);
  // 监听屏幕方向变化（移动端）
  window.addEventListener('orientationchange', () => {
    // 延迟更新，等待方向变化完成
    setTimeout(handleResize, 100);
  });

  // 初始化时计算日历高度
  updateCalendarHeight();
});

// 存储所有视频播放器的引用
const videoPlayers = ref([]);

// 存储所有音频播放器的引用
const audioPlayers = ref([]);

// 组件卸载前清理播放器引用和事件监听器
onBeforeUnmount(() => {
  // 停止所有视频和音频播放
  if (videoPlayers.value) {
    videoPlayers.value.forEach(player => {
      if (player && typeof player?.pause === 'function') {
        player?.pause();
      }
    });
  }

  stopAllAudio();

  // 清空引用数组
  if (videoPlayers.value) videoPlayers.value = [];
  if (audioPlayers.value) audioPlayers.value = [];

  // 清理事件监听器
  window.removeEventListener('resize', handleResize);
  window.removeEventListener('orientationchange', handleResize);
});


/**
 * 开始播放指定帖子的视频
 * @param {Object} post - 要播放视频的帖子对象
 */
const startPlay = (post) => {
  // 确保checkinDataList.value是一个数组
  if (checkinDataList.value) {
    // 先暂停所有其他视频
    checkinDataList.value.forEach(p => {
      p.videoList.forEach(v => {
        if (v.id !== post.id) {
          v.isPlaying = false;
        }
      });
    });
  }

  // 设置当前视频为播放状态
  post.isPlaying = true;
};

/**
 * 处理视频播放事件
 * @param {Object} player - 视频播放器实例
 * @param {Object} post - 包含视频的帖子对象
 */
const handleVideoPlay = (player, post) => {
  stopAllAudio();
};

/**
 * 处理视频暂停事件
 * @param {Object} post - 包含视频的帖子对象
 */
const handleVideoPause = (post) => {
  // 视频暂停时不改变isPlaying状态，保持播放器可见
  // 这样用户可以继续从暂停处播放
};

/**
 * 停止除当前播放器外的所有其他视频
 * @param {Object} currentPlayer - 当前播放的视频播放器实例
 * @param {Object} currentPost - 当前播放的帖子对象
 */
const stopOtherVideos = (currentPlayer, currentPost) => {
  // 确保videoPlayers.value是一个数组
  if (videoPlayers.value) {
    // 暂停其他视频播放器
    videoPlayers.value.forEach(player => {
      if (player !== currentPlayer && player.pause) {
        player.pause();
      }
    });
  }

  // 更新其他帖子的播放状态
  checkinDataList.value.forEach(p => {
    p.videoList.forEach(v => {
      if (v.id !== currentPost.id) {
        v.isPlaying = false;
      }
    });
  });
};

/**
 * 处理音频播放事件
 * @param {Object} player - 音频播放器实例
 * @param {Object} post - 包含音频的帖子对象
 */
const handleAudioPlay = (player, post) => {
  // 停止其他音频播放
  stopOtherAudio(player, post);
};

const stopOtherAudio = (currentPlayer, currentPost) => {
  // 确保audioPlayers.value是一个数组
  if (audioPlayers.value) {
    // 暂停其他音频播放器
    audioPlayers.value.forEach(player => {
      if (player.id!== currentPost.id && player.pause) {
        player.pause();
      }
    });
  }
  // 更新其他帖子的播放状态
  checkinDataList.value.forEach(post => {
    if (post.id!== currentPost.id) {
      post.isPlaying = false;
    }
  });
  // 停止所有视频播放
  stopAllVideos();
}

const stopAllAudio = () => {
  // 确保audioPlayers.value是一个数组
  if (!audioPlayers.value) return;
  audioPlayers.value?.forEach(player => {
    // 使用组件暴露的pause方法
    if (typeof player.pause === 'function') {
      player.pause();
    }
  });
  // 更新所有帖子的播放状态
  checkinDataList.value.forEach(post => {
    if (post.audio.length) {
      post.isPlaying = false;
    }
  });
}

/**
 * 停止所有视频播放
 */
const stopAllVideos = () => {
  // 确保videoPlayers.value是一个数组
  if (!videoPlayers.value) return;

  // 更新所有帖子的播放状态
  checkinDataList.value.forEach(p => {
    p.videoList.forEach(v => {
      v.isPlaying = false;
    });
  });
};

const themeVars = {
  calendarSelectedDayBackground: '#4caf50',
  calendarHeaderShadow: 'rgba(0, 0, 0, 0.1)',
  calendarInfoLineHeight: '0.3rem',
}

const progress1 = ref(0);
// const progress2 = ref(76);

const teamAvatars = ref([])

// 图片预览相关
const showImagePreview = ref(false);
const startPosition = ref(0);
const currentPost = ref(null);

// 打开图片预览
const openImagePreview = (index, post) => {
  currentPost.value = post;
  startPosition.value = index;
  showImagePreview.value = true;
}

// 图片切换事件处理
const onChange = (index) => {
  startPosition.value = index;
}
/**
 * 日历日期格式化函数
 * @param {Object} day - 日期对象
 * @returns {Object} 格式化后的日期对象
 */
const formatter = (day) => {
  const year = day.date.getFullYear();
  const month = day.date.getMonth() + 1;
  const date = day.date.getDate();

  let checkin_days = myCheckinDates.value;

  // 禁用未来日期
  if (dayjs(day.date).isAfter(new Date(), 'day')) {
    day.type = 'disabled';
    day.className = 'calendar-disabled';
    return day;
  }

  // 检查当前日期是否在签到日期列表中
  if (checkin_days && checkin_days.length > 0) {
    // 格式化当前日期为YYYY-MM-DD格式，与checkin_days中的格式匹配
    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;

    // 检查是否已签到
    if (checkin_days.includes(formattedDate)) {
      // 如果是当前选中的已签到日期，使用特殊样式
      if (selectedDate.value === formattedDate) {
        day.className = 'calendar-selected';
        day.type = 'selected';
        day.bottomInfo = '已签到';
      } else {
        day.className = 'calendar-checkin';
        day.type = 'selected';
        day.bottomInfo = '已签到';
      }
    }
  }

  // 选中今天的日期
  if (dayjs(day.date).isSame(new Date(), 'day')) {
    day.className = 'calendar-today';
    day.type = 'selected';
    day.bottomInfo = '今日';
  }

  return day;
}

// 添加一个响应式变量来存储当前选中的日期
const selectedDate = ref(new Date());

const onSelectDay = (day) => {
  getTaskDetail(dayjs(day).format('YYYY-MM'));

  // 更新当前选中的日期
  const currentSelectedDate = dayjs(day).format('YYYY-MM-DD');
  selectedDate.value = currentSelectedDate;

  // 修改浏览器地址把当前的date加入地址栏, 页面不刷新
  // 使用replace替代push，避免在浏览器历史记录中添加多个条目
  router.replace({
    path: route.path,
    query: {
      ...route.query,
      date: currentSelectedDate
    }
  })
  // 重置分页参数
  page.value = 0
  checkinDataList.value = []
  finished.value = false
  // 重新加载数据
  onLoad(currentSelectedDate)
}

const onClickSubtitle = (evt) => {
  console.warn('点击了日期标题');
}

const goToCheckinImagePage = () => {
  router.push({
    path: '/checkin/image',
    query: {
      id: route.query.id,
      type: 'image'
    }
  })
}
const goToCheckinVideoPage = (type) => {
  router.push({
    path: '/checkin/video',
    query: {
      id: route.query.id,
      type: 'video',
    }
  })
}

const goToCheckinAudioPage = (type) => {
  router.push({
    path: '/checkin/audio',
    query: {
      id: route.query.id,
      type: 'audio',
    }
  })
}

const handLike = async (post) => {
  if (!post.is_liked) {
    const { code, data } = await likeUploadTaskInfoAPI({ checkin_id: post.id, })
    if (code) {
      showSuccessToast('点赞成功')
      post.likes++;
      post.is_liked = true;
    }
  } else {
    const { code, data } = await dislikeUploadTaskInfoAPI({ checkin_id: post.id, })
    if (code) {
      showSuccessToast('取消点赞成功')
      post.likes--;
      post.is_liked = false;
    }
  }
}

const editCheckin = (post) => {
  if (post.file_type === 'image') {
    router.push({
      path: '/checkin/image',
      query: {
        post_id: post.id,
        type: 'image',
        status: 'edit',
      }
    })
  } else if (post.file_type === 'video') {
    router.push({
      path: '/checkin/video',
      query: {
        post_id: post.id,
        type: 'video',
        status: 'edit',
      }
    })
  } else if (post.file_type === 'audio') {
    router.push({
      path: '/checkin/audio',
      query: {
        post_id: post.id,
        type: 'audio',
        status: 'edit',
      }
    })
  }
}

const delCheckin = (post) => {
  showConfirmDialog({
    title: '温馨提示',
    message: '您是否确定要删除该动态？',
    confirmButtonColor: '#4caf50',
  })
    .then(async () => {
      // 调用接口
      const { code, data } = await delUploadTaskInfoAPI({ i: post.id });
      if (code) {
        // 删除成功后，刷新页面
        showSuccessToast('删除成功');
        // router.go(0);
        // 删除post_id相应的数据
        checkinDataList.value = checkinDataList.value.filter(item => item.id !== post.id);
      } else {
        showErrorToast('删除失败');
      }
    })
    .catch(() => {
      // on cancel
    });
}

const taskDetail = ref({});
const myCheckinDates = ref([]);
const checkinDataList = ref([]);
const showProgress = ref(true);

const getTaskDetail = async (month) => {
  const { code, data } = await getTaskDetailAPI({ i: route.query.id, month });
  if (code) {
    taskDetail.value = data;
    progress1.value = ((data.checkin_number/data.target_number)*100).toFixed(1); // 计算进度条百分比
    showProgress.value = !isNaN(progress1.value); // 如果是NaN，就不显示进度条
    teamAvatars.value = data.checkin_avatars;
    // 获取当前用户的打卡日期
    myCheckinDates.value = data.my_checkin_dates;
    // 把['2025-06-06'] 转化为 [6] 只取日期去掉0
    // myCheckinDates.value = myCheckinDates.value.map(date => {
    //   return dayjs(date).date();
    // })
  }
}

const loading = ref(false)
const finished = ref(false)
const limit = ref(3)
const page = ref(0)

const onLoad = async (date) => {
  const nextPage = page.value;
  const current_date = date || route.query.date || dayjs().format('YYYY-MM-DD');
  //
  const res = await getUploadTaskListAPI({
    limit: limit.value,
    page: nextPage,
    task_id: route.query.id,
    date: current_date
  });
  if (res.code) {
    // 整理数据结构
    checkinDataList.value = [...checkinDataList.value, ...formatData(res.data)];
    finished.value = res.data.checkin_list.length < limit.value;
    page.value = nextPage + 1;
  }
  loading.value = false;
};

onMounted(async () => {
  const current_date = route.query.date;
  if (current_date) {
    selectedDate.value = new Date(current_date);
    getTaskDetail(dayjs(current_date).format('YYYY-MM'));
    myRefCalendar.value?.reset(new Date(current_date));
    onLoad(current_date);
  } else {
    selectedDate.value = new Date();
    getTaskDetail(dayjs().format('YYYY-MM'));
    onLoad(dayjs().format('YYYY-MM-DD'));
  }
})

const formatData = (data) => {
  let formattedData = [];
  formattedData = data?.checkin_list.map((item, index) => {
      let images = [];
      let audio = [];
      let videoList = [];
      if (item.file_type === 'image') {
        images = item.files.map(file => {
          return file.value;
        });
      } else if (item.file_type === 'video') {
        videoList = item.files.map(file => {
          return {
            id: file.meta_id,
            video: file.value,
            videoCover: file.cover,
            isPlaying: false,
          }
        })
      } else if (item.file_type === 'audio') {
        audio = item.files.map(file => {
          return {
            title: file.name ? file.name : '打卡音频',
            artist: file.artist ? file.artist : '',
            url: file.value,
            cover: file.cover ? file.cover : '',
          }
        })
      }
      return {
        id: item.id,
        task_id: item.task_id,
        user: {
          name: item.username,
          avatar: item.avatar,
          time: item.created_time_desc,
        },
        content: item.note,
        images,
        videoList,
        audio,
        isPlaying: false,
        likes: item.like_count,
        is_liked: item.is_like,
        is_my: item.is_my,
        file_type: item.file_type,
      }
    })
  return formattedData;
}
</script>

<style lang="less">
// 固定日历样式
.fixed-calendar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(to bottom right, #f0fdf4, #f0fdfa, #eff6ff); // 与AppLayout保持一致的渐变背景
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 可滚动内容区域样式
.scrollable-content {
    margin-top: v-bind('calendarHeight + "px"'); // 动态计算日历高度
    padding-top: 1rem;
    height: v-bind('"calc(100vh - " + calendarHeight + "px)"'); // 动态计算剩余高度
    overflow-y: auto;
}

.van-back-top {
  background-color: #4caf50;
}

.calendar-selected {
  .van-calendar__selected-day {
    background: #4caf50 !important;
  }
}

.calendar-checkin {
  .van-calendar__selected-day {
    background: #a2d8a3 !important;
  }
}

.calendar-today {
  .van-calendar__selected-day {
    background: #FAAB0C !important;
  }
}

.text-wrapper {
  padding: 1rem;
  color: #4caf50;

  .text-header {
    font-size: 1.15rem;
  }

  .grade-percentage-main {
    padding: 0.75rem 1rem;
  }

  .class-percentage-main {
    padding: 0.75rem 1rem;
  }

  .upload-wrapper {
    display: flex;
    margin: 1rem 0;
    gap: 1rem;
    .upload-boxer {
      text-align: center;
      border: 1px solid #a2d8a3;
      border-radius: 5px;
      padding: 1rem 0;
      flex: 1;
      background-color: #fff;
    }
  }
}

.post-card {
  margin: 1rem 0;
  padding: 1rem;
  background-color: #FFF;
  border-radius: 5px;

  .post-header {
    margin-bottom: 1rem;
  }

  .user-info {
    margin-left: 0.5rem;

    .username {
      font-weight: 500;
    }

    .post-time {
      color: gray;
      font-size: 0.8rem;
    }
  }

  .post-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .post-content {
    .post-text {
      color: #666;
      margin-bottom: 1rem;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .post-media {
      .post-images {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .post-video {
        margin: 1rem 0;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .post-audio {
        margin: 1rem 0;
      }
    }
  }

  .post-footer {
    margin-top: 1rem;
    color: #666;

    .like-icon {
      margin-right: 0.25rem;
    }

    .like-count {
      font-size: 0.9rem;
    }
  }
}
</style>

<style scoped>
:deep(.van-calendar__footer) {
    display: none;
}

/* 禁用未来日期的样式 */
:deep(.calendar-disabled) {
    color: #c8c9cc !important;
    cursor: not-allowed !important;
}

:deep(.calendar-disabled .van-calendar__day-text) {
    color: #c8c9cc !important;
}
</style>