<template>
    <div class="weather-control">
        <!-- 天气控制按钮 -->
        <button class="weather-btn" @click="toggleWeatherList" @mouseenter="hoverButton = true"
            @mouseleave="hoverButton = false" :style="{
                background: hoverButton ? '#4e6ef2' : '#3a5bda',
                boxShadow: showWeatherList ? '0 0 15px rgba(58, 91, 218, 0.6)' : 'none'
            }">
            <i class="icon-weather"></i>
            {{ currentWeather.name || '选择天气' }}
        </button>

        <!-- 天气列表 -->
        <transition name="weather-fade">
            <div v-show="showWeatherList" class="weather-list">
                <div v-for="weather in weatherOptions" :key="weather.value" class="weather-item"
                    :class="{ active: currentWeather.value === weather.value }" @click="selectWeather(weather)">
                    <i :class="['weather-icon', `icon-${weather.value.toLowerCase()}`]"></i>
                    <span>{{ weather.name }}</span>
                </div>
            </div>
        </transition>

        <!-- 操作反馈 -->
        <transition name="fade">
            <div v-if="feedbackMessage" class="feedback" :class="feedbackType">
                {{ feedbackMessage }}
            </div>
        </transition>
    </div>
</template>

<script>

import  {setWeather}  from '@/utils/setWeather.ts'

export default {
    name: 'WeatherControl',
    data() {
        return {
            showWeatherList: false,
            hoverButton: false,
            currentWeather: {},
            feedbackMessage: '',
            feedbackType: 'success',
            weatherOptions: [
                { name: '晴', value: 'Sunny', icon: '☀️' },
                { name: '多云', value: 'Cloudy', icon: '⛅' },
                { name: '小雨', value: 'Rain', icon: '🌧️' },
                { name: '大雨', value: 'HeavyRain', icon: '⛈️' },
                { name: '小雪', value: 'Snow', icon: '❄️' },
                { name: '大雪', value: 'HeavySnow', icon: '❄️❄️' },
                { name: '大雾', value: 'Foggy', icon: '🌫️' },
                { name: '沙尘', value: 'Sand', icon: '🌪️' }
            ]
        }
    },
    mounted() {
        // 初始化默认天气 
        this.currentWeather = this.weatherOptions[0];
        // 添加全局点击监听 
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },
    methods: {
        toggleWeatherList() {
            this.showWeatherList = !this.showWeatherList;
        },

        selectWeather(weather) {
            this.currentWeather = weather;
            this.showWeatherList = false;

            // 直接调用封装函数（使用中文名称）
            setWeather(weather.name.replace(' 天', '')); // 去掉"天"字适配映射 

            // 显示反馈 
            this.showFeedback(` 已切换至${weather.name}`, 'success');
        },
        showFeedback(message, type) {
            this.feedbackMessage = message;
            this.feedbackType = type;
            setTimeout(() => {
                this.feedbackMessage = '';
            }, 2000);
        },

        handleClickOutside(event) {
            if (!this.$el.contains(event.target)) {
                this.showWeatherList = false;
            }
        }
    }
}
</script>

<style scoped>
.weather-control {
    position: relative;
    display: inline-block;
    font-family: 'Microsoft YaHei', sans-serif;
    z-index: 1000;
}

.weather-btn {
    padding: 10px 20px;
    background: #3a5bda;
    color: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.weather-btn:hover {
    background: #4e6ef2;
    transform: translateY(-2px);
}

.icon-weather {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path fill="white" d="M6,8L6,8c0-3.31,2.69-6,6-6s6,2.69,6,6v0"/><path fill="none" stroke="white" stroke-width="2" d="M9,19v0c0,1.66,1.34,3,3,3s3-1.34,3-3v-0"/><path fill="none" stroke="white" stroke-width="2" d="M3,14h18"/></svg>') center no-repeat;
}

.weather-list {
    position: absolute;
    top: 110%;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    width: 180px;
    overflow: hidden;
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.weather-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.weather-item:last-child {
    border-bottom: none;
}

.weather-item:hover {
    background: #f0f4ff;
    transform: translateX(5px);
}

.weather-item.active {
    background: #e6eeff;
    color: #3a5bda;
    font-weight: 500;
}

.weather-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    font-style: normal;
    text-align: center;
    font-size: 18px;
}

.feedback {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2000;
}

.feedback.success {
    background: #4caf50;
    color: white;
}

.feedback.error {
    background: #f44336;
    color: white;
}

/* 过渡动画 */
.weather-fade-enter-active,
.weather-fade-leave-active {
    transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.weather-fade-enter,
.weather-fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>