<template>
    <div class="birthday-calendar-container">
        <!-- 头部筛选区域 -->
        <div class="filter-section">
            <el-card class="filter-card" shadow="hover">
                <div class="filter-content">
                    <div class="filter-item">
                        <label class="filter-label">选择门店：</label>
                        <el-select v-model="selectedStore" placeholder="请选择门店" clearable filterable
                            @change="handleStoreChange" style="width: 300px">
                            <el-option label="全部门店" value=""></el-option>
                            <el-option v-for="store in storeList" :key="store.id" :label="store.fullName"
                                :value="store.id"></el-option>
                        </el-select>
                    </div>
                    <div class="filter-item">
                        <el-button type="primary" icon="el-icon-refresh" @click="loadBirthdayData">刷新</el-button>
                    </div>

                    <!-- 等级说明 -->
                    <div class="level-legend">
                        <label class="filter-label" style="margin-right: 15px;">等级说明：</label>
                        <div class="legend-item">
                            <span class="legend-dot level-0"></span>
                            <span>D</span>
                        </div>
                        <div class="legend-item">
                            <span class="legend-dot level-1"></span>
                            <span>C</span>
                        </div>
                        <div class="legend-item">
                            <span class="legend-dot level-2"></span>
                            <span>B</span>
                        </div>
                        <div class="legend-item">
                            <span class="legend-dot level-3"></span>
                            <span>A</span>
                        </div>
                        <div class="legend-item">
                            <span class="legend-dot level-4"></span>
                            <span>A+</span>
                        </div>
                        <div class="legend-item">
                            <span class="legend-dot level-5"></span>
                            <span>A++</span>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 日历区域 -->
        <div class="calendar-section">
            <el-card shadow="hover">
                <el-calendar ref="calendar" v-model="currentDate">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div class="calendar-day">
                            <div class="day-number">{{ data.day.split('-')[2] }}</div>
                            <div class="birthday-list">
                                <el-tooltip v-for="member in getBirthdaysByDate(data.day)" :key="member.id"
                                    :content="`${member.khmc} (${member.consumeLevelName})`" placement="top">
                                    <span class="birthday-member" :class="`level-${member.consumeLevel}`"
                                        @click.stop="showMemberDetail(member)">
                                        <i class="el-icon-user"></i>{{ member.khmc }}
                                    </span>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-calendar>
            </el-card>
        </div>

        <!-- 会员详情弹窗 -->
        <el-dialog :visible.sync="detailDialogVisible" width="750px" :close-on-click-modal="false"
            :append-to-body="true" :custom-class="'birthday-detail-dialog'">
            <div slot="title" class="dialog-header">
                <div class="member-avatar">
                    <i class="el-icon-user"></i>
                </div>
                <div class="member-title-info">
                    <h3 class="member-name">{{ selectedMember ? selectedMember.khmc : '' }}</h3>
                    <p class="member-subtitle">会员生日详情</p>
                </div>
                <div v-if="selectedMember" class="member-level-badge" :class="`level-${selectedMember.consumeLevel}`">
                    <i class="el-icon-star-on"></i>
                    <span>{{ selectedMember.consumeLevelName }}</span>
                </div>
            </div>

            <div v-if="selectedMember" class="member-detail-content">
                <div class="info-list">
                    <div class="info-row">
                        <label>会员姓名</label>
                        <span class="value">{{ selectedMember.khmc }}</span>
                    </div>
                    <div class="info-row">
                        <label>档案号</label>
                        <span class="value">{{ selectedMember.dah || '无' }}</span>
                    </div>
                    <div class="info-row">
                        <label>手机号</label>
                        <span class="value">{{ selectedMember.sjh || '无' }}</span>
                    </div>
                    <div class="info-row">
                        <label>性别</label>
                        <span class="value">{{ selectedMember.xb || '无' }}</span>
                    </div>
                    <div class="info-row">
                        <label>归属门店</label>
                        <span class="value">{{ selectedMember.gsmdName || '无' }}</span>
                    </div>
                    <div class="info-row">
                        <label>生日日期</label>
                        <span class="value">{{ formatBirthday(selectedMember.yanglsr) }}</span>
                    </div>
                    <div class="info-row">
                        <label>年龄</label>
                        <span class="value">{{ selectedMember.age }}岁</span>
                    </div>
                    <div class="info-row">
                        <label>剩余权益</label>
                        <span class="value amount">¥{{ selectedMember.remainingRightsAmount.toFixed(2) }}</span>
                    </div>
                    <div v-if="selectedMember.bz" class="info-row">
                        <label>备注</label>
                        <span class="value">{{ selectedMember.bz }}</span>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer-custom">
                <el-button class="close-btn" @click="detailDialogVisible = false">
                    <i class="el-icon-close"></i>
                    关闭
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'

export default {
    name: 'MemberBirthdayCalendar',
    data() {
        return {
            currentDate: new Date(),
            savedCalendarDate: null, // 保存日历的日期状态
            selectedStore: '',
            storeList: [],
            birthdayData: [],
            birthdayMap: {}, // 日期到会员的映射
            detailDialogVisible: false,
            selectedMember: null,
            loading: false
        }
    },
    watch: {
        detailDialogVisible(newVal, oldVal) {
            if (newVal === true) {
                // 弹窗打开时，保存当前日历日期
                this.savedCalendarDate = new Date(this.currentDate)
            } else if (newVal === false && oldVal === true) {
                // 弹窗关闭时，恢复日历日期
                if (this.savedCalendarDate) {
                    this.$nextTick(() => {
                        this.currentDate = new Date(this.savedCalendarDate)
                    })
                }
            }
        }
    },
    created() {
        this.loadStoreList()
        this.loadBirthdayData()
    },
    methods: {
        /**
         * 加载门店列表
         */
        async loadStoreList() {
            try {
                // 获取所有门店（使用Selector接口）
                const res = await request({
                    url: '/api/Extend/LqMdxx/Selector',
                    method: 'get'
                })
                if (res.code === 200 && res.data) {
                    this.storeList = res.data.list || []
                }
            } catch (error) {
                console.error('加载门店列表失败', error)
            }
        },

        /**
         * 加载生日数据
         */
        async loadBirthdayData() {
            this.loading = true
            try {
                const res = await request({
                    url: '/api/Extend/LqKhxx/GetUpcomingBirthdays',
                    method: 'get',
                    data: {
                        storeId: this.selectedStore
                    }
                })

                if (res.code === 200 && res.data && res.data.code === 200) {
                    this.birthdayData = res.data.data || []
                    this.buildBirthdayMap()
                    // this.$message.success(`成功加载 ${this.birthdayData.length} 位会员的生日信息`)
                } else {
                    this.$message.error(res.msg || '加载失败')
                }
            } catch (error) {
                console.error('加载生日数据失败', error)
                this.$message.error('加载生日数据失败')
            } finally {
                this.loading = false
            }
        },

        /**
         * 构建日期到会员的映射
         */
        buildBirthdayMap() {
            this.birthdayMap = {}
            this.birthdayData.forEach(member => {
                const date = new Date(member.birthdayFullDate)
                const dateStr = this.formatDate(date)
                if (!this.birthdayMap[dateStr]) {
                    this.birthdayMap[dateStr] = []
                }
                this.birthdayMap[dateStr].push(member)
            })
        },

        /**
         * 格式化日期
         */
        formatDate(date) {
            const d = new Date(date)
            const year = d.getFullYear()
            const month = String(d.getMonth() + 1).padStart(2, '0')
            const day = String(d.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },

        /**
         * 根据日期获取过生日的会员
         */
        getBirthdaysByDate(dateStr) {
            return this.birthdayMap[dateStr] || []
        },

        /**
         * 门店变化
         */
        handleStoreChange() {
            this.loadBirthdayData()
        },

        /**
         * 显示会员详情
         */
        showMemberDetail(member) {
            this.selectedMember = member
            this.detailDialogVisible = true
        },

        /**
         * 格式化生日
         */
        formatBirthday(timestamp) {
            if (!timestamp) return '无'
            const date = new Date(timestamp)
            return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
        },

        /**
         * 获取等级标签类型
         */
        getLevelTagType(level) {
            const types = {
                0: 'info',
                1: 'success',
                2: '',
                3: 'warning',
                4: 'danger',
                5: 'danger'
            }
            return types[level] || 'info'
        }
    }
}
</script>

<style lang="scss" scoped>
.birthday-calendar-container {
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f3ff 100%);
    min-height: calc(100vh - 84px);
    position: relative;

    // 背景装饰
    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    >* {
        position: relative;
        z-index: 1;
    }

    .filter-section {
        margin-bottom: 24px;

        .filter-card {
            border-radius: 16px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            &:hover {
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
                transform: translateY(-2px);
            }

            ::v-deep .el-card__body {
                padding: 24px;
            }

            .filter-content {
                display: flex;
                align-items: center;
                gap: 20px;

                .filter-item {
                    display: flex;
                    align-items: center;

                    .filter-label {
                        font-size: 14px;
                        font-weight: 600;
                        color: #1e293b;
                        margin-right: 12px;
                        white-space: nowrap;
                        letter-spacing: -0.01em;
                    }

                    .el-select {
                        ::v-deep .el-input__inner {
                            border-radius: 10px;
                            border: 1.5px solid #e2e8f0;
                            transition: all 0.3s;

                            &:hover {
                                border-color: #3b82f6;
                            }

                            &:focus {
                                border-color: #3b82f6;
                                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
                            }
                        }
                    }

                    .el-button {
                        border-radius: 10px;
                        font-weight: 500;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

                        &:hover {
                            transform: translateY(-2px);
                            box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
                        }
                    }
                }

                .level-legend {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    margin-left: auto;
                    padding: 8px 16px;
                    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
                    border-radius: 12px;
                    border: 1px solid rgba(59, 130, 246, 0.1);

                    .legend-item {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        font-size: 13px;
                        font-weight: 500;
                        color: #475569;
                        transition: all 0.2s;
                        cursor: default;

                        &:hover {
                            color: #1e293b;
                        }

                        .legend-dot {
                            width: 16px;
                            height: 16px;
                            border-radius: 4px;
                            flex-shrink: 0;
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                            transition: all 0.2s;

                            &.level-0 {
                                background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
                            }

                            &.level-1 {
                                background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
                            }

                            &.level-2 {
                                background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
                            }

                            &.level-3 {
                                background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                            }

                            &.level-4 {
                                background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
                            }

                            &.level-5 {
                                background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
                            }
                        }

                        &:hover .legend-dot {
                            transform: scale(1.1);
                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                        }
                    }
                }
            }
        }
    }

    .calendar-section {
        .el-card {
            border-radius: 16px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        ::v-deep .el-calendar {
            .el-calendar__header {
                padding: 24px 28px;
                border-bottom: 2px solid #f1f5f9;
                background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(96, 165, 250, 0.02) 100%);

                .el-calendar__title {
                    font-size: 20px;
                    font-weight: 700;
                    color: #1e293b;
                    letter-spacing: -0.02em;
                    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .el-calendar__button-group {
                    button {
                        border-radius: 10px;
                        border: 1.5px solid #e2e8f0;
                        font-weight: 500;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        padding: 8px 16px;

                        &:hover {
                            border-color: #3b82f6;
                            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
                            transform: translateY(-1px);
                            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
                        }

                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }

            .el-calendar__body {
                padding: 20px;
            }

            .el-calendar-table {
                .el-calendar-day {
                    height: 140px;
                    padding: 8px;
                    border-radius: 12px;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    position: relative;

                    &:hover {
                        background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(96, 165, 250, 0.04) 100%);
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
                    }
                }

                thead th {
                    padding: 16px 0;
                    font-weight: 700;
                    font-size: 13px;
                    color: #64748b;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
                    border-bottom: 2px solid #e2e8f0;
                }

                td {
                    border: 1px solid #f1f5f9;
                    transition: all 0.2s;
                }

                .is-today {
                    .calendar-day .day-number {
                        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                        color: #fff;
                        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
                        font-weight: 700;
                    }
                }

                .is-selected {
                    td {
                        border-color: #3b82f6;
                    }
                }
            }
        }

        .calendar-day {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 4px;

            .day-number {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 600;
                color: #475569;
                margin-bottom: 6px;
                flex-shrink: 0;
                transition: all 0.2s;
                background: rgba(248, 250, 252, 0.5);
                border: 1px solid rgba(226, 232, 240, 0.5);
            }

            .birthday-list {
                flex: 1;
                overflow-y: auto;
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                align-content: flex-start;

                /* 自定义滚动条 */
                &::-webkit-scrollbar {
                    width: 4px;
                }

                &::-webkit-scrollbar-track {
                    background: transparent;
                }

                &::-webkit-scrollbar-thumb {
                    background: rgba(203, 213, 225, 0.5);
                    border-radius: 2px;

                    &:hover {
                        background: rgba(148, 163, 184, 0.7);
                    }
                }

                .birthday-member {
                    display: inline-flex;
                    align-items: center;
                    gap: 5px;
                    cursor: pointer;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    border-radius: 6px;
                    padding: 4px 10px;
                    font-size: 13px;
                    color: #fff;
                    white-space: nowrap;
                    font-weight: 600;
                    position: relative;
                    overflow: hidden;

                    /* 添加微妙的光泽效果 */
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                        transition: left 0.5s;
                    }

                    &:hover::before {
                        left: 100%;
                    }

                    &.level-0 {
                        background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
                        box-shadow: 0 2px 8px rgba(148, 163, 184, 0.3);
                    }

                    &.level-1 {
                        background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
                        box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
                    }

                    &.level-2 {
                        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
                        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
                    }

                    &.level-3 {
                        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                        box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
                    }

                    &.level-4 {
                        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
                        box-shadow: 0 2px 8px rgba(248, 113, 113, 0.3);
                    }

                    &.level-5 {
                        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
                        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
                    }

                    &:hover {
                        transform: translateY(-2px) scale(1.02);
                        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
                        z-index: 10;
                    }

                    &:active {
                        transform: translateY(0) scale(0.98);
                    }

                    i {
                        font-size: 13px;
                        opacity: 0.9;
                    }
                }
            }
        }
    }

}
</style>

<!-- 非 scoped 样式用于弹窗（append-to-body） -->
<style lang="scss">
/* 弹窗全局样式 */
.birthday-detail-dialog {
    border-radius: 8px !important;
    overflow: hidden !important;

    .el-dialog__header {
        padding: 0 !important;
    }

    .el-dialog__headerbtn {
        top: 16px !important;
        right: 16px !important;

        .el-dialog__close {
            color: #64748b !important;

            &:hover {
                color: #ef4444 !important;
            }
        }
    }

    .el-dialog__body {
        padding: 0 !important;
    }

    .el-dialog__footer {
        padding: 16px 24px !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
    }
}

/* 弹窗头部 */
.dialog-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;

    .member-avatar {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background: #3b82f6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        i {
            font-size: 24px;
            color: #ffffff;
        }
    }

    .member-title-info {
        flex: 1;

        .member-name {
            margin: 0 0 4px 0;
            font-size: 18px;
            font-weight: 700;
            color: #1e293b;
        }

        .member-subtitle {
            margin: 0;
            font-size: 13px;
            color: #64748b;
            font-weight: 500;
        }
    }

    .member-level-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 13px;
        color: #ffffff;

        i {
            font-size: 14px;
        }

        &.level-0 {
            background: #94a3b8;
        }

        &.level-1 {
            background: #22c55e;
        }

        &.level-2 {
            background: #3b82f6;
        }

        &.level-3 {
            background: #f59e0b;
        }

        &.level-4 {
            background: #ef4444;
        }

        &.level-5 {
            background: #ec4899;
        }
    }
}

/* 会员详情内容 */
.member-detail-content {
    padding: 20px 32px;
    background: #ffffff;

    .info-list {
        .info-row {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f1f5f9;

            &:last-child {
                border-bottom: none;
            }

            label {
                width: 100px;
                font-size: 14px;
                font-weight: 600;
                color: #64748b;
                flex-shrink: 0;
            }

            .value {
                flex: 1;
                font-size: 14px;
                color: #1e293b;
                font-weight: 500;

                &.amount {
                    color: #ef4444;
                    font-weight: 700;
                    font-size: 16px;
                }
            }
        }
    }
}

/* 自定义底部 */
.dialog-footer-custom {
    display: flex;
    justify-content: center;

    .close-btn {
        border-radius: 4px;
        padding: 8px 24px;
        font-size: 14px;

        &:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }
    }
}
</style>
