<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";
import { getLocal } from "@/common/js/utils";
export default {
    setup(props, { emit }) {
        const languageName = ref(getLocal("curLang"));

        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(languageName.value === 'zh' ? [
            { text: '(UTC-11:00)协调世界时-11', value: 'Pacific/Pago_Pago' },
            { text: '(UTC-10:00)阿留申群岛', value: 'Pacific/Honolulu' },
            { text: '(UTC-09:30)马克萨斯群岛', value: 'Pacific/Marquesas' },
            { text: '(UTC-09:00)阿拉斯加', value: 'America/Anchorage' },
            { text: '(UTC-08:00)太平洋时间(美国和加拿大)', value: 'America/Los_Angeles' },
            { text: '(UTC-07:00)山地时间(美国和加拿大)', value: 'America/Denver' },
            { text: '(UTC-06:00)中部时间(美国和加拿大)', value: 'America/Chicago' },
            { text: '(UTC-05:00)东部时间(美国和加拿大)', value: 'America/New_York' },
            { text: '(UTC-04:00)大西洋时间(加拿大)', value: 'America/Caracas' },
            { text: '(UTC-03:30)纽芬兰', value: 'America/St_Johns' },
            { text: '(UTC-03:00)巴西利亚，蒙德维的亚', value: 'America/Sao_Paulo' },
            { text: '(UTC-02:00)格陵兰', value: 'Atlantic/South_Georgia' },
            { text: '(UTC-01:00)佛得角群岛', value: 'Atlantic/Cape_Verde' },
            { text: '(UTC+00:00)伦敦，里斯本，都柏林', value: 'Europe/London' },
            { text: '(UTC+01:00)巴黎，哥本哈根，罗马', value: 'Europe/Paris' },
            { text: '(UTC+02:00)雅典，耶路撒冷，开罗', value: 'Europe/Helsinki' },
            { text: '(UTC+03:00)莫斯科，大马士革，科威特', value: 'Europe/Moscow' },
            { text: '(UTC+03:30)德黑兰', value: 'Asia/Tehran' },
            { text: '(UTC+04:00)埃里温，路易港', value: 'Asia/Dubai' },
            { text: '(UTC+04:30)喀布尔', value: 'Asia/Kabul' },
            { text: '(UTC+05:00)阿斯塔纳，伊斯兰堡', value: 'Asia/Karachi' },
            { text: '(UTC+05:30)孟买，新德里', value: 'Asia/Kolkata' },
            { text: '(UTC+05:45)加德满都', value: 'Asia/Kathmandu' },
            { text: '(UTC+06:00)比什凯克，达卡', value: 'Asia/Bishkek' },
            { text: '(UTC+06:30)仰光', value: 'Asia/Yangon' },
            { text: '(UTC+07:00)科布多，曼谷，河内', value: 'Asia/Bangkok' },
            { text: '(UTC+08:00)北京，乌鲁木齐', value: 'Asia/Shanghai' },
            { text: '(UTC+08:45)尤克拉', value: 'Australia/Eucla' },
            { text: '(UTC+09:00)大阪，东京，首尔', value: 'Asia/Tokyo' },
            { text: '(UTC+09:30)达尔文，阿德莱德', value: 'Australia/Adelaide' },
            { text: '(UTC+10:00)悉尼，关岛，霍巴特', value: 'Australia/Sydney' },
            { text: '(UTC+10:30)豪勋爵岛', value: 'Australia/Lord_Howe' },
            { text: '(UTC+11:00)马加丹，萨哈林', value: 'Asia/Magadan' },
            { text: '(UTC+12:00)斐济，奥克兰', value: 'Pacific/Auckland' },
            { text: '(UTC+12:45)查塔姆群岛', value: 'Pacific/Chatham' },
            { text: '(UTC+13:00)努库阿洛法', value: 'Pacific/Tongatapu' },
            { text: '(UTC+14:00)圣诞岛', value: 'Pacific/Kiritimati' }
        ] : [
            { text: '(UTC-11:00)Coordinated Universal Time-11', value: 'Pacific/Pago_Pago' },
            { text: '(UTC-10:00)Aleutian Islands', value: 'Pacific/Honolulu' },
            { text: '(UTC-09:30)Marquesas Islands', value: 'Pacific/Marquesas' },
            { text: '(UTC-09:00)Alaska', value: 'America/Anchorage' },
            { text: '(UTC-08:00)Pacific Time(US & Canada)', value: 'America/Los_Angeles' },
            { text: '(UTC-07:00)Mountain Time(US & Canada)', value: 'America/Denver' },
            { text: '(UTC-06:00)Central Time(US & Canada)', value: 'America/Chicago' },
            { text: '(UTC-05:00)Eastern Time(US & Canada)', value: 'America/New_York' },
            { text: '(UTC-04:00)Atlantic Time (Canada)', value: 'America/Caracas' },
            { text: '(UTC-03:30)Newfoundland', value: 'America/St_Johns' },
            { text: '(UTC-03:00)Brasilia, Montevideo', value: 'America/Sao_Paulo' },
            { text: '(UTC-02:00)Greenland', value: 'Atlantic/South_Georgia' },
            { text: '(UTC-01:00)Cape Verde Islands', value: 'Atlantic/Cape_Verde' },
            { text: '(UTC+00:00)London, Lisbon, Dublin', value: 'Europe/London' },
            { text: '(UTC+01:00)Paris, Copenhagen, Rome', value: 'Europe/Paris' },
            { text: '(UTC+02:00)Athens, Jerusalem, Cairo', value: 'Europe/Helsinki' },
            { text: '(UTC+03:00)Moscow, Damascus, Kuwait', value: 'Europe/Moscow' },
            { text: '(UTC+03:30)Tehran', value: 'Asia/Tehran' },
            { text: '(UTC+04:00)Yerevan, Port Louis', value: 'Asia/Dubai' },
            { text: '(UTC+04:30)Kabul', value: 'Asia/Kabul' },
            { text: '(UTC+05:00)Astana, Islamabad', value: 'Asia/Karachi' },
            { text: '(UTC+05:30)Mumbai, New Delhi', value: 'Asia/Kolkata' },
            { text: '(UTC+05:45)Kathmandu', value: 'Asia/Kathmandu' },
            { text: '(UTC+06:00)Bishkek, Dhaka', value: 'Asia/Bishkek' },
            { text: '(UTC+06:30)Yangon', value: 'Asia/Yangon' },
            { text: '(UTC+07:00)Kobdo, Bangkok, Hanoi', value: 'Asia/Bangkok' },
            { text: '(UTC+08:00)Beijing, Urumqi', value: 'Asia/Shanghai' },
            { text: '(UTC+08:45)Eucla', value: 'Australia/Eucla' },
            { text: '(UTC+09:00)Osaka, Tokyo, Seoul', value: 'Asia/Tokyo' },
            { text: '(UTC+09:30)Darwin, Adelaide', value: 'Australia/Adelaide' },
            { text: '(UTC+10:00)Sydney, Guam, Hobart', value: 'Australia/Sydney' },
            { text: '(UTC+10:30)Lord Howe Island', value: 'Australia/Lord_Howe' },
            { text: '(UTC+11:00)Magadan, Sakhalin', value: 'Asia/Magadan' },
            { text: '(UTC+12:00)Fiji, Auckland', value: 'Pacific/Auckland' },
            { text: '(UTC+12:45)Chatham Islands', value: 'Pacific/Chatham' },
            { text: '(UTC+13:00)Nuku\'alofa', value: 'Pacific/Tongatapu' },
            { text: '(UTC+14:00)Christmas Island', value: 'Pacific/Kiritimati' }
        ]);


        // 选择完成时
        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>