<template>
    <div class="page-container">
        <Header :title="currentTitle" />
        <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功" failed-text="刷新失败">
            <div class="content">
                <div class="home">
                    <p class="title">设备音量</p>
                    <van-cell-group inset>
                        <van-field v-model.number="voicevalue" type="number" label="设备音量" placeholder="请输入0-100"
                            max="100" />
                        <van-slider v-model.number="voicevalue" type="number" :step="1" :max="100" :min="0"
                            @change="onvoiceChange" class="slider" />
                    </van-cell-group>
                    <div class="button-container">
                        <!-- <van-button type="primary" size="large" @click="uploadSettings">上传</van-button> -->
                    </div>
                </div>
                <div class="home">
                    <p class="title">默认播放列表</p>
                    <van-icon class="icon" name="plus" @click="showDialogForPlaylist" />
                    <ul class="playlist">
                        <!-- 播放列表 -->
                        <li v-for="(item, index) in playlist" :key="index" class="playlist-item"
                            @click="editdefaultlist(index)">
                            <button class="delete-btn" @click.stop="removeItem(index, 'playlist')">删除</button>
                            <p class="remark">备注: {{ item.remark }}</p>
                            <div class="duration-info">
                                <p>播放时长: {{ item.runningtime }} 秒</p>
                                <p>暂停时长: {{ item.pauseduration }} 秒</p>
                            </div>
                        </li>
                    </ul>
                    <!-- <van-button v-if="playlist.length > 0" type="primary" size="normal" @click="sendPlaylistData">发送播放列表</van-button> -->

                </div>

                <div class="home">
                    <p class="title">事件播放列表</p>
                    <van-icon class="icon" name="plus" @click="showDialogForEventPlaylist" />
                    <ul class="playlist">
                        <!-- 事件播放列表 -->
                        <li v-for="(item, index) in eventplaylist" :key="index" class="playlist-item"
                            @click="editeventlist(index)">
                            <button class="delete-btn" @click.stop="removeItem(index, 'eventplaylist')">删除</button>
                            <p class="remark">备注: {{ item.remark }}</p>
                            <div class="duration-info">
                                <p>事件来源:
                                    <span v-if="item.EventSourcename === '其他'">{{ item.EventSource }}</span>
                                    <span v-else>{{ item.EventSourcename }}</span>
                                </p>
                                <p>事件码:
                                    <span v-if="item.eventcodename === '其他'">{{ item.eventcode }}</span>
                                    <span v-else>{{ item.eventcodename }}</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </van-pull-refresh>

        <!-- Dialog 组件 -->
        <van-dialog v-model:show="showOptionsDialog" title="选择音频来源" @confirm="onDialogConfirm" show-cancel-button>
            <van-radio-group v-model="audioSource">
                <van-radio class="choice" name="online">在线合成音频</van-radio>
                <van-radio class="choice" name="local">本地选择音频</van-radio>
            </van-radio-group>
            <!-- v-if="!isLocal" -->
        </van-dialog>

        <!-- 默认本地合成语音弹窗 -->
        <van-dialog v-model:show="showlocal" title="本地语音合成" @confirm="addLocalAudio" show-cancel-button
            @cancel="Reset_input()">
            <van-cell-group inset>
                <van-field v-model="filename" is-link readonly name="picker" label="文件名" placeholder="请选择文件名"
                    @click="showfilenamePicker = true" />
                <van-field v-model="remark" label="备注" />
                <van-field v-model="runningtime" label="播放时长" />
                <van-field v-model="pauseduration" label="暂停时长" />
            </van-cell-group>
        </van-dialog>

        <!-- 默认远程合成语音弹窗 -->
        <van-dialog v-model:show="showonline" title="在线语音合成" @confirm="addOnlineAudio" show-cancel-button
            @cancel="Reset_input()">
            <van-cell-group inset>
                <van-field v-model="filename" label="文件名" readonly />
                <van-field v-model="remark" label="备注" />
                <!-- <van-field v-model="Broadcast_sound" label="播报声音" /> -->
                <van-field v-model="speed" label="合成语速" placeholder="语速0-15" />
                <van-cell is-link title="播报声音" @click="showBroadcast_sound = true">
                    {{ Broadcast_sound }}
                </van-cell>
                <van-field v-model="text" label="合成文本" type="textarea" placeholder="请输入合成文本" class="custom-textarea" />
                <van-field v-model="runningtime" label="播放时长" />
                <van-field v-model="pauseduration" label="暂停时长" />

                <!-- 强制合成开关 -->
                <van-cell title="强制合成">
                    <template #right-icon>
                        <van-switch v-model="forceSynthesis" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-dialog>


        <!-- 事件本地合成语音弹窗 -->
        <van-dialog v-model:show="showeventlocal" title="本地事件语音合成" @confirm="addEventLocalAudio" show-cancel-button
            @cancel="Reset_input()">
            <van-cell-group inset>
                <!-- <div class="field">
                    <label for="eventFilename">选择文件名:</label>
                    <select id="eventFilename" v-model="filename">
                        <option value="" disabled selected>请选择文件名</option>
                        <option v-for="option in filenameOptions" :key="option" :value="option">{{ option }}</option>
                    </select>
                </div> -->
                <van-field v-model="filename" is-link readonly name="picker" label="文件名" placeholder="请选择文件名"
                    @click="showfilenamePicker = true" />
                <van-field v-model="remark" label="备注" placeholder="请输入备注名" />
                <!-- <van-field v-model="runningtime" label="事件来源" /> -->
                <van-field v-model="sourcefieldValue" is-link readonly label="事件来源" placeholder="选择事件来源"
                    @click="showsourcePicker = true" />
                <van-field v-if="sourcefieldValue == '其他'" v-model="jsonEventSource" label="事件来源"
                    placeholder="请输入事件来源码" />

                <van-field v-model="fieldValue" is-link readonly label="事件码" placeholder="请输入事件码"
                    @click="showPicker = true" />
                <van-field v-if="fieldValue == '其他'" v-model="jsoneventcode" label="事件码" placeholder="请输入事件码" />
                <van-field v-model="priority" label="优先级" placeholder="请输入优先级" />

                <!-- <van-field v-model="pauseduration" label="事件码" /> -->
            </van-cell-group>
        </van-dialog>

        <!-- 事件远程合成语音弹窗 -->
        <van-dialog v-model:show="showeventonline" title="在线事件语音合成" @confirm="addEventOnlineAudio" show-cancel-button
            @cancel="Reset_input()">
            <van-cell-group inset>
                <van-field v-model="filename" label="文件名" readonly />
                <van-field v-model="remark" label="备注" placeholder="请输入备注名" />
                <van-cell is-link title="播报声音" @click="showBroadcast_sound = true">
                    {{ Broadcast_sound }}
                </van-cell>

                <van-field v-model="speed" label="合成语速" placeholder="语速范围取值0-15" />
                <van-field v-model="text" label="合成文本" type="textarea" placeholder="请输入合成文本" class="custom-textarea" />

                <van-field v-model="sourcefieldValue" is-link readonly label="事件来源" placeholder="选择事件来源"
                    @click="showsourcePicker = true" />
                <van-field v-if="sourcefieldValue == '其他'" v-model="jsonEventSource" label="事件来源"
                    placeholder="请输入事件来源码" />
                <van-field v-model="fieldValue" is-link readonly label="事件码" placeholder="请输入事件码"
                    @click="showPicker = true" />
                <van-field v-if="fieldValue == '其他'" v-model="jsoneventcode" label="事件码" placeholder="请输入事件码" />

                <van-field v-model="priority" label="优先级" placeholder="请输入优先级" />
                <van-cell title="强制合成">
                    <template #right-icon>
                        <van-switch v-model="forceSynthesis" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-dialog>
        <van-action-sheet v-model:show="showBroadcast_sound" :actions="speedactions" v-model="Broadcast_sound"
            @select="onSelect" />


        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="codecolumns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>


        <van-popup v-model:show="showsourcePicker" round position="bottom">
            <van-picker :columns="sourcecolumns" @cancel="showsourcePicker = false" @confirm="onConfirmsource" />
        </van-popup>
        <van-popup v-model:show="showfilenamePicker" position="bottom">
            <van-picker :columns="filenamecolumns" @confirm="onConfirmfilename" @cancel="showfilenamePicker = false" />
        </van-popup>
    </div>
    <Footer />
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import axios from "axios";
// import { connectMQTT, client } from "../../components/MQTT/mqttclient";
import { showToast } from "vant";
export default {
    components: {
        Header,
        Footer,
    },
    setup() {
        const currentTitle = ref("声卡设置");
        const isLocal = ref(true); // 定义 isLocal 变量并初始化为 false
        const loading = ref(false);
        const jsonId = ref(1); // 初始 JSON ID
        const voicevalue = ref(0);
        const showfilenamePicker = ref(false);
        const showBroadcast_sound = ref(false);
        const speedactions = [
            { name: '度小美(0)', value: '0' },
            { name: '度小宇(1)', value: '1' },
            { name: '度逍遥(3)', value: '3' },
            { name: '度丫丫(4)', value: '4' },
        ];
        const filenamecolumns = ref([]);;
        const flag = ref(false);
        //false 表示默认的tts合成 
        const router = useRouter();
        const filename = ref("");
        const remark = ref("");
        const priority = ref("0");
        const speed = ref("5");
        const Broadcast_sound = ref("0");
        const text = ref("");
        const eventcode = ref("");
        const EventSource = ref("");
        const runningtime = ref("1");
        const pauseduration = ref("1");
        const playlist = ref([]); // 播放列表数组
        const eventplaylist = ref([]); // 事件播放列表数组
        const showOptionsDialog = ref(false); // 控制 Dialog 显示状态
        const selectedOption = ref(""); // 用于指示哪个列表要被添加
        const audioSource = ref(""); // 保存用户选择的音频来源
        const showlocal = ref(false);
        const showonline = ref(false);
        const showeventlocal = ref(false);
        const showeventonline = ref(false);
        const filenameOptions = ref([]); // 文件名选项
        let editingIndex = ref(null);
        let jsoneventcode = ref("0");
        let jsonEventSource = ref("1");
        const EventSourcename = ref("");
        const eventcodename = ref("");
        const isEditing = ref(false);
        const forceSynthesis = ref(false);
        const newFilename = ref('');
        let currentIndex = ref("0");
        let newItem_content = ref([]);
        //事件码
        const codecolumns = [
            { text: '默认显示', value: '0' },
            { text: '雷达触发(RS485雷达)', value: '1' },
            { text: '雷达超速(RS485雷达)', value: '2' },
            { text: '车牌触发(摄像头)', value: '3' },
            { text: '车牌超速(摄像头)', value: '4' },
            { text: '行人检测(相机)', value: '5' },
            { text: 'IN1下降沿', value: '0x51' },
            { text: 'IN2上升沿', value: '0x52' },
            { text: 'IN3下降沿', value: '0x53' },
            { text: 'IN4上升沿', value: '0x54' },
            { text: 'IN1低电平', value: '0x55' },
            { text: 'IN2高电平', value: '0x56' },
            { text: 'IN3低电平', value: '0x57' },
            { text: 'IN4高电平', value: '0x58' },
            { text: '其他', value: '-1' },

        ];
        const combinedList = ref([]); // 定义为响应式变量
        let fieldValue = ref('默认显示');
        const showPicker = ref(false);

        const onConfirm = ({ selectedOptions }) => {
            showPicker.value = false;
            fieldValue.value = selectedOptions[0].text;
            jsoneventcode.value = selectedOptions[0].value;
        };

        //事件码



        //事件来源
        const sourcecolumns = [
            { text: '任意设备(除本身外)', value: '254' },
            { text: '任意设备', value: '255' },
            { text: '其他', value: '1' },


        ];
        const onConfirmfilename = ({ selectedOptions }) => {
            filename.value = selectedOptions[0]?.text;
            showfilenamePicker.value = false;
        };
        let sourcefieldValue = ref('其他');
        const showsourcePicker = ref(false);

        const onConfirmsource = ({ selectedOptions }) => {
            showsourcePicker.value = false;
            sourcefieldValue.value = selectedOptions[0].text;
            jsonEventSource.value = selectedOptions[0].value;
        };
        //事件来源

        const checkEnvironment = () => {
            if (window.location.hostname === '192.168.4.1') {
                console.log('in local');
                // 本地开发环境，设置 isLocal 为 true
                isLocal.value = true;
            } else {
                // 生产环境，设置 isLocal 为 false
                isLocal.value = false;
                console.log('in online');

            }
        };


        const onSelect = (item) => {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            showBroadcast_sound.value = false;
            Broadcast_sound.value = item.value;
            Broadcast_sound.name = item.name;
            showToast(item.name);
        };
        const removeItem = (index, type) => {
            if (type === "playlist") {
                if (index >= 0 && index < playlist.value.length) {
                    playlist.value.splice(index, 1); // 从播放列表中删除
                    sendPlaylistData();
                }
            } else if (type === "eventplaylist") {
                if (index >= 0 && index < eventplaylist.value.length) {
                    eventplaylist.value.splice(index, 1); // 从事件播放列表中删除
                    sendEventPlaylistData();
                }
            }
        };



        const editdefaultlist = (index) => {
            // 进入编辑模式
            isEditing.value = true;

            // 获取所选的事件项目
            const selectedEvent = playlist.value[index];

            // 将所选事件的值赋给对应的输入框
            filename.value = selectedEvent.filename;
            remark.value = selectedEvent.remark;
            runningtime.value = selectedEvent.runningtime;
            pauseduration.value = selectedEvent.pauseduration;

            // 设置原始值用于比较

            // 根据需要设置其他输入框的值
            Broadcast_sound.value = selectedEvent.Broadcast_sound || "";
            speed.value = selectedEvent.speed || "";
            text.value = selectedEvent.text || "";
            if (selectedEvent.sou === 1) {
                showonline.value = true;
            } else {
                showlocal.value = true; // 或者 showeventonline.value = true，根据具体情况选择
            }

            // 设置当前编辑的索引
            editingIndex.value = index;
            console.log(editingIndex.value);
        };


        // 事件列表编辑函数
        const editeventlist = (index) => {
            // 进入编辑模式
            isEditing.value = true;

            // 获取所选的事件项目
            const selectedEvent = eventplaylist.value[index];

            // 将所选事件的值赋给对应的输入框
            filename.value = selectedEvent.filename;
            remark.value = selectedEvent.remark;
            sourcefieldValue.value = selectedEvent.EventSourcename;
            jsonEventSource.value = selectedEvent.EventSource;
            jsoneventcode.value = selectedEvent.eventcode;
            fieldValue.value = selectedEvent.eventcodename;
            priority.value = selectedEvent.priority;
            // 根据需要设置其他输入框的值
            Broadcast_sound.value = selectedEvent.Broadcast_sound || "";
            speed.value = selectedEvent.speed || "";
            text.value = selectedEvent.text || "";
            if (selectedEvent.sou === 1) {
                showeventonline.value = true;
            } else {
                showeventlocal.value = true; // 或者 showeventonline.value = true，根据具体情况选择
            }

            // 设置当前编辑的索引
            editingIndex.value = index;
            console.log(editingIndex.value);
        };
        // 在组件挂载时获取音频数据
        onMounted(async () => {
            window.addEventListener('message', function (event) {
                console.log("接受的原始数据",JSON.stringify(event.data))
                if (event.data) {
                    MQTT_recv(JSON.stringify(event.data));  // 保持与原 MQTT_recv 兼容 
                }
            });
            // showToast("success")
            // window.MQTT_recv = MQTT_recv;
            await checkEnvironment();
            getallinfo();
            // fetchAudioData(); // 获取音频数据
            // fetchFilenameOptions();
        });
        const onvoiceChange = async () => {
            const newVolume = voicevalue.value;
            const payload = {
                JSON_id: jsonId.value,
                board_id: 103,
                sound_card: {
                    param:
                    {
                        volume: newVolume
                    }
                }
            }
            if (isLocal.value) {
                axios.post(`/communication`, payload, {
                    headers: {
                        "content-type": "application/json"
                    }
                })
                    .then(response => {
                        console.log('Response data:', response.data);
                        showToast('刷新成功');
                        jsonId.value++;
                        loading.value = false; // 结束刷新时设置 loading 为 false
                    })
                    .catch(error => {
                        // 处理错误
                        console.error('Upload error:', error);
                        showToast('刷新失败');
                        jsonId.value++;
                        loading.value = false; // 结束刷新时设置 loading 为 false
                    });
            }

            else {
                MQTT_send(payload);
                showToast('设置已上传');
            }
        };



        const MQTT_send = (send_string) => {
            console.log(" 向父页面发送消息:", JSON.stringify(send_string));
            // 使用 postMessage 发送数据给父页面 
            window.parent.postMessage(
                {
                    data: send_string
                },
                '*' // 目标 origin，生产环境应替换为具体的父页面域名 
            );
        };
        // MQTT 接收函数
        const MQTT_recv = (string) => {
            console.log("MQTT 接收的json:" + JSON.stringify(string));
            const data = JSON.parse(string);
            if (data.sound_card.TTS_state) {
                if (data.sound_card.TTS_state == 'succeed' || data.sound_card.TTS_state == 'time_out') {
                    const index = currentIndex; // 这里假设你有一个 currentIndex 用于追踪编辑项的索引
                    if (flag.value) {
                        if (isEditing) {
                            // 如果是编辑模式，更新原有项
                            eventplaylist.value[index] = newItem_content;
                        } else {
                            // 如果是新建模式，添加新项
                            eventplaylist.value.push(newItem_content);
                        }
                        sendEventPlaylistData();
                        showToast('TTS 合成成功，已添加到事件播放列表');
                    } else {
                        if (isEditing) {
                            // 如果是编辑模式，更新原有项
                            playlist.value[index] = newItem_content;
                        } else {
                            // 如果是新建模式，添加新项
                            playlist.value.push(newItem_content);
                        }
                        sendPlaylistData();
                        showToast('TTS 合成成功，已添加到事件播放列表');
                    }
                }
            }
            else {
                console.log("执行解析函数");
                console.log(JSON.stringify(data.sound_card));

                handleJsonMessage(data.sound_card);
            }
        };
        //文件名管理
        const getNextTTSFilename = (list) => {
            // 过滤出以 'TTS' 开头的 filename 属性的值
            const usedTTSNumbers = list
                .filter(item => item.filename && item.filename.startsWith('TTS'))
                .map(item => parseInt(item.filename.replace('TTS', ''), 10))
                .filter(number => !isNaN(number)); // 排除非数字的情况

            // 找到未使用的最小编号
            for (let i = 0; i <= 29; i++) {
                if (!usedTTSNumbers.includes(i)) {
                    return `TTS${i}`;
                }
            }

            return null; // 如果所有编号都被使用，返回 null
        };




        const onRefresh = () => {
            getallinfo();
        };

        const showDialogForPlaylist = () => {
            if (playlist.length > 10) {
                showToast("添加数量已满");
            } else {
                selectedOption.value = "default"; // 设置选择选项为默认播放列表
                showOptionsDialog.value = true; // 显示选项对话框
            }
        };


        const showDialogForEventPlaylist = () => {
            if (eventplaylist.length > 20) {
                showToast("添加数量已满");

            } else {
                selectedOption.value = "event"; // 设置选择选项为事件播放列表
                showOptionsDialog.value = true; // 显示选项对话框
            }

        };

        const onDialogConfirm = () => {
            console.log('New TTS Filename:', newFilename.value);
            const source = audioSource.value; // 获取选择的音频来源
            if (selectedOption.value === "default") {
                // 判断选项是默认播放列表
                if (source === "local") {
                    showlocal.value = true; // 显示本地合成语音弹窗
                } else if (source === "online") {
                    showonline.value = true; // 显示在线合成语音弹窗
                    filename.value = newFilename.value;
                }
            } else if (selectedOption.value === "event") {
                // 判断选项是事件播放列表
                if (source === "local") {
                    showeventlocal.value = true; // 显示本地事件合成语音弹窗
                } else if (source === "online") {
                    showeventonline.value = true; // 显示在线事件合成语音弹窗
                    filename.value = newFilename.value;

                }
            }
            showOptionsDialog.value = false; // 关闭选项对话框

        };

        const addLocalAudio = () => {
            if (!filename.value.trim()) {
                showToast('文件名为空,请填写文件名');
                return; // 退出函数，防止添加或更新操作
            }
            // 添加本地音频到播放列表
            if (isEditing.value) {
                // 更新现有项
                playlist.value[editingIndex.value] = {
                    filename: filename.value,
                    remark: remark.value,
                    runningtime: runningtime.value,
                    pauseduration: pauseduration.value,
                    Broadcast_sound: Broadcast_sound.value,
                    speed: speed.value,
                    text: text.value,
                    sou: 0
                };
                // 退出编辑模式
                Reset_input();
                isEditing.value = false;
            } else {
                // 添加新项
                playlist.value.push({
                    filename: filename.value,
                    remark: remark.value,
                    runningtime: runningtime.value,
                    pauseduration: pauseduration.value,
                    Broadcast_sound: Broadcast_sound.value,
                    speed: speed.value,
                    text: text.value,
                    sou: 0
                });
                Reset_input();
            }
            isEditing.value = false;
            console.log(isEditing.value);
            sendPlaylistData();
        };
        const addOnlineAudio = async () => {
            console.log(newFilename.value);

            const newItem = {
                filename: newFilename.value,
                remark: remark.value,
                runningtime: runningtime.value,
                pauseduration: pauseduration.value,
                Broadcast_sound: Broadcast_sound.value,
                speed: speed.value,
                text: text.value,
                sou: 1
            };
            newItem_content = newItem;

            if (isEditing.value) {
                // 获取当前编辑的项目
                const originalItem = playlist.value[editingIndex.value];

                // 检查是否需要进行 TTS 合成
                const ttsRequired = forceSynthesis.value ||
                    originalItem.Broadcast_sound !== newItem.Broadcast_sound ||
                    originalItem.speed !== newItem.speed ||
                    originalItem.text !== newItem.text;

                if (ttsRequired) {
                    await ttssend(newItem, editingIndex.value);
                } else {
                    // 如果不需要 TTS 合成，直接更新现有项
                    playlist.value[editingIndex.value] = newItem;
                }
            } else {
                // 非编辑模式，直接添加新项并进行 TTS 合成
                const newIndex = playlist.value.length;
                currentIndex = newIndex;
                await ttssend(newItem, newIndex);
                // playlist.value.push(newItem);

            }

            Reset_input();
            isEditing.value = false;
            // sendPlaylistData();
        };



        const addEventLocalAudio = () => {
            // 检查文件名是否为空
            if (!filename.value.trim()) {
                showToast('文件名为空,请填写文件名');
                return; // 退出函数，防止添加或更新操作
            }

            // 添加本地事件音频到事件播放列表
            if (isEditing.value) {
                eventplaylist.value[editingIndex.value] = {
                    sou: 0,
                    filename: filename.value,
                    remark: remark.value,
                    EventSource: jsonEventSource.value,
                    eventcode: jsoneventcode.value,
                    EventSourcename: sourcefieldValue.value,
                    eventcodename: fieldValue.value,
                    priority: priority.value
                };
            } else {
                eventplaylist.value.push({
                    sou: 0,
                    filename: filename.value,
                    remark: remark.value,
                    EventSource: jsonEventSource.value,
                    eventcode: jsoneventcode.value,
                    EventSourcename: sourcefieldValue.value,
                    eventcodename: fieldValue.value,
                    priority: priority.value
                });
            }

            // 重置输入框
            Reset_input();
            isEditing.value = false;
            console.log(isEditing.value);
            showeventlocal.value = false; // 关闭本地事件音频弹窗
            sendEventPlaylistData();
        };

        const Reset_input = () => {
            // 重置输入框
            isEditing.value = false;
            filename.value = "";
            remark.value = "";
            Broadcast_sound.value = "0";
            speed.value = "5";
            text.value = "";
            sourcefieldValue.value = "";
            fieldValue.value = "";
            runningtime.value = "1";
            pauseduration.value = "1";
            priority.value = "0";
            jsonEventSource.value = "1";
            jsoneventcode.value = "0";
            sourcefieldValue.value = '其他';
            fieldValue.value = '默认显示';
        }

        const addEventOnlineAudio = async () => {
            const newItem = {
                sou: 1,
                filename: newFilename.value,
                remark: remark.value,
                Broadcast_sound: Broadcast_sound.value,
                speed: speed.value,
                text: text.value,
                EventSourcename: sourcefieldValue.value,
                eventcodename: fieldValue.value,
                EventSource: jsonEventSource.value,
                eventcode: jsoneventcode.value,
                priority: priority.value
            };
            newItem_content = newItem;
            // 显示加载指示器

            if (isEditing.value) {
                // 获取当前编辑的项目

                const originalItem = eventplaylist.value[editingIndex.value];

                // 检查是否需要进行 TTS 合成
                const ttsRequired = forceSynthesis.value ||
                    originalItem.Broadcast_sound !== newItem.Broadcast_sound ||
                    originalItem.speed !== newItem.speed ||
                    originalItem.text !== newItem.text;

                if (ttsRequired) {
                    await ttssendevent(newItem, editingIndex.value, true);
                } else {
                    // 如果不需要 TTS 合成，直接更新现有项
                    eventplaylist.value[editingIndex.value] = newItem;
                }
            } else {
                // 非编辑模式，进行 TTS 合成并等待成功响应
                const newIndex = eventplaylist.value.length;
                currentIndex = newIndex;
                await ttssendevent(newItem, null, false);
            }

            // 隐藏加载指示器
            Reset_input();
            isEditing.value = false;
            console.log(isEditing.value);
            showeventonline.value = false; // 关闭在线事件音频弹窗
            // sendEventPlaylistData();
        };


        //组成json数据格式
        // 将播放列表转换成 JSON 格式
        const createPlaylistJSON = () => {
            const play_list = playlist.value.map((item, index) => {
                const baseItem = {
                    num: Number(index),
                    sou: Number(item.sou), // 假设 0 代表在线音频，1 代表本地音频
                    remark: item.remark,
                    filename: item.filename,
                    play_time: Number(item.runningtime),
                    pause_time: Number(item.pauseduration),
                };

                if (item.Broadcast_sound) {
                    baseItem.TTS = {
                        per: Number(item.Broadcast_sound),
                        spd: Number(item.speed || 5), // 速度默认值 5
                        pit: Number(5), // 音调默认值
                        vol: Number(5), // 音量默认值
                    };
                    baseItem.tts_str = item.text;
                }

                return baseItem;
            });
            return {
                JSON_id: jsonId.value,
                board_id: 103,
                sound_card: {
                    play_list,
                },
            };
        };


        const ttssend = async (newItem, index = null) => {
            flag.value = false;
            const ttsJson = {
                JSON_id: jsonId.value,
                board_id: 103,
                sound_card: {
                    TTS: {
                        per: Number(newItem.Broadcast_sound),
                        spd: Number(newItem.speed),
                        pit: 5, // 根据你的需求设置
                        vol: 5, // 根据你的需求设置
                        tex_utf8: newItem.text,
                        filename: newItem.filename
                    },
                    TTS_state: "idle",
                    interrupt: 1
                },
                error_code: 0
            };

            console.log('Sending TTS request:', JSON.stringify(ttsJson));
            // 使用 postMessage 发送消息
            try {
                MQTT_send(ttsJson);
                console.log('Payload sent:', ttsJson);
                showToast('合成TTS已请求');
            } catch (error) {
                console.error('PostMessage error:', error);
                showToast('合成TTS失败');
            }

        };




        //event
        //  tts
        const ttssendevent = async (newItem, index, isEditing) => {
            flag.value = true;
            const ttsJson = {
                JSON_id: jsonId.value,
                board_id: 103,
                sound_card: {
                    TTS: {
                        per: Number(newItem.Broadcast_sound),
                        spd: Number(newItem.speed),
                        pit: 5, // 根据你的需求设置
                        vol: 5, // 根据你的需求设置
                        tex_utf8: newItem.text,
                        filename: newItem.filename
                    },
                    TTS_state: "idle",
                    interrupt: 1
                },
                error_code: 0
            };

            console.log('Sending TTS request:', JSON.stringify(ttsJson));
            // 使用 postMessage 发送消息
            try {
                MQTT_send(ttsJson);
                console.log('Payload sent:', ttsJson);
                showToast('合成TTS语音已请求');
            } catch (error) {
                console.error('PostMessage error:', error);
                showToast('合成TTS语音失败');

            }

        };


        // 将事件播放列表转换成 JSON 格式
        const createEventPlaylistJSON = () => {
            const event_play_list = eventplaylist.value.map((item, index) => {
                const baseItem = {
                    num: Number(index),
                    sou: Number(item.sou), // 假设 0 代表在线音频，1 代表本地音频
                    remark: item.remark,
                    filename: item.filename,
                    event: {
                        source: Number(item.EventSource),
                        code: Number(item.eventcode),
                        priority: Number(item.priority)
                    }

                };

                if (item.Broadcast_sound) {
                    baseItem.TTS = {
                        per: Number(item.Broadcast_sound),
                        spd: Number(item.speed || 5), // 速度默认值 5
                        pit: Number(5), // 音调默认值
                        vol: Number(5), // 音量默认值
                    };
                    baseItem.tts_str = item.text;
                }

                return baseItem;
            });

            return {
                JSON_id: jsonId.value,
                board_id: 103,

                sound_card: {
                    event_play_list: event_play_list,
                },
            };
        };


        // 默认列表
        const sendPlaylistData = async () => {
            const data = createPlaylistJSON();
            console.log(JSON.stringify(data));

            if (isLocal.value) {
                try {
                    const response = await axios.post(`/communication`, data, {
                        headers: {
                            "content-type": "application/json"
                        }
                    });
                    console.log('Response data:', response.data);
                    showToast('刷新成功');
                    jsonId.value++;
                } catch (error) {
                    // 处理错误
                    console.error('Upload error:', error);
                    showToast('刷新失败');
                    jsonId.value++;
                }
            } else {
                // 使用 postMessage 发送数据
                try {
                    MQTT_send(data);
                    console.log('Payload sent:', data);
                    showToast('设置已上传');
                } catch (error) {
                    console.error('PostMessage error:', error);
                }

            }
        };


        //事件列表发送部分
        const sendEventPlaylistData = async () => {
            const data = createEventPlaylistJSON();
            console.log(JSON.stringify(data));

            if (isLocal.value) {
                try {
                    const response = await axios.post(`/communication`, data, {
                        headers: {
                            "content-type": "application/json"
                        }
                    });
                    console.log('Response data:', response.data);
                    showToast('刷新成功');
                    jsonId.value++;
                    loading.value = false; // 结束刷新时设置 loading 为 false
                } catch (error) {
                    // 处理错误
                    console.error('Upload error:', error);
                    showToast('刷新失败');
                    jsonId.value++;
                    loading.value = false; // 结束刷新时设置 loading 为 false
                }
            } else {
                // 使用 postMessage 发送数据
                try {
                    MQTT_send(data);
                    console.log('Payload sent:', data);
                    showToast('设置已上传');
                } catch (error) {
                    console.error('PostMessage error:', error);
                }
            }
        };




        const getallinfo = async () => {
            loading.value = true;  // 开始请求时设置 loading 为 true

            const createRequest = (params) => ({
                JSON_id: jsonId.value,
                board_id: 103,
                sound_card: params
            });

            const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

            const sendRequest = async (request) => {
                let timeoutId;

                const handleTimeout = () => {
                    showToast('数据获取失败');  // 超时时显示错误提示
                    loading.value = false;  // 超时后停止 loading
                };

                try {
                    // 设置 5 秒超时
                    timeoutId = setTimeout(handleTimeout, 5000);

                    if (isLocal.value) {
                        const response = await axios.post('/communication', request, {
                            headers: {
                                "content-type": "application/json"
                            }
                        });
                        clearTimeout(timeoutId);  // 如果请求成功，清除超时
                        console.log('Response data:', response.data);
                        return response.data.sound_card;
                    } else {
                        await MQTT_send(request);
                        await delay(2000);  // 等待一段时间模拟异步操作
                        clearTimeout(timeoutId);  // 清除超时
                    }
                } catch (error) {
                    console.error('Request error:', error);
                    clearTimeout(timeoutId);  // 请求失败时清除超时
                    loading.value = false;  // 失败时停止 loading
                    showToast('刷新失败');  // 显示错误提示
                    throw error;
                }
            };

            try {
                const requests = [
                    { get_param: 1 },
                    { get_mp3_list: 1 },
                    { get_play_list: 1 },
                    { get_event_play_list: 1 }
                ];

                for (let i = 0; i < requests.length; i++) {
                    console.log('senddata:', JSON.stringify(requests[i]));
                    const data = await sendRequest(createRequest(requests[i]));
                    if (isLocal.value) {
                        handleJsonMessage(data);  // 处理响应数据
                    }
                    jsonId.value++;  // 更新 JSON_id
                }
                // showToast('刷新成功');  // 请求完成后显示成功提示
            } catch (error) {
                // 处理其他错误
            } finally {
                loading.value = false;  // 不论成功或失败，最终都停止 loading
            }
        };


        onBeforeUnmount(() => {

        });
        // json数据处理函数
        function handleJsonMessage(data) {
            // 如果存在新参数音量，则更新
            if (data.param) {
                voicevalue.value = data.param.volume;
            }

            // 更新文件名选项
            if (data && Array.isArray(data.mp3_list)) {
                newFilename.value = getNextTTSFilename(combinedList.value);
                filenamecolumns.value = data.mp3_list.map(mp3 => ({
                    text: mp3,
                    value: mp3
                }));
            } else {
                console.warn('No valid mp3_list found in data.sound_card');
            }

            // 更新播放列表并合并到 combinedList
            if (data.play_list) {
                const newPlaylistItems = data.play_list.map(item => ({
                    remark: item.remark,
                    filename: item.filename,
                    runningtime: item.play_time,
                    pauseduration: item.pause_time,
                    Broadcast_sound: item.TTS ? item.TTS.per : null,
                    speed: item.TTS ? item.TTS.spd : 0,
                    pit: item.TTS ? item.TTS.pit : 0,
                    vol: item.TTS ? item.TTS.vol : 0,
                    text: item.tts_str,
                    ...item
                }));
                playlist.value = newPlaylistItems;
                combinedList.value.push(...newPlaylistItems);
            }

            // 更新事件播放列表并合并到 combinedList
            if (data.event_play_list) {
                const newEventPlaylistItems = data.event_play_list.map(item => {
                    let eventType, eventsource;
                    switch (item.event.source) {
                        case 0:
                            eventsource = '本台设备';
                            break;
                        case 254:
                            eventsource = '除本身外任意设备';
                            break;
                        case 255:
                            eventsource = '任意设备';
                            break;
                        default:
                            eventsource = '其他';
                    }
                    switch (item.event.code) {
                        case 0:
                            eventType = '默认显示';
                            break;
                        case 1:
                            eventType = '雷达触发(RS485 雷达)';
                            break;
                        case 2:
                            eventType = '雷达超速(RS485 雷达)';
                            break;
                        case 3:
                            eventType = '车牌触发(摄像头)';
                            break;
                        case 4:
                            eventType = '车牌超速(摄像头)';
                            break;
                        case 5:
                            eventType = '行人检测(相机)';
                            break;
                        case 51:
                            eventType = 'IN1下降沿';
                            break;
                        case 52:
                            eventType = 'IN2上升沿';
                            break;
                        case 53:
                            eventType = 'IN3下降沿';
                            break;
                        case 54:
                            eventType = 'IN4上升沿';
                            break;
                        case 55:
                            eventType = 'IN1低电平';
                            break;
                        case 56:
                            eventType = 'IN2高电平';
                            break;
                        case 57:
                            eventType = 'IN3低电平';
                            break;
                        case 58:
                            eventType = 'IN4高电平';
                            break;
                        default:
                            eventType = '其他';
                    }
                    return {
                        remark: item.remark,
                        EventSource: item.event.source,
                        eventcode: item.event.code,
                        EventSourcename: eventsource,
                        eventcodename: eventType,
                        priority: item.event.priority,
                        Broadcast_sound: item.TTS ? item.TTS.per : null,
                        speed: item.TTS ? item.TTS.spd : 0,
                        pit: item.TTS ? item.TTS.pit : 0,
                        vol: item.TTS ? item.TTS.vol : 0,
                        text: item.tts_str,
                        ...item
                    };
                });
                eventplaylist.value = newEventPlaylistItems;
                combinedList.value.push(...newEventPlaylistItems);
            }

            console.log('combinedList:', JSON.stringify(combinedList.value));
        }



        return {
            currentTitle,
            isLocal,
            loading,
            voicevalue,
            filename,
            remark,
            speed,
            Broadcast_sound,
            text,
            runningtime,
            pauseduration,
            playlist,
            eventplaylist,
            onvoiceChange,
            onRefresh,
            showlocal,
            showonline,
            showeventlocal,
            showeventonline,
            showOptionsDialog,
            audioSource,
            filenameOptions,
            removeItem,
            showDialogForPlaylist,
            showDialogForEventPlaylist,
            onDialogConfirm,
            addLocalAudio,
            addOnlineAudio,
            addEventLocalAudio,
            addEventOnlineAudio,
            eventcode,
            EventSource,
            showBroadcast_sound,
            speedactions,
            onSelect,
            codecolumns,
            onConfirm,
            fieldValue,
            showPicker,
            showsourcePicker,
            sourcecolumns,
            onConfirmsource,
            sourcefieldValue,
            editingIndex,
            createEventPlaylistJSON,
            createPlaylistJSON,
            sendPlaylistData,
            sendEventPlaylistData,
            jsoneventcode,
            jsonEventSource,
            EventSourcename,
            eventcodename,
            editdefaultlist,
            isEditing,
            Reset_input,
            editeventlist,
            checkEnvironment,
            getallinfo,
            forceSynthesis,
            handleJsonMessage,
            showfilenamePicker,
            filenamecolumns,
            onConfirmfilename,
            priority,
            ttssend,
            ttssendevent,
            MQTT_recv,
            MQTT_send,
            flag,
            getNextTTSFilename,
            newFilename,
            currentIndex,
            newItem_content,
            combinedList
        };
    },
};
</script>



<style scoped>
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    border-radius: 20px !important;
    margin-top: 80px;
    margin-bottom: 40px;
    min-height: 100vh;
}

.home {
    display: flex;
    flex-direction: column;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid #0668fc;
    margin: 10px 10px 20px;
    flex: 1;
}

.title {
    text-align: center;
    font-size: 30px;
}

.icon {
    font-size: 34px;
    align-self: flex-end;
    /* 使用 flexbox 让图标靠右对齐 */
    margin-top: 10px;
    cursor: pointer;
}

.choice {
    margin: 20px;
}

.slider {
    margin-top: 20px;
    margin-bottom: 15px;
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.playlist {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.remark {
    font-weight: bold;
    font-size: 16px;
    color: #0668fc;
    text-align: center;
}

.duration-info {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;
    color: #0668fc;
}

.field {
    margin-bottom: 15px;
}

.field label {
    font-size: 16px;
    /* color: #0668fc; */
}

.field select {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #0668fc;
    border-radius: 5px;
    outline: none;
    appearance: none;
}

.playlist-item {
    position: relative;
    /* 为子元素的绝对定位提供参照 */
    background-color: #e8f4ff;
    border: 2px solid #0668fc;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px;
}

.delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4d4f;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
}

.delete-btn:hover {
    background-color: #e60012;
}

::v-deep .van-field__control {
    text-align: right !important;
}

::v-deep .custom-textarea .van-field__label {
    align-self: center;
    /* 标签垂直居中 */
    line-height: normal;
    /* 确保标签内的文字不会被拉伸 */
    height: 100%;
    /* 让标签的高度和输入框一致 */
    display: flex;
    align-items: center;
    /* 在标签的容器中居中对齐 */
}
</style>