<template>
    <Header :title="currentTitle"></Header>
    <van-pull-refresh v-model="loading" success-text="刷新成功" @refresh="onRefresh">
        <div class="content">
            <div class="home">
                <p class="title">数显设置</p>
                <van-cell-group inset>
                    <van-field v-model.number="brightness" type="number" label="亮度" placeholder="请输入0-100" Max="100" />

                    <van-slider v-model.number="brightness" type="number" :step="1" :max="100" :min="0"
                        @change="onBrightnessChange" class="slider" />


                </van-cell-group>
                <van-cell is-link title="正常颜色" @click="showNormalColor = true">
                    {{ selectedNormalColor }}
                </van-cell>
                <van-action-sheet v-model:show="showNormalColor" :actions="actions" @select="onSelectNormalColor" />

                <van-cell is-link title="超速颜色" @click="showOverSpeedColor = true">
                    {{ selectedOverSpeedColor }}
                </van-cell>
                <van-action-sheet v-model:show="showOverSpeedColor" :actions="actions"
                    @select="onSelectOverSpeedColor" />

                <van-cell title="正常闪烁">
                    <van-switch v-model="checked" />
                </van-cell>
                <van-cell title="超速闪烁">
                    <van-switch v-model="showOverSpeedBlink" />
                </van-cell>

                <van-field v-model="fieldValue" is-link readonly label="闪烁速度" placeholder="请输入"
                    @click="showPicker = true" />
                <van-popup v-model:show="showPicker" round position="bottom">
                    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
                </van-popup>

                <div class="button-container">
                    <van-button type="primary" size="large" @click="uploadSettings">上传</van-button>
                </div>
            </div>
            <div class="home">
                <p class="title" style="pointer-events: none;">事件设置</p>
                <div class="slider-container">
                    <p class="set-title">触发阈值</p>
                    <van-slider v-model="value" range @change="onChange" :min="0" :max="160" />
                </div>
                <div class="input-container">
                    <van-field v-model="value[0]" type="number" label="最小值" placeholder="最小值" />
                    <van-field v-model="value[1]" type="number" label="最大值" placeholder="最大值" />
                </div>
                <div class="slider-container">
                    <p class="set-title">超速阈值</p>
                    <van-slider v-model="overSpeedValue" range @change="onOverSpeedChange" :min="0" :max="160" />
                </div>
                <div class="input-container">
                    <van-field v-model="overSpeedValue[0]" type="number" label="最小值" placeholder="最小值" />
                    <van-field v-model="overSpeedValue[1]" type="number" label="最大值" placeholder="最大值" />
                </div>
                <div class="control">
                    <p class="title-control">双色屏控制</p>
                    <van-switch v-model="screencontrol" class="switch-control" />
                </div>
                <div class="control">
                    <p class="title-control">设备地址</p>
                    <van-field v-model="addr" placeholder="请输入设备地址" />
                </div>
                <div v-if="!screencontrol">
                    <van-button round type="success" size="large" @click="uploadthreshold">设置</van-button>
                </div>
                <div v-if="screencontrol" class="control">
                    <p class="title-control">事件列表</p>
                    <van-icon name="plus" @click="addEvent" />
                </div>
                <div v-if="screencontrol">
                    <div v-for="(event, index) in events" :key="index" :ref="'event' + index" class="event-item">
                        <van-swipe-cell :right-width="65" @close="onClose">
                            <template v-slot:right>
                                <van-button square type="danger" @click="removeEvent(index)"
                                    class="delete-button">删除</van-button>
                            </template>
                            <van-cell is-link title="事件类型" v-model="event.type" @click="event.showTypePicker = true">
                                {{ event.type }}
                            </van-cell>
                            <van-field v-if="event.type === '其他'" v-model="event.code" label="事件编码"
                                placeholder="请输入事件编码" />
                            <!-- 改写 -->

                            <van-cell is-link title="事件来源" v-model="event.source"
                                @click="event.showsourcePicker = true">
                                {{ event.sourcename }}
                            </van-cell>
                            <van-field v-if="event.sourcename === '其他'" v-model="event.source" label="来源编码"
                                placeholder="请输入事件来源" />
                            <!-- 改写 -->
                            <van-field v-model="event.priority" label="优先级" placeholder="请输入优先级" />
                            <van-field v-model="event.showItem" is-link readonly label="显示节目" placeholder="选择显示节目"
                                @click="showItemPicker = index" />
                            <van-field v-model="event.showDuration" label="显示时长" placeholder="请输入显示时长" />
                            <van-field v-model="event.outputPin" is-link readonly label="输出引脚" placeholder="请输入输出引脚"
                                @click="showpinpicker = index" />
                            <van-cell v-if="event.outputPin !== '-1'" is-link title="输出电平" v-model="event.outlevel"
                                @click="event.showoutlevel = true">
                                {{ event.outlevel }}
                            </van-cell>


                        </van-swipe-cell>

                        <van-action-sheet v-model:show="event.showoutlevel" :actions="levelactions"
                            @select="onSelectlevel(event, $event)" />


                        <van-action-sheet v-model:show="event.showTypePicker" :actions="typeaction"
                            @select="onSelecttype(event, $event)" />

                        <!-- //改写 -->

                        <van-action-sheet v-model:show="event.showsourcePicker" :actions="sourceaction"
                            @select="onSelectsource(event, $event)" />

                        <!-- //改写 -->

                        <van-popup v-model="showItemPicker" :show="showItemPicker === index" round position="bottom">
                            <van-picker :columns="progremcolums" @cancel="() => showItemPicker = -1"
                                @confirm="value => onConfirmShowItem(index, value)" />
                        </van-popup>

                        <van-popup v-model="showpinpicker" :show="showpinpicker === index" round position="bottom">
                            <van-picker :columns="outpincolumns" @cancel="() => showpinpicker = -1"
                                @confirm="value => onConfirmoutpin(index, value)" />
                        </van-popup>

                    </div>
                </div>

                <div v-if="screencontrol && events.length > 0" class="button-container">
                    <van-button round type="success" size="large" @click="uploadEventSettings">设置</van-button>
                </div>

            </div>
        </div>
    </van-pull-refresh>
    <Footer></Footer>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Footer from "../../components/Footer.vue";
import Header from "../../components/Header.vue";
import '@vant/touch-emulator';
import * as mqtt from 'mqtt/dist/mqtt.min';
import axios from 'axios';
import { connectMQTT, client } from "../../components/MQTT/mqttclient";
// import { showToast } from 'vant';

export default {
    components: {
        Footer,
        Header
    },
    data() {
        return {
            currentTitle: '车牌识别',
        };
    },

    setup() {
        const jsonId = ref(1); // 初始 JSON ID
        const isLocal = ref(true); // 定义 isLocal 变量并初始化为 false
        const brightness = ref(0);
        const fieldValue = ref('');
        const loading = ref(false);
        const selectedNormalColor = ref('');
        const selectedOverSpeedColor = ref('');
        const showNormalColor = ref(false);
        const showOverSpeedColor = ref(false);
        const checked = ref(false);
        const showOverSpeedBlink = ref(false);
        const screencontrol = ref(false);
        const showPicker = ref(false);
        const value = ref([10, 50]);
        const overSpeedValue = ref([60, 160]);
        const events = ref([]);
        const showtype = ref(false);
        const addr = ref('');
        const showItemPicker = ref(-1);
        const showpinpicker = ref(-1);
        const outlevel = ref(false);
        const typeaction = [
            { name: '默认显示', code: 0 },
            { name: '雷达触发(RS485 雷达)', code: 1 },
            { name: '雷达超速(RS485 雷达)', code: 2 },
            { name: '车牌触发(摄像头)', code: 3 },
            { name: '车牌超速(摄像头)', code: 4 },
            { name: '行人检测(相机)', code: 5 },
            { name: 'IN1下降沿', code: 0x51 },
            { name: 'IN2上升沿', code: 0x52 },
            { name: 'IN3下降沿', code: 0x53 },
            { name: 'IN4上升沿', code: 0x54 },
            { name: 'IN1低电平', code: 0x55 },
            { name: 'IN2高电平', code: 0x56 },
            { name: 'IN3低电平', code: 0x57 },
            { name: 'IN4高电平', code: 0x58 },
            { name: '其他', code: -1 },
        ];
        const sourceaction = [
            { name: '本台设备', code: 0 },
            { name: '任意设备（不包含本设备）', code: 254 },
            { name: '任意设备', code: 255 },
            { name: '其他', code: 1 },
        ];
        const levelactions = [
            { name: '高(0)', value: 0 },
            { name: '低(1)', value: 1 },
        ];

        const onChange = (value) => showToast('当前值：' + value);
        const onOverSpeedChange = (value) => showToast('当前超速值：' + value);

        const actions = [
            { name: '红', value: 1 },
            { name: '绿', value: 2 },
            { name: '黄', value: 3 },
        ]
        const columns = [
            { text: '1', value: '1' },
            { text: '2', value: '2' },
            { text: '3', value: '3' },
            { text: '4', value: '4' },
            { text: '5', value: '5' },
        ];
        const progremcolums = [
            { text: '节目0', value: '0' },
            { text: '节目1', value: '1' },
            { text: '节目2', value: '2' },
            { text: '节目3', value: '3' },
            { text: '节目4', value: '4' },
            { text: '节目5', value: '5' },
            { text: '节目6', value: '6' },
            { text: '节目7', value: '7' },
            { text: '节目8', value: '8' },
            { text: '节目9', value: '9' },
        ];
        const outpincolumns = [
            { text: '关闭(-1)', value: '-1' },
            { text: '引脚1(0)', value: '0' },
            { text: '引脚2(1)', value: '1' },
        ];
        // 定义检查环境函数
        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;
            }
        };
        const onConfirmShowItem = (index, value) => {
            // events.value[index].showItem = value.selectedOptions[0].text;
            events.value[index].showItem = value.selectedOptions[0].value;
            showItemPicker.value = -1;
        };
        const onConfirmoutpin = (index, value) => {
            // events.value[index].outputPin = value.selectedOptions[0].text;
            events.value[index].outputPin = value.selectedOptions[0].value;
            showpinpicker.value = -1;
        };
        const onSelectNormalColor = (item) => {
            showNormalColor.value = false;
            selectedNormalColor.value = item.name;
            showToast(item.name);
        };
        const onSelectOverSpeedColor = (item) => {
            showOverSpeedColor.value = false;
            selectedOverSpeedColor.value = item.name;
            showToast(item.name);
        };

        const onConfirm = ({ selectedOptions }) => {
            showPicker.value = false;
            fieldValue.value = selectedOptions[0].text;
        };
        const onSelecttype = (event, selectedItem) => {
            event.type = selectedItem.name; // 保存选择的事件类型名称
            event.code = selectedItem.code.toString(); // 保存事件编码
            event.showTypePicker = false; // 收起选择框
            showToast(event.type); // 显示选择的事件类型名称
        };
        //
        const onSelectsource = (event, selectedItem) => {
            event.sourcename = selectedItem.name; // 保存选择的事件类型名称
            event.source = selectedItem.code.toString(); // 保存事件编码
            event.showsourcePicker = false; // 收起选择框
            showToast(event.sourcename); // 显示选择的事件类型名称
        };


        const onSelectlevel = (event, selectedItem) => {
            event.outlevelname = selectedItem.name; // 保存选择的事件类型
            event.outlevel = selectedItem.value.toString(); // 保存事件编码
            event.showoutlevel = false; // 收起选择框
            showToast(event.outlevelname);
        };

        // 下拉刷新事件处理函数
        const onRefresh = () => {
            loading.value = true; // 开始刷新时设置 loading 为 true
            sendRequest();
        };

        const sendRequest = () => {
            const requestload = {
                JSON_id: jsonId.value,
                board_id: 104,
                LPR_card: {
                    get_seg_cfg: 1,
                    get_cfg: 1,
                }
            };
            console.log(requestload);

            let timeoutHandler;

            if (isLocal.value) {
                axios.post(`/communication`, requestload, {
                    headers: {
                        "content-type": "application/json"
                    },
                    timeout: 10000 // Set timeout to 10 seconds for Axios
                })
                    .then(response => {
                        clearTimeout(timeoutHandler); // Clear the timeout if the request succeeds
                        console.log('Response data:', response.data);
                        parseAndFillData(response.data);
                        showToast('刷新成功');
                        jsonId.value++;
                        loading.value = false; // End loading
                    })
                    .catch(error => {
                        clearTimeout(timeoutHandler); // Clear the timeout on error
                        if (error.code === 'ECONNABORTED') {
                            console.error('Request timeout:', error);
                            showToast('刷新超时');
                        } else {
                            console.error('Upload error:', error);
                            showToast('刷新失败');
                        }
                        jsonId.value++;
                        loading.value = false; // End loading
                    });

                // Set manual timeout to handle cases where no response is received
                timeoutHandler = setTimeout(() => {
                    loading.value = false;
                    showToast('请求超时');
                }, 10000); // 10 seconds timeout

            } else {
                // Sending via MQTT
                MQTT_send(requestload);

                // Set a manual timeout for MQTT
                timeoutHandler = setTimeout(() => {
                    loading.value = false; // End loading if no response
                    showToast('请求超时'); // Display timeout message
                }, 10000); // 10 seconds timeout for MQTT
            }
        };



        const uploadSettings = () => {

            if (!brightness.value || !selectedNormalColor.value || !selectedOverSpeedColor.value || !fieldValue.value) {
                showToast('请填写完整数显信息');
                return;
            }
            const payload = {
                "JSON_id": jsonId.value,
                board_id: 104,
                LPR_card: {
                    seg_cfg: {
                        bright: parseInt(brightness.value),
                        trig_c: actions.findIndex(action => action.name === selectedNormalColor.value) + 1,
                        over_spd_c: actions.findIndex(action => action.name === selectedOverSpeedColor.value) + 1,
                        bk_trig_en: checked.value ? 1 : 0,
                        bk_over_spd_en: showOverSpeedBlink.value ? 1 : 0,
                        bk_spd: parseInt(fieldValue.value)
                    }
                }
            };

            console.log(JSON.stringify(payload)); // 打印构造的 JSON 数据
            if (isLocal.value) {
                // 在本地环境使用 Axios 发送请求
                console.log('axios发送');
                axios.post(`/communication`, payload, {
                    headers: {
                        "content-type": "application/json"
                    }
                })
                    .then(response => {
                        if (response.data.LPR_card.seg_cfg_ok === 1) {
                            showToast('事件设置已上传');

                        }
                        console.log(response.data);
                        jsonId.value++;
                    })
                    .catch(error => {
                        // 处理错误
                        // console.log(response.data);
                        console.error('Upload error:', error);
                        showToast('事件设置上传失败');
                        jsonId.value++;
                    });
            } else {
                jsonId.value++;
                // 在服务器环境使用 MQTT 发送请求
                console.log('mqtt发送');
                MQTT_send(payload);
                showToast("数显设置已上传")
            }
        };
        //阈值设置
        const uploadthreshold = () => {
            if (!addr.value) {
                showToast('请填写设备地址');
                return;
            }
            const threshold = {
                JSON_id: jsonId.value,
                board_id: 104,
                LPR_card: {
                    trig_cfg: {
                        trig_spd_L: parseInt(value.value[0]),
                        trig_spd_H: parseInt(value.value[1]),
                        lmt_spd_L: parseInt(overSpeedValue.value[0]),
                        lmt_spd_H: parseInt(overSpeedValue.value[1]),
                        screen_ctrl_en: screencontrol.value ? 1 : 0,
                        addr: parseInt(addr.value),
                    },
                },
            };
            console.log(JSON.stringify(threshold)); // 打印构造的 JSON 数据
            if (isLocal.value) {
                axios.post(`/communication`, threshold, {
                    headers: {
                        "content-type": "application/json"
                    }
                })
                    .then(response => {
                        console.log('Response data:', response.data);
                        showToast('设置成功');
                        jsonId.value++;
                    })
                    .catch(error => {
                        // 处理错误
                        console.error('Upload error:', error);
                        showToast('设置失败');
                        jsonId.value++;
                    });
            }
            else {
                MQTT_send(threshold);
                showToast("已发送设置")
            }
        };


        const uploadEventSettings = () => {
            for (const event of events.value) {
                if (!event.type || !event.code || !event.source || !event.priority || !event.showItem || !event.showDuration || !event.outputPin || !addr.value) {
                    showToast('请填写完整事件信息');
                    return;
                }
            }
            const eventPayload = {
                "JSON_id": jsonId.value,
                board_id: 104,
                LPR_card: {
                    trig_cfg: {
                        trig_spd_L: parseInt(value.value[0]),
                        trig_spd_H: parseInt(value.value[1]),
                        lmt_spd_L: parseInt(overSpeedValue.value[0]),
                        lmt_spd_H: parseInt(overSpeedValue.value[1]),
                        screen_ctrl_en: screencontrol.value ? 1 : 0,
                        addr: parseInt(addr.value),
                        event: events.value.map(event => ({
                            code: parseInt(event.code),
                            source: parseInt(event.source),
                            priority: parseInt(event.priority),
                            prg_num: parseInt(event.showItem),
                            prg_time: parseInt(event.showDuration),
                            output: parseInt(event.outputPin),
                            level: parseInt(event.outlevel)
                            // level: event.outlevel.value

                        }))
                    },
                },
            };
            console.log(JSON.stringify(eventPayload)); // 打印构造的 JSON 数据
            if (isLocal.value) {
                console.log('axios发送');
                // 在本地环境使用 Axios 发送请求
                axios.post(`/communication`, eventPayload, {
                    headers: {
                        "content-type": "application/json"
                    },
                })

                    .then(response => {
                        if (response.data.LPR_card.trig_cfg_ok === 1) {
                            showToast('事件设置已上传');
                        }
                        // showToast('事件设置已上传');
                        console.log(response.data);
                        jsonId.value++;

                    })
                    .catch(error => {
                        // 处理错误
                        console.error('Upload error:', error);
                        showToast('事件设置上传失败');
                        jsonId.value++;

                    });
            } else {
                console.log('mqtt发送');
                jsonId.value++;
                MQTT_send(eventPayload);
                showToast("已发送请求");
            }
        };
        //axios回收响应处理函数
        const parseAndFillData = (msg) => {
            if (msg.LPR_card) {
                const config = msg.LPR_card.seg_cfg;
                const trigCfg = msg.LPR_card.trig_cfg;

                // 回填数显设置的数据
                brightness.value = Number(msg.LPR_card.seg_cfg.bright);
                selectedNormalColor.value = actions.find(action => action.value === config.trig_c).name;
                selectedOverSpeedColor.value = actions.find(action => action.value === config.over_spd_c).name;
                checked.value = !!config.bk_trig_en;
                showOverSpeedBlink.value = !!config.bk_over_spd_en;
                fieldValue.value = config.bk_spd.toString();
                addr.value = trigCfg.addr;
                // 回填阈值设置的数据
                value.value = [trigCfg.trig_spd_L, trigCfg.trig_spd_H];
                overSpeedValue.value = [trigCfg.lmt_spd_L, trigCfg.lmt_spd_H]; 4
                screencontrol.value = !!trigCfg.screen_ctrl_en;

                // 回填事件列表的数据
                events.value = trigCfg.event.map(event => {
                    let eventType;
                    let eventsource;
                    switch (event.source) {
                        case 0:
                            eventsource = '本台设备';
                            break;
                        case 254:
                            eventsource = '除本身外任意设备';
                            break;
                        case 255:
                            eventsource = '任意设备';
                            break;
                        default:
                            eventsource = '其他';
                    }
                    switch (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 0x51:
                            eventType = 'IN1下降沿';
                            break;

                        case 0x52:
                            eventType = 'IN2上升沿';
                            break;

                        case 0x53:
                            eventType = 'IN3下降沿';
                            break;

                        case 0x54:
                            eventType = 'IN4上升沿';
                            break;

                        case 0x55:
                            eventType = 'IN1低电平';
                            break;
                        case 0x56:
                            eventType = 'IN2高电平';
                            break;
                        case 0x57:
                            eventType = 'IN3低电平';
                            break;
                        case 0x58:
                            eventType = 'IN4高电平';
                            break;
                        default:
                            eventType = '其他';
                    }
                    return {
                        type: eventType,
                        code: event.code.toString(),
                        source: event.source.toString(),
                        sourcename: eventsource,
                        priority: event.priority.toString(),
                        showItem: event.prg_num.toString(),
                        // showItem: programnum,
                        showDuration: event.prg_time.toString(),
                        outputPin: event.output.toString(),
                        outlevel: event.level.toString(),
                    };
                });

            }
        };
        const MQTT_send = (send_string) => {
            console.log("MQTT 发送:" + JSON.stringify(send_string));
            jsonId.value++;
            if (/xazn/.test(navigator.userAgent) || /uni-app/.test(navigator.userAgent)) {
                uni.postMessage({
                    data: {
                        str: JSON.stringify(send_string)
                    }
                });
            } else {
                window.parent.postMessage({ str: JSON.stringify(send_string) }, "*");
            }
        };

        const MQTT_recv = (string) => {
            loading.value = false;
            console.log("MQTT 接收的json:" + string);
            parseAndFillData(JSON.parse(string));
            // showToast('刷新成功');
            console.log('Received message:', string);
        };
        // 在组件挂载时建立 MQTT 连接
        onMounted(async () => {
            await checkEnvironment();
            console.log(isLocal.value);
            window.MQTT_recv = MQTT_recv;
            onRefresh();

        });


        onBeforeUnmount(() => {

        });
        const addEvent = () => {
            events.value.push({
                // pinname:'',
                // name:'',
                type: '',
                code: '',
                source: '',
                priority: '',
                showitem1: '',
                showItem: '',
                showDuration: '',
                outputPin: '',
                outputPin1: '',
                outlevel: '',
                outlevelname: '',
                sourcename: '',
                showTypePicker: false,
                showoutlevel: false,
            });
            showToast('添加成功');

        };

        const removeEvent = (index) => {
            events.value.splice(index, 1);
            uploadEventSettings();
        };
        const onClose = (position, instance) => {
            if (position === 'right') {
                instance.close();
            }
        };
        const onBrightnessChange = (value) => {
            brightness.value = Number(value);
            showToast('亮度值：' + value);
        };

        return {
            brightness,
            fieldValue,
            loading,
            showNormalColor,
            showOverSpeedColor,
            checked,
            showOverSpeedBlink,
            showPicker,
            actions,
            columns,
            onSelectNormalColor,
            onSelectOverSpeedColor,
            onConfirm,
            onRefresh,
            selectedNormalColor,
            selectedOverSpeedColor,
            value,
            onChange,
            overSpeedValue,
            onOverSpeedChange,
            screencontrol,
            events,
            addEvent,
            removeEvent,
            uploadSettings,
            showtype,
            onSelecttype,
            typeaction,
            onClose,
            onBrightnessChange,
            uploadEventSettings,
            parseAndFillData,
            checkEnvironment,
            isLocal,
            jsonId,
            addr,
            onConfirmShowItem,
            showItemPicker,
            progremcolums,
            onSelectlevel,
            levelactions,
            outlevel,
            showpinpicker,
            outpincolumns,
            onConfirmoutpin,
            sourceaction,
            onSelectsource,
            uploadthreshold,
            MQTT_send,
            MQTT_send
        };
    },
};
</script>

<style lang="less" scoped>
.home {
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #0668fc;
    margin: 100px 10px 20px;
    flex: 1;
}

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

.title-control {
    text-align: left;
    font-size: 15px;
    margin: 0;
    white-space: nowrap;

}

.content {
    min-height: 100vh;
    margin-bottom: 70px;
}

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

.set-title {
    font-size: 15px;
    margin-right: 10px;
    white-space: nowrap;
}

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

.slider-container {
    display: flex;
    align-items: center;
}

.control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.delete-button {
    align-items: right;
}

.input-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.footer-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.brightness {
    padding-left: 0px !important;
}

::v-deep .van-field__label,
::v-deep .van-cell__title {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
}

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

.event-item {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.delete-button {
    position: absolute;
    top: 50%;
    border-radius: 10px;
    // transform: translateY(-50%);
}

.control .van-field__label {
    white-space: nowrap;
}
</style>
