<template>
    <view class="main">
        <cl-card label="留言信息">
            <cl-list-item label="状态" border>
                <cl-text type="text" :color="info.state == 1 ? '#06B27B' : '#666666'" :size="30"
                    :value="info.state == 1 ? '已回复' : '待回复'"></cl-text>
            </cl-list-item>
            <cl-list-item label="姓名" border>
                <cl-text type="text" color="#666666" :size="30"
                    :value="info.name"></cl-text>
            </cl-list-item>
            <cl-list-item label="联系电话" border>
                <cl-text type="text" color="#666666" :size="30"
                    :value="info.phone"></cl-text>
            </cl-list-item>
            <cl-list-item label="留言时间" border>
                <cl-text type="text" color="#666666" :size="30"
                    :value="info.createTime"></cl-text>
            </cl-list-item>
            <cl-list-item label="留言内容" border>
                <cl-text type="text" color="#666666" :size="26"
                    :value="info.messageContent"></cl-text>
            </cl-list-item>
            <cl-list-item label="语音留言" border v-if="info.audioSrc">
                <view>
                    <button class="voice-btn" @click="playAudio">播放语音</button>
                </view>
            </cl-list-item>
        </cl-card>
        <view style="height: 20rpx;background: #f7f7f7;"></view>
        <cl-card label="回复信息" v-if="info.replyBy">
            <cl-list-item label="回复人" border>
                <cl-text type="text" color="#666666" :size="30"
                    :value="info.replyBy"></cl-text>
            </cl-list-item>
            <cl-list-item label="回复时间" border>
                <cl-text type="text" color="#666666" :size="30"
                    :value="info.replyTime"></cl-text>
            </cl-list-item>
            <cl-list-item label="回复内容" border>
                <cl-text type="text" color="#666666" :size="26"
                    :value="info.replyContent"></cl-text>
            </cl-list-item>
            <cl-list-item label="语音回复" border v-if="info.replyAudioSrc">
                <view>
                    <button class="voice-btn" @click="playReplyAudio">播放语音</button>
                </view>
            </cl-list-item>
        </cl-card>
    </view>
</template>


<script>
    export default {
        data() {
            return {
                info: {}
            }
        },
        onLoad(options) {
            this.$http.post('/wechat/api/getMessageDetails', {
                id: options.id
            }).then(res => {
                if (res.code == 200) {
                    this.info = res.data;
                }
            })
        },
        data() {
            return {
                info: {},
                innerAudioContext: null,
                replyAudioContext: null
            }
        },
        onUnload() {
            // 页面卸载时销毁音频上下文
            if (this.innerAudioContext) {
                this.innerAudioContext.destroy();
            }
            if (this.replyAudioContext) {
                this.replyAudioContext.destroy();
            }
        },
        methods: {
            // 下载音频文件并尝试播放
            async downloadAndPlayAudio(url, audioContext) {
                return new Promise((resolve, reject) => {
                    uni.showLoading({ title: '正在下载音频...' });
                    
                    // 下载音频文件
                    uni.downloadFile({
                        url: url,
                        success: (downloadRes) => {
                            uni.hideLoading();
                            console.log('音频文件下载成功:', downloadRes);
                            
                            if (downloadRes.statusCode === 200) {
                                // 尝试播放下载的音频文件
                                this.playDownloadedAudio(downloadRes.tempFilePath, audioContext)
                                    .then(resolve)
                                    .catch((playError) => {
                                        console.log('播放下载文件失败，尝试其他方法:', playError);
                                        // 尝试使用网络URL直接播放
                                        this.playNetworkAudio(url, audioContext)
                                            .then(resolve)
                                            .catch(reject);
                                    });
                            } else {
                                reject(new Error('下载失败'));
                            }
                        },
                        fail: (err) => {
                            uni.hideLoading();
                            console.error('下载失败:', err);
                            // 下载失败，尝试直接播放网络URL
                            this.playNetworkAudio(url, audioContext)
                                .then(resolve)
                                .catch(reject);
                        }
                    });
                });
            },
            
            // 播放下载的音频文件
            playDownloadedAudio(filePath, audioContext) {
                return new Promise((resolve, reject) => {
                    console.log('尝试播放下载的音频文件:', filePath);
                    
                    // 销毁之前的音频上下文
                    if (audioContext) {
                        audioContext.destroy();
                    }
                    
                    audioContext = wx.createInnerAudioContext();
                    audioContext.src = filePath;
                    audioContext.volume = 1.0;
                    audioContext.obeyMuteSwitch = false;
                    
                    audioContext.onCanplay(() => {
                        console.log('下载音频可以播放');
                    });
                    
                    audioContext.onPlay(() => {
                        console.log('下载音频开始播放');
                        uni.showToast({ title: '正在播放语音', icon: 'none' });
                        resolve();
                    });
                    
                    audioContext.onError((res) => {
                        console.error('下载音频播放错误:', res);
                        reject(res);
                    });
                    
                    audioContext.onEnded(() => {
                        console.log('下载音频播放结束');
                        uni.showToast({ title: '播放完成', icon: 'none' });
                    });
                    
                    // 开始播放
                    audioContext.play();
                });
            },
            
            // 播放网络音频
            playNetworkAudio(url, audioContext) {
                return new Promise((resolve, reject) => {
                    console.log('尝试播放网络音频:', url);
                    
                    // 销毁之前的音频上下文
                    if (audioContext) {
                        audioContext.destroy();
                    }
                    
                    audioContext = wx.createInnerAudioContext();
                    audioContext.src = url;
                    audioContext.volume = 1.0;
                    audioContext.obeyMuteSwitch = false;
                    
                    audioContext.onCanplay(() => {
                        console.log('网络音频可以播放');
                    });
                    
                    audioContext.onPlay(() => {
                        console.log('网络音频开始播放');
                        uni.showToast({ title: '正在播放语音', icon: 'none' });
                        resolve();
                    });
                    
                    audioContext.onError((res) => {
                        console.error('网络音频播放错误:', res);
                        reject(res);
                    });
                    
                    audioContext.onEnded(() => {
                        console.log('网络音频播放结束');
                        uni.showToast({ title: '播放完成', icon: 'none' });
                    });
                    
                    // 开始播放
                    audioContext.play();
                });
            },
            
            playAudio() {
                if (!this.info.audioSrc) {
                    uni.showToast({ title: '没有语音文件', icon: 'none' });
                    return;
                }
                
                const url = `https://7519ycy.com/prod-api/file/mac/${this.info.audioSrc}`;
                console.log('准备播放音频URL:', url);
                
                // 下载并播放音频
                this.downloadAndPlayAudio(url, this.innerAudioContext)
                    .then(() => {
                        console.log('音频播放成功');
                    })
                    .catch((err) => {
                        console.error('音频播放失败:', err);
                        uni.showToast({ title: '语音播放失败，请检查网络连接', icon: 'none' });
                    });
            },
            
            playReplyAudio() {
                if (!this.info.replyAudioSrc) {
                    uni.showToast({ title: '没有语音文件', icon: 'none' });
                    return;
                }
                
                const url = `https://7519ycy.com/prod-api/file/mac/${this.info.replyAudioSrc}`;
                console.log('准备播放回复音频URL:', url);
                
                // 下载并播放音频
                this.downloadAndPlayAudio(url, this.replyAudioContext)
                    .then(() => {
                        console.log('回复音频播放成功');
                    })
                    .catch((err) => {
                        console.error('回复音频播放失败:', err);
                        uni.showToast({ title: '语音播放失败，请检查网络连接', icon: 'none' });
                    });
            }
        }
    }
</script>


<style>
    page {
        background: #f7f7f7;
    }


    .card {
        margin-top: 20rpx;
    }


    .voice-btn {
        background: #06b27b;
        color: #fff;
        border: none;
        border-radius: 20rpx;
        padding: 10rpx 20rpx;
        font-size: 26rpx;
        cursor: pointer;
    }


    .voice-btn:hover {
        background: #05a06a;
    }
</style>