<template>
  <van-popup v-model:show="show" ref="drawerRef" position="left" :style="{ height: '100%' }">
    <div class="w-[300px] bg-white flex flex-col h-full">
      <div class="p-[12px] bg-[#f6f6f6] flex-1">
        <div class="bg-white rounded-control pl-[12px]">
          <!-- 顶部用户信息 -->
          <div
            class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
            <span class="text-[14px] text-[#333]">{{ t("home.drawer.account") }}</span>
            <span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
          </div>

          <!-- 中间功能入口（循环渲染） -->
          <div v-for="(item, index) in menuList" :key="index"
            class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0"
            @click="handleMenuClick(item)">
            <span class="text-[14px] text-[#333]">{{ item.label }}</span>
            <van-icon name="arrow" size="14" color="#ccc"></van-icon>
          </div>

          <div
            class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
            <span class="text-[14px] text-[#333]">{{ t("home.drawer.language") }}</span>
            <div class="flex items-center gap-3">
              <span v-for="lang in languageOptions" :key="lang.locale"
                class="text-[14px] transition-colors duration-200"
                :class="currentLocale === lang.locale ? 'text-[#00C853] font-medium' : 'text-[#666]'"
                @click="switchLanguage(lang.locale)">
                {{ t(lang.labelKey) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 底部退出按钮 -->
        <span class="flex items-center justify-center h-[42px] mt-[40px] bg-white text-[#333] rounded-[4px] border-none"
          @click="handleLogout">{{ t("home.drawer.logout") }}</span>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { computed, ref, defineEmits, defineExpose } from "vue";
import { useI18n } from "vue-i18n";
import { checkToken } from "@/hooks/useGoLogin";
import { getLoginUserPhone } from "@/api/login";
import { NOTICE_EVENT_LOGOUT } from "@/constants/constant";
import { getCurrentLocale, setLocale } from "@/i18n";
import { useAppStore } from "@/store";

const appStore = useAppStore();
const { t } = useI18n();
const drawerRef = ref(null);

// 监听抽屉显示事件
const show = ref(false);

const open = async () => {
  await checkToken();

  show.value = true;

  try {
    const res = await getLoginUserPhone();

    if (res.code === 0) {
      userInfo.value.phone = res.data;
    }
  } catch (error) {
    console.warn("获取登录用户手机号失败:", error);
  }
};

// 监听抽屉隐藏事件
const close = () => show.value = false;

const languageOptions = [
  { locale: "zh-CN", labelKey: "common.locales.zhShort" },
  { locale: "en-US", labelKey: "common.locales.enShort" },
  { locale: "th-TH", labelKey: "common.locales.thShort" },
];
const currentLocale = computed(() => getCurrentLocale());
const switchLanguage = (locale) => setLocale(locale);

// 假数据
const userInfo = ref({
  phone: "",
});

// 功能菜单列表（带 type 区分操作类型）
const menuList = computed(() => [
  {
    label: t("home.drawer.cancelAccount"),
    type: "action",
    url: "cancelAccount",
  },
]);

// 处理菜单点击
const handleMenuClick = (item) => {
  if (item.action === "cancelAccount") {
    handleLogout();
  }
};

// 退出登录
const handleLogout = () => { };

defineExpose({
  open,
  close,
});
</script>
