<template>
  <div class="w-screen overflow-hidden flex flex-col h-full relative">
    <ui-nav-bar @clickMenu="showSlider = !showSlider" v-bind="$attrs">
      <template v-slot:search>
        <slot name="search"></slot>
      </template>
    </ui-nav-bar>
    <div v-bind="$attrs" class="page-body flex-1 overflow-hidden relative">
      <ui-scroll-view >
        <div v-if="showSlider" class="w-full h-full bg-[rgba(0,0,0,0.6)]   absolute flex justify-end z-50">
          <div @click="showSlider = false" class="h-full flex-1">
            
          </div>
          <div class=" h-full w-400rem bg-white right-0 flex flex-col items-center">
            <div  @click="changeLang('zh-TW')" class="bg-[#F7F7F7] w-336rem h-98rem rounded-full flex items-center pl-24rem mt-48rem" :class="$i18n.locale === 'zh-TW' ? 'bg-primary text-white' :''">
              <div

                class="w-40rem h-40rem rounded-full mr-12rem border-2rem border-black border-solid flex justify-center items-center text-[#231815]" :class="$i18n.locale === 'zh-TW' ? '!border-white !text-white' :''">
                中
              </div>
              <div>中文繁体</div>
            </div>
            <div  @click="changeLang('en')" class="bg-[#F7F7F7] w-336rem h-98rem rounded-full flex items-center pl-24rem mt-48rem" :class="$i18n.locale === 'en' ? 'bg-primary text-white' :''">
              <div
                      class="w-40rem h-40rem rounded-full mr-12rem border-2rem border-black border-solid flex justify-center items-center text-[#231815]" :class="$i18n.locale === 'en' ? '!border-white !text-white' :''">
                EN
              </div>
              <div>English</div>
            </div>
          </div>
        </div>

        <slot></slot>
      </ui-scroll-view>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSlider: false
    }
  },
  methods:{
    changeLang(str){
      this.$i18n.locale = str;
      this.$forceUpdate();
    },
  },
};
</script>
<style>
.page-body {}
</style>
