import useLayoutStore from '@/layout/useLayoutStore'
import useUserStore from '@/user/useUserStore'
import useRouterStore from '@/useRouterStore'
import clsx from 'clsx'
import { computed, defineComponent, Transition } from 'vue'

export default defineComponent(() => {
  const router = useRouterStore()
  const { profile } = useUserStore()
  const show = computed(() => router.path.startsWith('settings-header'))
  const layout = useLayoutStore()
  const isGame = computed(() => {
    return layout.state.current === 0
  })
  return () => (
    <div class="fixed left-0 bottom-0 z-40 w-full rounded-lg">
      {/* 背景遮罩 */}
      {show.value && (
        <div
          class="w-full h-screen"
          onClick={() => {
            router.replace('')
          }}
        ></div>
      )}
      {/* 弹框主体 */}
      <Transition name="settings">
        {show.value && (
          <div
            class={clsx(
              'absolute left-6 bottom-10   w-[660px] h-[580px] rounded-2xl  shadow-2xl flex',
              isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#000] bg-white'
            )}
            style={
              isGame.value && {
                backgroundImage: `url('/tab/bg/gameModel.png')`,
                backgroundSize: '100% 100%'
              }
            }
          >
           
          </div>
        )}
      </Transition>
    </div>
  )
})