<script setup lang="ts">
import {debounce} from "throttle-debounce";
import Config from "@/config";
import {useConfigStore} from "@/store";
import {setDayjsLocale, setWotDesignLocale} from "@/plugin";

const {locale} = useI18n();
const configStore = useConfigStore();

const show = ref(false);

const languages = reactive([
  {
    name: "中文",
    systemValue: "zh-Hans",
  },
  {
    name: "English",
    systemValue: "en",
  },
]);

function init() {
  show.value = true;
}

function close() {
  show.value = false;
}

function submit(item: { name: string; systemValue: string; }) {
  close();
  const localeLanguages = uni.getLocale()
  console.log(localeLanguages)
  if (item.systemValue === uni.getLocale()) {
    return;
  }
  uni.setLocale(item.systemValue);
  locale.value = item.systemValue;
  setWotDesignLocale()
  setDayjsLocale()
  // #ifdef APP-PLUS
  if (configStore.isIos) {
    setTimeout(() => {
      plus.runtime.restart();
    }, 1000)
  }
  // #endif
}

const handleSubmit = debounce(Config.debounceShortTime, submit, {
  atBegin: true,
});

defineOptions({
  name: "ChooseLanguage",
});

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

<template>
  <wd-popup
      custom-class="!bg-transparent"

      position="bottom"
      safe-area-inset-bottom
      v-model="show"
      @close="close"
  >
    <view class="p-[28rpx+20rpx]">
      <view class="bg-#ffff rounded-16rpx shadow-[0rpx_3rpx_6rpx_rgba(0,0,0,0.16)]">
        <view
            class="relative"
            v-for="(item, index) in languages"
            :key="item.systemValue"
            @click="handleSubmit(item)"
        >
          <view class="h-108rpx center text-28rpx lh-42rpx text-primary font-bold">
            <text>{{ item.name }}</text>
          </view>
          <view
              class="absolute bottom-0 w-340rpx left-205rpx border-bottom"
              v-if="index === 0"
          ></view>
        </view>
      </view>
    </view>
  </wd-popup>
</template>

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