<!--
 * @Date: 2025-01-25 15:34:17
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-12-18 22:13:17
 * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue
 * @Description: 可折叠日历组件
-->
<template>
    <div class="collapsible-calendar ">
        <!-- 折叠状态显示 -->
        <div class="calendar-collapsed">
            <div class="calendar-header">
                <div class="calendar-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 3H18V1H16V3H8V1H6V3H5C3.89 3 3.01 3.9 3.01 5L3 19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V8H19V19Z" fill="#4caf50"/>
                        <path d="M7 10H9V12H7V10ZM11 10H13V12H11V10ZM15 10H17V12H15V10Z" fill="#4caf50"/>
                    </svg>
                </div>
                <!-- <div class="calendar-date-display">
                    <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
                    <div class="calendar-weekday">{{ formattedWeekday }}</div>
                </div> -->
                <div class="calendar-title-wrapper">
                    <div class="calendar-title">{{ title }}</div>
                    <!-- <div class="text-xs text-gray-500 mt-1">点击查看打卡规则</div> -->
                </div>
            </div>
            <div class="calendar-content">
                <div class="calendar-date-display" @click="expandCalendar">
                    <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
                    <div class="calendar-weekday">{{ formattedWeekday }}</div>
                    <div class="text-xs text-gray-500 mt-1">点击切换日期</div>
                </div>
                <!-- <div class="calendar-action">
                    <div class="calendar-action-text">指定日期</div>
                    <div class="calendar-arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7 10L12 15L17 10H7Z" fill="#4caf50"/>
                        </svg>
                    </div>
                </div> -->
                <div class="calendar-actions-wrapper">
                    <!-- 作业筛选 -->
                    <div class="calendar-action course-filter" @click.stop="openCoursePicker">
                        <div class="calendar-action-text">{{ selectedCourseText }}</div>
                        <div class="calendar-arrow">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 10L12 15L17 10H7Z" fill="#4caf50"/>
                            </svg>
                        </div>
                    </div>
                    <div v-if="selectedSubtask" class="text-xs text-gray-500 mt-1 cursor-pointer hover:text-green-600 transition-colors" @click.stop="openRulesPopup">点击查看打卡规则</div>
                </div>
            </div>
        </div>

        <!-- 展开状态的弹窗 -->
        <van-popup
            v-model:show="isExpanded"
            position="bottom"
            round
            :style="{ height: '55%' }"
            @close="collapseCalendar"
        >
            <div class="calendar-popup-content">
                <van-calendar
                    ref="calendarRef"
                    :poppable="false"
                    :show-confirm="false"
                    switch-mode="year-month"
                    color="#4caf50"
                    :formatter="formatter"
                    row-height="50"
                    :show-mark="false"
                    @select="onSelectDay"
                    @click-subtitle="onClickSubtitle"
                    @panel-change="onPanelChange"
                >
                </van-calendar>
            </div>
        </van-popup>

        <!-- 作业选择弹窗 -->
        <van-popup
            v-model:show="showCoursePicker"
            round
            position="bottom"
            :style="{ minHeight: '30%', maxHeight: '80%', width: '100%' }"
        >
            <van-picker
                title="作业选择"
                :columns="courseColumns"
                @confirm="onConfirmCourse"
                @cancel="showCoursePicker = false"
                :default-index="0"
            />
        </van-popup>
        <!-- 打卡规则弹窗 -->
        <van-popup
            v-model:show="showRulesPopup"
            round
            position="bottom"
            closeable
            :style="{ maxHeight: '50%' }"
        >
            <div class="p-4">
                <div class="text-lg font-bold mb-4 text-center text-gray-800">打卡规则</div>
                <div class="details text-sm text-gray-600 pl-4 border-l-4 border-green-500" v-if="formattedRules">
                    <div class="mb-2">周期：{{ formattedRules.cycle }}</div>
                    <div class="mb-2">频次：{{ formattedRules.frequency }}</div>
                    <div v-if="formattedRules.begin_date" class="mb-2">开始时间：{{ formattedRules.begin_date }}</div>
                    <div v-if="formattedRules.end_date" class="mb-2">截止时间：{{ formattedRules.end_date }}</div>
                    <div v-if="formattedRules.attachment_type" class="mb-2">附件类型：{{ formattedRules.attachment_type }}</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import dayjs from 'dayjs'

// Props定义
const props = defineProps({
    title: {
        type: String,
        default: '选择日期'
    },
    formatter: {
        type: Function,
        required: true
    },
    modelValue: {
        type: [String, Date],
        default: null
    },
    subtaskList: {
        type: Array,
        default: () => []
    }
})

// Emits定义
const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course'])

// 响应式数据
const isExpanded = ref(false)
const calendarRef = ref(null)
const currentDate = ref(props.modelValue || new Date())

// 作业筛选相关
const showCoursePicker = ref(false)
const selectedCourseText = ref('全部作业')
const selectedCourseId = ref('')
const showRulesPopup = ref(false)

const courseColumns = computed(() => {
    return [
        { text: '全部作业', value: '' },
        ...props.subtaskList.map(item => ({
            text: item.title,
            value: item.id
        }))
    ]
})

const selectedSubtask = computed(() => {
    if (!selectedCourseId.value) return null
    return props.subtaskList.find(item => item.id === selectedCourseId.value)
})

const formattedRules = computed(() => {
    if (!selectedSubtask.value) return null
    const data = selectedSubtask.value

    const cycleMap = {
        '0': '本周期',
        '30': '每月',
        '7': '每周',
        '1': '每日'
    }
    const cycleText = cycleMap[data.cycle] || data.cycle || '每日'

    let attachmentText = '文本'
    if (Array.isArray(data.attachment_type)) {
        const typeMap = {
            'text': '文本',
            'image': '图片',
            'video': '视频',
            'audio': '音频'
        }
        attachmentText = data.attachment_type.map(t => typeMap[t] || t).join('/')
    } else if (data.attachment_type) {
        attachmentText = data.attachment_type
    }

    return {
        cycle: cycleText,
        frequency: `每周期${data.frequency || 1}次`,
        begin_date: data.begin_date ? dayjs(data.begin_date).format('YYYY-MM-DD') : '',
        end_date: data.end_date ? dayjs(data.end_date).format('YYYY-MM-DD') : '',
        attachment_type: attachmentText
    }
})

const openCoursePicker = () => {
    showCoursePicker.value = true
}

const openRulesPopup = () => {
    showRulesPopup.value = true
}

const onConfirmCourse = (result) => {
    // 兼容 Vant 3/4
    const option = result.selectedOptions ? result.selectedOptions[0] : result
    selectedCourseText.value = option.text
    selectedCourseId.value = option.value
    showCoursePicker.value = false
    emit('select-course', option.value)
}

// 计算属性：格式化当前日期显示
const formattedCurrentDate = computed(() => {
    return dayjs(currentDate.value).format('YYYY年MM月DD日')
})

// 计算属性：格式化星期几显示
const formattedWeekday = computed(() => {
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    return weekdays[dayjs(currentDate.value).day()]
})

/**
 * 展开日历
 */
const expandCalendar = () => {
    isExpanded.value = true
}

/**
 * 折叠日历
 */
const collapseCalendar = () => {
    isExpanded.value = false
}

/**
 * 日期选择处理
 * @param {Date} day - 选中的日期
 */
const onSelectDay = (day) => {
    currentDate.value = day
    emit('update:modelValue', day)
    emit('select', day)

    // 选择日期后自动关闭弹窗
    setTimeout(() => {
        collapseCalendar()
    }, 200)
}

/**
 * 点击副标题处理
 * @param {Event} evt - 点击事件
 */
const onClickSubtitle = (evt) => {
    emit('click-subtitle', evt)
}

/**
 * 面板切换处理
 * @param {Object} panel - 切换后的面板信息
 */
const onPanelChange = (panel) => {
    emit('panel-change', panel)
}

// 监听modelValue变化
watch(() => props.modelValue, (newValue) => {
    if (newValue) {
        currentDate.value = newValue
    }
})

// 暴露方法给父组件
defineExpose({
    expand: expandCalendar,
    collapse: collapseCalendar,
    reset: (date) => {
        currentDate.value = date || new Date()
        if (calendarRef.value && calendarRef.value.reset) {
            calendarRef.value.reset(date || new Date())
        }
    }
})
</script>

<style lang="less" scoped>
.collapsible-calendar {
    width: 100%;
}

.calendar-collapsed {
    // background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    // border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(76, 175, 80, 0.1);
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
        border-radius: 16px 16px 0 0;
    }

    // &:hover {
    //     transform: translateY(-2px);
    //     box-shadow: 0 8px 30px rgba(76, 175, 80, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
    //     border-color: rgba(76, 175, 80, 0.2);
    // }

    &:active {
        transform: translateY(-1px);
        transition: all 0.1s ease;
    }

    .calendar-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        gap: 12px;

        .calendar-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
            border-radius: 12px;
            flex-shrink: 0;
        }

        .calendar-title-wrapper {
            flex: 1;
            min-width: 0;

            .calendar-title {
                font-size: 18px;
                font-weight: 600;
                color: #2c3e50;
                margin-bottom: 2px;
                line-height: 1.3;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
            }
        }

        .calendar-date-display {
            flex: 0.8;

            .calendar-date-main {
                font-size: 16px;
                font-weight: 600;
                color: #34495e;
                margin-bottom: 4px;
                line-height: 1.2;
            }

            .calendar-weekday {
                font-size: 13px;
                color: #4caf50;
                font-weight: 500;
            }

            .calendar-subtitle {
                font-size: 12px;
                color: #7f8c8d;
                font-weight: 400;
            }
        }
    }

    .calendar-content {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 16px;

        .calendar-date-display {
            flex: 1;

            .calendar-date-main {
                font-size: 16px;
                font-weight: 600;
                color: #34495e;
                margin-bottom: 4px;
                line-height: 1.2;
            }

            .calendar-weekday {
                font-size: 13px;
                color: #4caf50;
                font-weight: 500;
            }
        }

        .calendar-actions-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            flex-shrink: 0;
        }

        .calendar-action {
            display: flex;
            align-items: center;
            justify-content: end;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
            padding: 8px;
            border-radius: 20px;
            border: 1px solid rgba(76, 175, 80, 0.2);
            flex-shrink: 0;

            .calendar-action-text {
                font-size: 13px;
                color: #4caf50;
                font-weight: 600;
                white-space: nowrap;
                max-width: 10rem;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .calendar-arrow {
                display: flex;
                align-items: center;
                transition: transform 0.2s ease;
            }
        }
    }

    &:hover .calendar-action .calendar-arrow {
        transform: translateY(2px);
    }
}

.calendar-popup-content {
    height: 100%;
    overflow: hidden;

    :deep(.van-calendar) {
        height: 100%;

        .van-calendar__header {
            box-shadow: none;
            border-bottom: 1px solid #eee;
        }

        .van-calendar__body {
            height: calc(100% - 44px);
            overflow-y: auto;
        }
    }
}

// 自定义日历样式
:deep(.van-popup) {
    // border-radius: 0 0 12px 12px;
}
</style>