<template>
    <!-- 时区弹窗 -->
    <van-popup v-model:show="timezonePopshow" round position="bottom">
        <van-cascader @close="timezonePopshow = false" v-model="cascaderValue" :title="$t('kTimezone.selectTimezone')"
            :options="options" @finish="onFinish"/>
    </van-popup>
</template>

<script>
import { ref, watch } from "vue";
export default {
    setup(props, { emit }) {

        const timezonePopshow = ref(false);
        const tzFieldValue = ref('');
        const cascaderValue = ref('');
        const selectedTimezone = ref(props.selectId || ""); // 存储选中的时区值
        const selectId = ref(props.selectId || "");
        // const selectId = ref("");
        const init = (id) => {
            selectId.value = id;
            // 如果有选中的时区
            if (selectId.value) {
                selectTimezone();
            }
        };

        const options = ref([
            { text: '上海(UTC+8)', value: 'Asia/Shanghai' },
            { text: '東京(UTC+9)', value: 'Asia/Tokyo' },
            { text: 'NewYork(UTC-5)', value: 'America/New_York' },
            { text: 'Paris(UTC+1)', value: 'Europe/Paris' },
            { text: 'London(UTC+0)', value: 'Europe/London' },
            { text: 'Madrid(UTC+1)', value: 'Europe/Madrid' },
            { text: 'São Paulo(UTC-3)', value: 'America/Sao_Paulo' },
            { text: 'Vancouver(UTC-8)', value: 'America/Vancouver' },
            { text: 'Edmonton(UTC-7)', value: 'America/Edmonton' },
            { text: 'Winnipeg(UTC-6)', value: 'America/Winnipeg' },
            { text: 'Toronto(UTC-5)', value: 'America/Toronto' },
            { text: 'Moncton(UTC-4)', value: 'America/Moncton' }
        ]);


        // 选择完成时
        const onFinish = ({ selectedOptions }) => {
            timezonePopshow.value = false;
            const selectName = selectedOptions.map((option) => option.text).join("/");
            const selectValue = selectedOptions[selectedOptions.length - 1].value;
            selectedTimezone.value = selectValue; // 更新本地变量
            emit("timezonepopfinish", { selectName, selectId: selectValue });
        };
        // 打开弹窗
        const openPopup = () => {
            timezonePopshow.value = true;
        };
        // 获取选中的时区
        const selectTimezone = () => {
            const selectedTimezoneValue = selectId.value;
            if (selectedTimezoneValue) {
                const option = options.value.find(item => item.value === selectedTimezoneValue);
                if (option) {
                    selectedTimezone.value = option.value; // 初始化本地变量
                    emit('gettimezone', option.text); // 发送 text 值
                }
            }
        };
        watch(selectedTimezone, (newValue) => {
            if (newValue) {
                emit('gettimezone', options.value.find(o => o.value === newValue).text);
            }
        });

        return {
            timezonePopshow,
            options,
            onFinish,
            cascaderValue,
            tzFieldValue,
            init,
            openPopup,
            selectTimezone
        };
    },
};
</script>

<style lang="less" scoped></style>