<template>
    <u-popup :show="visible" mode="bottom" :round="24" :closeable="false" :custom-style="{ height: '80vh' }"
        @close="handleClose">
        <view class="date-note-popup">
            <!-- 顶部导航栏 -->
            <view class="popup-header">
                <view class="close-btn" @click="handleClose">
                    <text class="close-icon">×</text>
                </view>
                <text class="popup-title">新增日程备注</text>
                <button class="save-btn" @click="handleSave">保存</button>
            </view>

            <!-- 颜色选择区 -->
            <view class="color-section">
                <text class="section-title">选择显示颜色</text>
                <view class="color-list">
                    <view v-for="(color, index) in colorList" :key="index" class="color-item"
                        :class="{ active: selectedColorIndex === index }" :style="{ backgroundColor: color }"
                        @click="selectedColorIndex = index" />
                </view>
            </view>

            <!-- 输入框区域 -->
            <view class="input-section">
                <text class="section-title">日程标题</text>
                <textarea v-model="noteContent" class="note-textarea" placeholder="输入当天的日程情况，如休息日、生病受伤了、经期等"
                    placeholder-class="placeholder" />
            </view>

            <!-- 历史备注区域 -->
            <view class="history-section">
                <view class="history-header">
                    <text class="section-title history-title">历史备注</text>
                    <text class="history-tip">点击填充到文本内容</text>
                </view>
                <view class="history-tags">
                    <view v-for="(tag, index) in historyTags" :key="index" class="tag-item"
                        :style="{ backgroundColor: tag.color }" @click="fillNote(tag.text)">
                        <text class="tag-text">+{{ tag.text }}</text>
                    </view>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:visible', 'save', 'close']);

// 响应式数据
const noteContent = ref('');
const selectedColorIndex = ref(0);

// 颜色列表（和截图一致）
const colorList = ref([
    '#ff9944',
    '#ff7766',
    '#ddaaff',
    '#aabbff',
    '#cccccc'
]);

// 历史备注数据（模拟截图效果）
const historyTags = ref([
    { text: '休息日', color: '#ff9944' },
    { text: '累了', color: '#ff9944' },
]);

// 事件处理
const handleClose = () => {
    emit('update:visible', false);
    emit('close');
};

const handleSave = () => {
    const data = {
        content: noteContent.value,
        color: colorList.value[selectedColorIndex.value]
    };
    emit('save', data);
    handleClose();
};

const fillNote = (text) => {
    noteContent.value = text;
};
</script>

<style scoped lang="scss">
.date-note-popup {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 24rpx 32rpx;
}

/* 顶部导航 */
.popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .close-btn {
        width: 48rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .close-icon {
            font-size: 40rpx;
            color: #333;
            line-height: 1;
        }
    }

    .popup-title {
        font-size: 34rpx;
        font-weight: 600;
        color: #111;
        text-align: center;
        display: block;
        flex: 1;
    }

    .save-btn {
        margin-right: 0;
        background: #ffd100;
        color: #000;
        border: none;
        border-radius: 20rpx;
        padding: 5rpx 25rpx;
        font-size: 28rpx;
        font-weight: 500;
    }
}

/* 通用标题 */
.section-title {
    font-size: 30rpx;
    color: #111;
    font-weight: 500;
    display: block;
    margin-bottom: 24rpx;
}

/* 颜色选择区 */
.color-section {
    margin-bottom: 40rpx;

    .color-list {
        display: flex;
        gap: 40rpx;

        .color-item {
            width: 80rpx;
            height: 80rpx;
            border-radius: 12rpx;
            border: 4rpx solid transparent;

            &.active {
                border-color: #333;
            }
        }
    }
}

/* 输入框区域 */
.input-section {
    margin-bottom: 40rpx;

    .note-textarea {
        width: 100%;
        height: 200rpx;
        background: #f7f8fa;
        border-radius: 12rpx;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
        box-sizing: border-box;

        .placeholder {
            color: #999;
        }
    }
}

.history-title {
    margin-bottom: 0 !important;
    /* 覆盖原来的 margin-bottom */
}

/* 历史备注区域 */
.history-section {
    .history-header {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 24rpx;
        margin-top: 0;

        .history-tip {
            font-size: 24rpx;
            color: #999;
        }
    }

    .history-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .tag-item {
            border-radius: 8rpx;
            padding: 16rpx 24rpx;
            display: flex;
            align-items: center;

            .tag-text {
                font-size: 26rpx;
                color: #fff;
            }
        }
    }
}
</style>