import useRouterStore from '@/useRouterStore'
import { Button, Select } from 'ant-design-vue'
import { computed, defineComponent, ref } from 'vue'
import AvatarCircle from './AvatarCircle'
import useUserStore from './useUserStore'
import { LoginOutlined } from '@ant-design/icons-vue'
import { FaRegularEdit } from 'oh-vue-icons/icons'
import clsx from 'clsx'
import useLayoutStore from '@/layout/useLayoutStore'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import background from '@/layout/background'
addIcons(FaRegularEdit)

export default defineComponent(() => {
  const router = useRouterStore()
  const layout = useLayoutStore()
  const user = useUserStore()
  const open = ref(false)
  const isGame = computed(() => {
    return layout.state.current === 0
  })
  return () => (
    <div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
      {user.isLogin ? (
        <>
          <div class={'flex flex-col'}>
            <span
              class={clsx(
                'text-[14px]  font-bold',
                useLayoutStore().state.current === 0 ? 'text-white' : ' text-[#333]'
              )}
            >
              个人信息
            </span>
            <div
              class={clsx(
                'w-full h-[1px] bg-black/10 mt-1 mb-2',
                useLayoutStore().state.current === 0 ? 'bg-white/10' : ' bg-black/10'
              )}
            ></div>
          </div>
          <div class="flex pl-4 py-4 w-full gap-x-4">
            <div class="w-16 h-16  rounded-full group overflow-hidden relative">
              <AvatarCircle />
              <div
                onClick={() => {
                  router.go('custom-header')
                }}
                class={
                  'absolute hidden left-0 cursor-pointer top-0 opacity-60 rounded-full w-full h-full bg-black z-10 group-hover:flex items-center justify-center'
                }
              >
                <OhVueIcon name={FaRegularEdit.name} fill="#ddd"></OhVueIcon>
              </div>
            </div>
            <div class={'flex flex-col h-full justify-between text-[14px] py-1'}>
              <div class={'flex gap-x-1 items-center'}>
                <span class={clsx(' w-[50px]', isGame.value ? 'text-[#fff9]' : 'text-[#666]')}>
                  用户名:
                </span>
                <input
                  onBlur={() => {
                    user.updateProfile()
                  }}
                  class={
                    'text-[#666] w-[150px] bg-transparent focus:bg-black/[0.05] border-none outline-none px-1 py-[2px]'
                  }
                  v-model={user.profile.username}
                ></input>
              </div>
              <div class={'flex gap-x-1 items-center'}>
                <span class={clsx(' w-[50px]', isGame.value ? 'text-[#fff9]' : 'text-[#666]')}>
                  性&ensp;&ensp;别:
                </span>
                <Select
                  defaultValue={user.profile.gender}
                  v-model={user.profile.gender}
                  class={
                    'w-[150px] bg-transparent appearance-none focus:bg-black/[0.05] overflow-hidden border-none outline-none px-1 py-[2px]'
                  }
                  style={{
                    background: 'transparent !important'
                  }}
                  onChange={(e: any) => {
                    user.profile.gender = e
                    user.updateProfile()
                  }}
                  options={[
                    {
                      label: '男',
                      value: 1
                    },
                    {
                      label: '女',
                      value: 2
                    },
                    {
                      label: '未知',
                      value: 0
                    }
                  ]}
                ></Select>
              </div>
            </div>
          </div>
          <div
            onClick={() => {
              open.value = true
            }}
            class={
              'w-full h-[32px] mt-5 cursor-pointer hover:opacity-90 flex items-center justify-center text-[13px] rounded bg-[#e5e5e5] text-[#999]'
            }
          >
            退出登录
          </div>
        </>
      ) : (
        <Button
          type="primary"
          icon={<LoginOutlined />}
          size="large"
          onClick={() => {
            router.go('global-login')
          }}
        >
          登录
        </Button>
      )}

      {open.value && (
        <div
          class={clsx(
            'w-[300px] h-[210px] absolute top-0  rounded-2xl right-[-310px] z-10 ',
            isGame.value ? 'bg-[#2c2e3e]' : 'bg-white'
          )}
          style={
            isGame.value
              ? {
                  backgroundImage: `url('/tab/bg/addBorder.png')`,
                  backgroundSize: '100% 100%',
                  backgroundColor: '#2c2e3e'
                }
              : {}
          }
        >
          <div
            class={'flex flex-col w-full h-full p-7 border-b-[1px] items-center justify-between'}
          >
            <span class={isGame.value ? '' : ''}>退出登录</span>
            <div
              class={clsx('w-full h-[1px]', isGame.value ? ' bg-white/20' : 'bg-black/20')}
            ></div>
            <span
              class={clsx(
                'text-[14px] leading-[20px] mb-2 text-center',
                isGame.value ? 'text-[#fff9]' : 'text-[#666]'
              )}
            >
              退出登录将会失去多端数据云同步等功能，是否继续？
            </span>
            <div class={'flex justify-between w-full'}>
              <button
                onClick={() => {
                  open.value = false
                }}
                class={clsx(
                  'w-[118px] rounded-lg py-1 flex justify-center',
                  isGame.value ? 'bg-white/20' : 'bg-black/20 text-white'
                )}
              >
                取消
              </button>
              <button
                onClick={() => {
                  user.logout()
                  open.value = false
                  router.replace('')
                }}
                class={clsx(
                  'w-[118px] rounded-lg py-1 flex justify-center ',
                  isGame.value ? 'bg-[#ff7372]' : 'bg-[#ff7372] text-white'
                )}
              >
                退出
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
})