<template>
    <div class="running-status">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="14" class="status-col">
                <!-- 设备模式和OTA升级部分 -->
                <el-row :gutter="20" class="mode-section">
                    <!-- 设备模式 -->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-card class="mode-card" shadow="hover">
                            <div class="mode-header">
                                <i class="el-icon-menu"></i>
                                <span class="mode-title">{{ $t('device.running-status.866086-0') }}</span>
                            </div>
                            <div class="mode-content">
                                <span class="title" :style="{ color: statusColor.background }">{{ title }}</span>
                            </div>
                        </el-card>
                    </el-col>

                    <!-- 设备升级 -->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-card class="mode-card" shadow="hover">
                            <div class="mode-header">
                                <svg-icon icon-class="ota" />
                                <span class="mode-title">{{ $t('device.running-status.866086-1') }}</span>
                            </div>
                            <div class="mode-content">
                                <el-button type="primary" size="mini" :plain="true" @click="viewVersion()">
                                    {{ $t('device.running-status.866086-44') }}
                                </el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 声卡基础设置 -->
                <el-card class="settings-card" shadow="hover">
                    <div slot="header" class="settings-header">
                        <span class="settings-title">基础设置</span>
                    </div>
                    <el-form :model="basicSettings" label-width="100px">
                        <el-form-item label="音量设置">
                            <el-slider v-model="basicSettings.volume" :min="0" :max="100" :format-tooltip="formatVolume"
                                @change="handleVolumeChange" style="width: 80%">
                            </el-slider>
                        </el-form-item>
                    </el-form>
                </el-card>

                <!-- 音频列表 -->
                <el-card class="audio-list-card" shadow="hover">
                    <div slot="header" class="audio-list-header">
                        <span class="audio-list-title">音频列表</span>
                    </div>
                    <el-table :data="audioList" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }"
                        border>
                        <el-table-column prop="id" label="序号" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="音频名称" min-width="150">
                        </el-table-column>
                        <el-table-column prop="duration" label="时长" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="size" label="大小" width="120" align="center">
                        </el-table-column>
                    </el-table>
                </el-card>

                <!-- 默认列表 -->
                <el-card class="default-list-card" shadow="hover">
                    <div slot="header" class="default-list-header">
                        <span class="default-list-title">默认列表</span>
                    </div>
                    <el-table :data="defaultList" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }"
                        border>
                        <el-table-column prop="id" label="序号" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="音频名称" min-width="150">
                        </el-table-column>
                        <el-table-column prop="type" label="类型" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="120" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <!-- 远程喊话控制面板 -->
                <el-card class="voice-control-card" shadow="hover">
                    <div slot="header" class="voice-control-header">
                        <span class="voice-control-title">远程喊话</span>
                    </div>
                    <div class="voice-control-content">
                        <div class="recorder-status">
                            <div class="status-indicator" :class="{ 'recording': isRecording }">
                                <i class="el-icon-microphone"></i>
                            </div>
                            <span class="status-text">{{ recordingStatus }}</span>
                        </div>
                        <div class="timer-display" v-if="isRecording">
                            {{ formatTime(recordingTime) }}
                        </div>
                        <div class="control-buttons">
                            <el-button type="primary" icon="el-icon-video-play" circle @click="startRecording"
                                :disabled="isRecording">
                            </el-button>
                            <el-button type="danger" icon="el-icon-video-pause" circle @click="stopRecording"
                                :disabled="!isRecording">
                            </el-button>
                            <el-button type="success" icon="el-icon-upload2" circle @click="uploadRecording"
                                :disabled="!hasRecording || isRecording">
                            </el-button>
                        </div>

                        <!-- 录音预览 -->
                        <div class="recording-preview" v-if="hasRecording">
                            <div class="preview-title">录音预览</div>
                            <div class="audio-player">
                                <audio ref="audioPlayer" :src="audioUrl" controls></audio>
                                <div class="preview-controls">
                                    <el-button type="text" icon="el-icon-refresh" @click="reRecord"
                                        :disabled="isRecording">
                                        重新录制
                                    </el-button>
                                </div>
                            </div>
                        </div>

                        <div class="recording-list" v-if="recordings.length > 0">
                            <div class="list-title">最近录音</div>
                            <el-scrollbar style="height: 200px">
                                <div v-for="(recording, index) in recordings" :key="index" class="recording-item">
                                    <span class="recording-name">{{ recording.name }}</span>
                                    <span class="recording-time">{{ recording.time }}</span>
                                    <el-button type="text" icon="el-icon-delete" @click="deleteRecording(index)">
                                    </el-button>
                                </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-card>

                <!-- 设备监测图表-->
                <el-row :gutter="20" v-if="deviceInfo.chartList.length > 0">
                    <el-col :xs="24" :sm="12" :md="12" :lg="24" :xl="12" v-for="(item, index) in deviceInfo.chartList"
                        :key="index">
                        <el-card shadow="hover" style="border-radius: 8px; margin-bottom: 20px">
                            <div ref="map" style="height: 230px; width: 185px; margin: 0 auto; margin-bottom: 15px">
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <!-- 固件版本查看对话框 -->
        <el-dialog :title="$t('device.running-status.866086-10')" :visible.sync="openVersion" width="550px"
            append-to-body>
            <el-form ref="firmwareForm" label-width="100px" :model="firmwareParams" :inline="true" :rules="rules">
                <el-form-item :label="$t('device.running-status.866086-38')" prop="firmwareType">
                    <el-select v-model="deviceInfo.firmwareType" :placeholder="$t('firmware.index.222541-51')"
                        @change="handleVersionInputChange" style="width: 350px" disabled>
                        <el-option v-for="item in firmwareTypeList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('device.running-status.866086-39')" prop="">
                    <el-input :placeholder="$t('device.running-status.866086-40')" v-model="deviceInfo.firmwareVersion"
                        style="width: 350px" disabled>
                        <template slot="prepend">Version</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-tooltip effect="dark" :content="$t('device.running-status.866086-41')" placement="top-start">
                    <el-button type="primary" @click="getLatestFirmware" :disabled="device.status !== 3">{{
                        $t('device.running-status.866086-42') }}</el-button>
                </el-tooltip>
                <el-button @click="cancel1">{{ $t('cancel') }}</el-button>
            </div>
        </el-dialog>

        <!-- 添加或修改产品固件对话框 -->
        <el-dialog :title="$t('device.running-status.866086-10')" :visible.sync="openFirmware" width="600px"
            append-to-body>
            <div v-if="firmware == null" style="text-align: center; font-size: 16px">
                <i class="el-icon-success" style="color: #67c23a"></i>
                {{ $t('device.running-status.866086-11') }}
            </div>
            <el-descriptions :column="1" border size="large"
                v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version"
                :labelStyle="{ width: '150px', 'font-weight': 'bold' }">
                <template slot="title">
                    <el-link icon="el-icon-success" type="success" :underline="false">{{
                        $t('device.running-status.866086-12') }}</el-link>
                </template>
                <el-descriptions-item :label="$t('device.running-status.866086-13')">{{ firmware.firmwareName
                }}</el-descriptions-item>
                <el-descriptions-item :label="$t('device.device-edit.148398-4')">{{ firmware.productName
                }}</el-descriptions-item>
                <el-descriptions-item :label="$t('device.device-edit.148398-12')">Version {{ firmware.version
                }}</el-descriptions-item>
                <el-descriptions-item :label="$t('device.running-status.866086-16')">
                    <el-link :href="getDownloadUrl(firmware.filePath)" :underline="false" type="primary">{{
                        getDownloadUrl(firmware.filePath) }}</el-link>
                </el-descriptions-item>
                <el-descriptions-item :label="$t('device.running-status.866086-17')">{{ firmware.remark
                }}</el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="otaUpgrade"
                    v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version">{{
                        $t('device.running-status.866086-18') }}</el-button>
                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getLatestFirmware } from '@/api/iot/firmware';
import { serviceInvoke, serviceInvokeReply } from '@/api/iot/runstatus';
import { getOrderControl } from '@/api/iot/control';

export default {
    name: 'running-status',
    props: {
        device: {
            type: Object,
            default: null,
        },
    },
    watch: {
        device: {
            handler(newVal) {
                if (newVal && newVal.deviceId != 0) {
                    this.deviceInfo = newVal;
                    this.updateDeviceStatus(this.deviceInfo);
                    this.$nextTick(function () {
                        this.MonitorChart();
                    });
                    if (this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.length > 0) {
                        this.deviceInfo.thingsModels = this.device.thingsModels.sort((a, b) => b.order - a.order);
                    }
                    if (this.deviceInfo.chartList && this.deviceInfo.chartList.length > 0) {
                        this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
                    }
                }
            },
        },
    },

    data() {
        return {
            title: '设备控制',
            shadowUnEnable: false,
            statusColor: {
                background: '#67C23A',
                color: '#fff',
                maxWidth: '200px',
            },
            firmware: {},
            openFirmware: false,
            loading: true,
            deviceInfo: {
                deviceId: 0,
                serialNumber: '',
                productId: '',
                productName: '',
                status: 0,
                isShadow: 0,
                rssi: 0,
                firmwareVersion: '',
                wirelessVersion: '',
                firmwareType: 1,
                protocolCode: '',
                thingsModels: [],
                chartList: [],
            },
            firmwareParams: {
                firmwareType: '',
                versionInput: '',
            },
            monitorChart: [
                {
                    chart: {},
                    data: {
                        id: '',
                        name: '',
                        value: '',
                    },
                },
            ],
            openVersion: false,
            firmwareTypeList: [
                {
                    label: this.$t('firmware.index.222541-52'),
                    value: 1,
                },
                {
                    label: 'HTTP',
                    value: 2,
                },
            ],
            rules: {
                firmwareType: [
                    {
                        required: true,
                        message: this.$t('device.running-status.866086-43'),
                        trigger: 'blur',
                    },
                ],
            },
            // 声卡相关数据
            basicSettings: {
                volume: 50
            },
            audioList: [
                { id: 1, name: '音频1', duration: '00:30', size: '2.5MB' },
                { id: 2, name: '音频2', duration: '01:15', size: '3.8MB' },
                { id: 3, name: '音频3', duration: '00:45', size: '2.1MB' }
            ],
            defaultList: [
                { id: 1, name: '默认音频1', type: '系统', status: '启用' },
                { id: 2, name: '默认音频2', type: '用户', status: '启用' },
                { id: 3, name: '默认音频3', type: '系统', status: '禁用' }
            ],
            // 录音相关数据
            isRecording: false,
            recordingTime: 0,
            recordingStatus: '准备就绪',
            hasRecording: false,
            mediaRecorder: null,
            audioChunks: [],
            recordings: [],
            timer: null,
            audioUrl: null,
        };
    },
    mounted() {
        if (this.device && this.device.deviceId) {
            this.handleDeviceChange(this.device);
            this.initDataStatus();
            this.initData();
        }
    },

    methods: {
        // 保留原有的设备状态相关方法
        handleDeviceChange(device) {
            if (device && device.deviceId != 0) {
                const { firmwareVersion, wirelessVersion, firmwareType, ...res } = device;
                const data = {
                    version: firmwareType === 1 ? firmwareVersion : wirelessVersion,
                    firmwareType,
                    ...res,
                };
                this.deviceInfo = data;
                this.updateDeviceStatus(this.deviceInfo);
                this.$nextTick(() => {
                    this.MonitorChart();
                });
                if (this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.length > 0) {
                    this.deviceInfo.thingsModels = this.deviceInfo.thingsModels.sort((a, b) => b.order - a.order);
                }
                if (this.deviceInfo.chartList && this.deviceInfo.chartList.length > 0) {
                    this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
                }
            }
        },

        // 声卡特有方法
        formatVolume(val) {
            return val + '%';
        },

        handleVolumeChange(val) {
            // 处理音量变化
            console.log('音量变化:', val);
            // TODO: 调用相应的API更新设备音量
        },

        // 保留其他必要的方法
        initData() {
            this.$busEvent.$on('updateData', (params) => {
                this.updateParam(params);
            });
        },

        initDataStatus() {
            this.$busEvent.$on('updateStatus', (status) => {
                this.updateStatus(status);
            });
        },

        updateStatus(status) {
            let { serialNumber, productId, data } = status;
            if (data) {
                if (this.deviceInfo.serialNumber == serialNumber) {
                    this.deviceInfo.status = data.status;
                    this.deviceInfo.isShadow = data.isShadow;
                    this.deviceInfo.rssi = data.rssi;
                    this.updateDeviceStatus(this.deviceInfo);
                }
            }
        },

        updateDeviceStatus(device) {
            if (device.status == 3) {
                this.statusColor.background = '#12d09f';
                this.title = this.$t('device.running-status.866086-26');
                this.shadowUnEnable = false;
            } else {
                if (device.isShadow == 1) {
                    this.statusColor.background = '#486FF2';
                    this.title = this.$t('device.running-status.866086-27');
                    this.shadowUnEnable = false;
                } else {
                    this.statusColor.background = '#909399';
                    this.title = this.$t('device.running-status.866086-28');
                    this.shadowUnEnable = true;
                }
            }
            this.$emit('statusEvent', this.deviceInfo.status);
        },

        // 保留固件更新相关方法
        viewVersion() {
            this.openVersion = true;
            this.firmwareParams.firmwareType = 1;
            this.firmwareParams.versionInput = '';
            this.handleVersionInputChange();
        },

        handleVersionInputChange() {
            if (this.firmwareParams.firmwareType == 1) {
                this.firmwareParams.versionInput = 'Version' + this.device.firmwareVersion;
            } else {
                this.firmwareParams.versionInput = 'Version' + this.device.wirelessVersion;
            }
        },

        cancel1() {
            this.openVersion = false;
        },

        getLatestFirmware() {
            const { deviceId, firmwareType } = this.deviceInfo;
            getLatestFirmware(deviceId, firmwareType).then((response) => {
                if (response.code === 200) {
                    this.firmware = response.data;
                    this.openFirmware = true;
                }
            });
        },

        cancel() {
            this.openFirmware = false;
        },

        getDownloadUrl(path) {
            return window.location.origin + process.env.VUE_APP_BASE_API + path;
        },

        MonitorChart() {
            for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
                this.monitorChart[i] = {
                    chart: this.$echarts.init(this.$refs.map[i]),
                    data: {
                        id: this.deviceInfo.chartList[i].id,
                        name: this.deviceInfo.chartList[i].name,
                        value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
                    },
                };
                var option;
                option = {
                    tooltip: {
                        formatter: ' {b} <br/> {c}' + this.deviceInfo.chartList[i].datatype.unit,
                    },
                    series: [
                        {
                            name: this.deviceInfo.chartList[i].datatype.type,
                            type: 'gauge',
                            min: this.deviceInfo.chartList[i].datatype.min,
                            max: this.deviceInfo.chartList[i].datatype.max,
                            colorBy: 'data',
                            splitNumber: 10,
                            radius: '100%',
                            splitLine: {
                                distance: 4,
                            },
                            axisLabel: {
                                fontSize: 10,
                                distance: 10,
                            },
                            axisTick: {
                                distance: 4,
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 8,
                                    color: [
                                        [0.2, '#409EFF'],
                                        [0.8, '#12d09f'],
                                        [1, '#F56C6C'],
                                    ],
                                    opacity: 0.3,
                                },
                            },
                            pointer: {
                                icon: 'triangle',
                                length: '60%',
                                width: 7,
                            },
                            progress: {
                                show: true,
                                width: 8,
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value}' + ' ' + this.deviceInfo.chartList[i].datatype.unit,
                                offsetCenter: [0, '80%'],
                                fontSize: 20,
                            },
                            data: [
                                {
                                    value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
                                    name: this.deviceInfo.chartList[i].name,
                                },
                            ],
                            title: {
                                offsetCenter: [0, '115%'],
                                fontSize: 16,
                            },
                        },
                    ],
                };
                option && this.monitorChart[i].chart.setOption(option);
            }
        },

        // 录音相关方法
        async startRecording() {
            if (this.isRecording) return;

            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                this.mediaRecorder = new MediaRecorder(stream);
                this.audioChunks = [];

                this.mediaRecorder.ondataavailable = (event) => {
                    this.audioChunks.push(event.data);
                };

                this.mediaRecorder.onstop = () => {
                    const audioBlob = new Blob(this.audioChunks, { type: 'audio/mp3' });
                    this.hasRecording = true;
                    this.recordingStatus = '录音完成';
                    // 创建音频预览URL
                    this.audioUrl = URL.createObjectURL(audioBlob);
                };

                // 设置数据收集间隔为100ms
                this.mediaRecorder.start(100);
                this.isRecording = true;
                this.recordingStatus = '正在录音...';
                this.recordingTime = 0;

                // 开始计时
                this.timer = setInterval(() => {
                    this.recordingTime++;
                }, 1000);
            } catch (error) {
                this.$message.error('无法访问麦克风');
                console.error('录音错误:', error);
            }
        },

        stopRecording() {
            if (this.mediaRecorder && this.isRecording) {
                this.mediaRecorder.stop();
                this.isRecording = false;
                clearInterval(this.timer);

                // 停止所有音轨
                this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
            }
        },

        formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
        },

        reRecord() {
            // 释放之前的音频URL
            if (this.audioUrl) {
                URL.revokeObjectURL(this.audioUrl);
                this.audioUrl = null;
            }
            this.hasRecording = false;
            this.audioChunks = [];
            this.recordingStatus = '准备就绪';
            this.recordingTime = 0;  // 重置录音时长
        },

        async uploadRecording() {
            if (!this.hasRecording) return;

            try {
                const audioBlob = new Blob(this.audioChunks, { type: 'audio/mp3' });
                const formData = new FormData();
                formData.append('file', audioBlob, `recording_${Date.now()}.mp3`);

                // TODO: 替换为实际的上传API
                // const response = await uploadFile(formData);

                this.$message.success('上传成功');
                this.recordings.unshift({
                    name: `录音_${this.formatTime(this.recordingTime)}`,
                    time: new Date().toLocaleString()
                });

                // 重置录音状态
                this.reRecord();
            } catch (error) {
                this.$message.error('上传失败');
                console.error('上传错误:', error);
            }
        },

        deleteRecording(index) {
            this.recordings.splice(index, 1);
        }
    },
};
</script>

<style lang="scss" scoped>
.running-status {
    padding: 20px;

    .status-col {
        .title {
            line-height: 28px;
            font-size: 16px;
        }
    }

    .mode-section {
        margin-bottom: 30px;
    }

    .mode-card {
        margin-bottom: 20px;
        transition: all 0.3s;
        padding: 20px;

        &:hover {
            transform: translateY(-5px);
        }

        .mode-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            i,
            .svg-icon {
                font-size: 20px;
                margin-right: 8px;
                color: #409EFF;
            }

            .mode-title {
                font-size: 16px;
                font-weight: bold;
                color: #303133;
            }
        }

        .mode-content {
            text-align: center;
            padding: 10px 0;

            .title {
                font-size: 16px;
                font-weight: bold;
            }
        }
    }

    .settings-card,
    .audio-list-card,
    .default-list-card {
        margin-bottom: 20px;
        transition: all 0.3s;

        &:hover {
            transform: translateY(-5px);
        }

        .settings-header,
        .audio-list-header,
        .default-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .settings-title,
            .audio-list-title,
            .default-list-title {
                font-size: 16px;
                font-weight: bold;
                color: #303133;
            }
        }
    }

    .el-table {
        margin-top: 15px;
    }

    .el-slider {
        margin-top: 10px;
    }
}

.voice-control-card {
    margin-bottom: 20px;
    transition: all 0.3s;

    &:hover {
        transform: translateY(-5px);
    }

    .voice-control-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .voice-control-title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }

    .voice-control-content {
        padding: 20px;
        text-align: center;

        .recorder-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;

            .status-indicator {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #f4f4f5;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;
                transition: all 0.3s;

                i {
                    font-size: 30px;
                    color: #909399;
                }

                &.recording {
                    background: #fef0f0;
                    animation: pulse 1.5s infinite;

                    i {
                        color: #f56c6c;
                    }
                }
            }

            .status-text {
                font-size: 14px;
                color: #606266;
            }
        }

        .timer-display {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 20px;
        }

        .control-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;

            .el-button {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
        }

        .recording-preview {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;

            .preview-title {
                font-size: 14px;
                color: #606266;
                margin-bottom: 10px;
                text-align: left;
            }

            .audio-player {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;

                audio {
                    width: 100%;
                    height: 40px;
                }

                .preview-controls {
                    display: flex;
                    justify-content: center;
                    margin-top: 5px;

                    .el-button {
                        padding: 8px 15px;

                        i {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }

        .recording-list {
            text-align: left;
            border-top: 1px solid #ebeef5;
            padding-top: 15px;

            .list-title {
                font-size: 14px;
                color: #606266;
                margin-bottom: 10px;
            }

            .recording-item {
                display: flex;
                align-items: center;
                padding: 8px 0;
                border-bottom: 1px solid #ebeef5;

                .recording-name {
                    flex: 1;
                    font-size: 14px;
                    color: #303133;
                }

                .recording-time {
                    font-size: 12px;
                    color: #909399;
                    margin-right: 10px;
                }
            }
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.4);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
    }
}
</style>