<template>
    <view class="ai-analysis-container">
        <!-- AI分析按钮 -->
        <view class="ai-analysis-btn" @click="toggleAnalysis" :class="{ active: showAnalysis }">
            <text class="ai-btn-text">AI分析</text>
            <view class="ai-btn-icon" v-if="!showAnalysis">
                <text class="icon-text">🤖</text>
            </view>
            <view class="ai-btn-close" v-else>
                <text class="close-text">✕</text>
            </view>
        </view>

        <!-- AI分析悬浮框 -->
        <view class="ai-analysis-modal" v-if="showAnalysis" @click.stop>
            <!-- 悬浮框头部 -->
            <view class="modal-header">
                <view class="modal-title">
                    <text class="title-text">🤖 AI智能分析</text>
                </view>
                <view class="close-btn" @click="closeAnalysis">
                    <text class="close-icon">✕</text>
                </view>
            </view>

            <!-- 悬浮框内容 -->
            <view class="modal-content">
                <!-- 加载动画 -->
                <view class="loading-container" v-if="isLoading">
                    <view class="loading-dots">
                        <view class="dot" v-for="n in 3" :key="n"></view>
                    </view>
                    <text class="loading-text">AI分析中</text>
                    <view class="loading-progress">
                        <view class="progress-bar" :style="{ width: loadingProgress + '%' }"></view>
                    </view>
                </view>

                <!-- 分析结果 - 打字机效果 -->
                <view class="analysis-result" v-if="!isLoading && analysisResult">
                    <view class="result-text-container" ref="resultContainer">
                        <text class="result-text">{{ displayText }}</text>
                    </view>

                    <!-- 滚动指示器 -->
                    <view class="scroll-indicator" v-if="showScrollIndicator">
                        <text class="scroll-text">↓ 继续滚动查看更多</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view class="modal-mask" v-if="showAnalysis" @click="closeAnalysis"></view>
    </view>
</template>

<script>
export default {
    name: 'AIAnalysis',
    props: {
        // 图表容器信息
        chartInfo: {
            type: Object,
            default: () => ({
                width: 0,
                height: 0
            })
        },
        questionText: {
            type: String,
            default: ""
        },
        questionData: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            showAnalysis: false,
            isLoading: false,
            analysisResult: '',
            displayText: '',
            loadingProgress: 0,
            showScrollIndicator: false,
            typingTimer: null,
            loadingTimer: null,
            scrollCheckTimer: null,
            originalPageStyle: '' // 保存原始页面样式
        }
    },
    beforeDestroy() {
        this.clearTimers()
        // 确保页面滚动功能恢复
        if (this.showAnalysis) {
            this.enablePageScroll()
        }
    },
    methods: {
        // 切换分析显示
        toggleAnalysis() {
            if (this.showAnalysis) {
                this.closeAnalysis()
            } else {
                this.openAnalysis()
            }
        },

        // 打开分析
        openAnalysis() {
            this.showAnalysis = true
            this.disablePageScroll()
            this.startAnalysis()
        },

        // 关闭分析
        closeAnalysis() {
            this.showAnalysis = false
            this.enablePageScroll()
            this.clearTimers()
            // 重置状态
            setTimeout(() => {
                this.isLoading = false
                this.analysisResult = ''
                this.displayText = ''
                this.loadingProgress = 0
                this.showScrollIndicator = false
            }, 300)
        },

        // 禁用页面滚动
        disablePageScroll() {
            // 通知父组件禁用滚动
            this.$emit('disableScroll')
        },

        // 启用页面滚动
        enablePageScroll() {
            // 通知父组件启用滚动
            this.$emit('enableScroll')
        },

        // 开始分析
        async startAnalysis() {
            this.isLoading = true
            this.loadingProgress = 0

            // 模拟加载进度
            this.simulateLoadingProgress()

            try {
                // 固定3秒加载时间
                await new Promise(resolve => setTimeout(resolve, 3000))

                // 直接使用模拟数据
                const result = this.generateMockAnalysis()

                // 分析完成，开始打字机效果
                this.analysisComplete(result)

            } catch (error) {
                console.error('AI分析失败:', error)
                this.analysisComplete('抱歉，AI分析过程中出现了问题，请稍后重试。')
            }
        },

        // 模拟加载进度
        simulateLoadingProgress() {
            this.loadingTimer = setInterval(() => {
                if (this.loadingProgress < 90) {
                    this.loadingProgress += Math.random() * 15
                } else {
                    clearInterval(this.loadingTimer)
                }
            }, 200)
        },

        // 生成模拟分析结果
        async  generateMockAnalysis() {
            const req = {
                model: "qwen-plus",
                messages: [
                    {
                        role: "user",
                        content: `#云南大屏直接进行路由角色说明解析#<Br/>
          #路由角色解析#<Br/>
          云南高速·智慧大屏数据洞察官 Prompt · V3（决策层友好版）
你是“云南高速服务区智慧大屏”的数据洞察官，服务对象是集团高层管理者。你的职责是通过实时和历史结构化数据，提供有深度、节奏感、判断力、正负并重的运营播报，支持科学决策、运营预判与策略部署。
【一、输出结构要求】（保留七段结构，优化语气和排序）
每次播报需包含以下内容，建议1200字以内，语言自然流畅、避免堆砌数字：
    今日亮点速览
        优先输出关键经营表现中的积极变化、业务高点、优秀片区、数据新突破，树立正向感知。
    波动与关注项
        概括今日出现的波动或风险行为，简明归因，不夸张渲染，强调“可控+建议”。
    月度趋势观察
        判断当前月是否延续预期节奏，有无提前透支或滞后，指出需持续关注的变化项。
    历史节奏对标
        结合去年同期与上一季度，判断当前处于哪种阶段（爬坡、收缩、冲刺等），支持节奏判断。
    策略建议精要
        给出少而精、能落地的策略建议，适度点出片区/业务优先级，避免泛泛空话。
    关键节点提醒
        提前预警即将到来的节假日、季度切换或特殊事件，并建议提前部署内容。
    运营协同建议
        强调系统保障、权限设置、数据补录、行为闭环等底层机制，保障整体运行质量。
【二、语气与风格要求】
    基调务实积极：正面 + 中性 + 预警并重，杜绝全是问题或消极分析；
    语言自然有温度：像是一个懂业务、有判断力的“懂行人”在向高层“说话”；
    判断优于数据堆砌：数据仅作为支撑，应以“趋势/节奏/建议”为主角；
    避免模板腔：不使用模板化句式如“建议加强…”，鼓励定制化表达；
    视角结构化：从“数据→发现→判断→建议”建立因果链条；
【三、字段兼容（自动适配缺失）】
你可以处理的数据字段包括但不限于：
    实时类：今日车流、营收、加水、油品、充电、门店收入等；
    趋势类：月度营收、季度效益、区域表现；
    异常类：特情行为、抽查异常、交易波动；
    客群类：年龄性别结构、消费偏好、消费时段、品牌偏好；
    结构类：片区营收占比、业态结构占比、节假日结构等；
    缺失字段时请智能跳过，整体不出错。
【四、命令支持】
用户提问	你要执行的任务
“请生成今日运营播报”	启动七段式“数据洞察型运营简报”输出
“请简明汇报今日情况”	输出带正向亮点的简要摘要
“聚焦滇中片区”	输出滇中片区的趋势、亮点、风险、建议
“暑期节奏提醒”	输出未来高峰节点 + 重点片区策略部署
【启动规则】
一旦接收到结构化数据，立即进入“数据洞察官”角色，生成自然语言播报内容。字段缺失不报错，内容必须整体通顺、具判断力、可执行。<Br/>
          #用户提问#<Br/>
          ${this.questionText}
            <Br/>
          #接口数据说明#<Br/>
          ${this.questionData}`
                    }
                ],
                max_tokens: 4096,
                stop: [null],
                temperatur: 0.4,
                top_p: 0.4,
                top_k: 40,
                frequency_penalty: 0,
                n: 1,
                response_format: { type: "text" }
            }
            const options = {
                method: "POST",
                headers: {
                    Authorization: "Bearer sk-1aa2c1c672034c6d826ce62d3aebcb47",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(req),
                // signal: controller.signal, // 关键：绑定控制器信号
            };
            const response = await fetch(
                "https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions",
                options
            );
            // 创建流式读取器
            const reader = response.body.getReader();
            console.log('readerreaderreaderreader', reader);



            return `🚗 断面流量智能分析报告

📊 数据概览
断面流量图表分析，当前数据展示了近12个月的交通流量变化趋势。图表采用了柱状图对比形式，直观展现了不同时期的流量差异。

🔍 关键发现
• 流量分布相对均匀，月度波动幅度在合理范围内
• 从图表可以看出，上半年流量略高于下半年
• 年度整体流量呈现稳定态势，无异常峰值
• 同比数据分析显示，交通需求保持稳定增长

📈 趋势分析
• 稳定性：流量数据表现出良好的稳定性，说明服务区运营状况良好
• 季节性：呈现一定的季节性特征，符合交通流量的普遍规律
• 增长性：整体趋势稳中有升，反映了区域经济的发展活力

💡 运营建议
1. 维持当前的服务标准和运营策略
2. 在流量高峰期适当增加服务人员配置
3. 持续优化服务区的交通组织和管理
4. 建议在低峰期进行设施维护和升级工作

⚠️ 风险提示
• 需要关注节假日等特殊时期的流量激增
• 建议建立完善的应急预案和疏导机制
• 持续监测流量变化，及时发现异常情况

📅 数据质量评估
• 数据完整性：良好，覆盖完整的统计周期
• 数据准确性：高，符合实际的交通流量特征
• 数据时效性：实时更新，满足运营决策需求

这份分析基于当前断面流量图表数据生成，为服务区的运营管理提供了数据支撑和决策参考。通过智能化的数据分析，能够帮助管理人员更好地理解流量变化规律，制定科学的运营策略。`
        },

        // 分析完成
        analysisComplete(result) {
            this.isLoading = false
            this.analysisResult = result
            this.loadingProgress = 100

            setTimeout(() => {
                this.startTypingEffect()
            }, 500)
        },

        // 开始打字机效果
        startTypingEffect() {
            this.displayText = ''
            let currentIndex = 0

            this.typingTimer = setInterval(() => {
                if (currentIndex < this.analysisResult.length) {
                    this.displayText += this.analysisResult[currentIndex]
                    currentIndex++

                    // 检查是否需要滚动
                    this.checkScrollNeed()
                } else {
                    clearInterval(this.typingTimer)
                    this.typingTimer = null
                }
            }, 30) // 每30ms显示一个字符
        },

        // 检查是否需要滚动
        checkScrollNeed() {
            // 延迟检查，确保DOM更新完成
            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this)
                query.select('.result-text-container').boundingClientRect()
                query.select('.result-text').boundingClientRect()
                query.exec((res) => {
                    if (res[0] && res[1]) {
                        this.showScrollIndicator = res[1].height > res[0].height
                    }
                })
            })
        },

        // 获取状态文本
        getStatusText() {
            if (this.isLoading) return '分析中...'
            if (this.analysisResult) return '分析完成'
            return '准备分析'
        },

        // 清除定时器
        clearTimers() {
            if (this.typingTimer) {
                clearInterval(this.typingTimer)
                this.typingTimer = null
            }
            if (this.loadingTimer) {
                clearInterval(this.loadingTimer)
                this.loadingTimer = null
            }
            if (this.scrollCheckTimer) {
                clearTimeout(this.scrollCheckTimer)
                this.scrollCheckTimer = null
            }
        }
    }
}
</script>

<style scoped lang="less">
@primary-color: #667eea;
@secondary-color: #764ba2;
@success-color: #52c41a;
@text-primary: #333;
@text-secondary: #666;
@bg-white: #ffffff;
@border-radius: 12rpx;
@shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

.ai-analysis-container {
    position: relative;
    display: inline-block;
}

/* AI分析按钮 */
.ai-analysis-btn {
    display: flex;
    align-items: center;
    padding: 12rpx 20rpx;
    background: linear-gradient(135deg, @primary-color, @secondary-color);
    border-radius: 20rpx;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    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.6s;
    }

    &:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);

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

    &.active {
        background: linear-gradient(135deg, @success-color, #389e0d);
        box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
    }

    .ai-btn-text {
        font-size: 24rpx;
        color: white;
        font-weight: 500;
        margin-right: 8rpx;
    }

    .ai-btn-icon,
    .ai-btn-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);

        .icon-text,
        .close-text {
            font-size: 20rpx;
            line-height: 1;
        }
    }
}

/* 悬浮框 */
.ai-analysis-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640rpx;
    max-width: 90vw;
    max-height: 80vh;
    background: @bg-white;
    border-radius: 24rpx;
    box-shadow: @shadow;
    z-index: 1001;
    /* 高于右侧导航栏的1000 */
    overflow: hidden;
    animation: modalFadeIn 0.3s ease-out;

    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32rpx;
        background: linear-gradient(135deg, @primary-color, @secondary-color);
        color: white;

        .modal-title {
            .title-text {
                font-size: 32rpx;
                font-weight: 600;
            }
        }

        .close-btn {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.9);
                background: rgba(255, 255, 255, 0.3);
            }

            .close-icon {
                font-size: 28rpx;
                color: white;
            }
        }
    }

    .modal-content {
        padding: 32rpx;
        max-height: 60vh;
        overflow-y: auto;

        /* 隐藏滚动条但保持滚动功能 */
        &::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
    }
}

/* 图表信息 */
.chart-info {
    margin-bottom: 32rpx;
    padding: 24rpx;
    background: #f8f9fb;
    border-radius: 16rpx;
    border-left: 4rpx solid @primary-color;

    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .info-label {
            font-size: 26rpx;
            color: @text-secondary;
            margin-right: 16rpx;
            min-width: 120rpx;
        }

        .info-value {
            font-size: 26rpx;
            color: @text-primary;
            font-weight: 500;

            &.loading {
                color: @primary-color;
                animation: pulse 1.5s infinite;
            }

            &.completed {
                color: @success-color;
            }
        }
    }
}

/* 加载动画 */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48rpx 0;

    .loading-dots {
        display: flex;
        gap: 8rpx;
        margin-bottom: 24rpx;

        .dot {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: @primary-color;
            animation: dotBounce 1.4s infinite ease-in-out both;

            &:nth-child(1) {
                animation-delay: -0.32s;
            }

            &:nth-child(2) {
                animation-delay: -0.16s;
            }

            &:nth-child(3) {
                animation-delay: 0;
            }
        }
    }

    .loading-text {
        font-size: 28rpx;
        color: @primary-color;
        font-weight: 500;
        margin-bottom: 32rpx;
    }

    .loading-progress {
        width: 200rpx;
        height: 6rpx;
        background: #f0f0f0;
        border-radius: 3rpx;
        overflow: hidden;

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, @primary-color, @secondary-color);
            border-radius: 3rpx;
            transition: width 0.3s ease;
        }
    }
}

/* 分析结果 */
.analysis-result {
    position: relative;

    .result-text-container {
        max-height: 400rpx;
        overflow-y: auto;
        padding: 24rpx;
        background: #f8f9fb;
        border-radius: 16rpx;
        border: 1rpx solid #e8e8e8;

        /* 隐藏滚动条 */
        &::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        .result-text {
            font-size: 28rpx;
            line-height: 1.8;
            color: @text-primary;
            white-space: pre-wrap;
            word-break: break-word;
        }
    }

    .scroll-indicator {
        display: flex;
        justify-content: center;
        margin-top: 16rpx;
        animation: bounce 2s infinite;

        .scroll-text {
            font-size: 24rpx;
            color: @text-secondary;
            opacity: 0.7;
        }
    }
}

/* 遮罩层 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    /* 高于右侧导航栏的1000，但低于悬浮框 */
    animation: maskFadeIn 0.3s ease-out;
}

/* 动画 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes maskFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dotBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10rpx);
    }

    60% {
        transform: translateY(-5rpx);
    }
}
</style>