import useRouterStore from '@/useRouterStore'
import { Button, message, Modal, Tag, Tooltip } from 'ant-design-vue'
import { defineComponent } from 'vue'
import AvatarCircle from './AvatarCircle'
import useUserStore from './useUserStore'
import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'

const labelStyle = 'w-16 text-black/60'

export default defineComponent(() => {
  const router = useRouterStore()
  const user = useUserStore()
  return () => (
    <div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
      <div class="flex justify-center py-4">
        <div class="w-16 h-16 relative">
          <AvatarCircle />
        </div>
      </div>
      {user.isLogin && (
        <div class="h-0 flex-grow py-4 px-12">
          <div class="flex py-2">
            <div class={labelStyle}>用户名:</div>
            <div class="w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap break-all">
              {user.profile.username}
            </div>
          </div>
          <div class="flex py-2">
            <div class={labelStyle}>生日:</div> {user.profile.birthday}
          </div>
          <div class="flex py-2">
            <div class={labelStyle}>性别:</div>
            <Tag color={user.profile.gender === 1 ? 'blue' : 'red'}>
              {user.profile.gender === 1 ? '男' : '女'}
            </Tag>
          </div>
        </div>
      )}

      <div class="flex justify-around items-center my-10">
        {user.isLogin ? (
          <>
            <Button
              onClick={() => {
                router.path = 'global-login'
              }}
              icon={<EditOutlined />}
            >
              修改个人信息
            </Button>
            <Tooltip title="退出登录">
              <Button
                type="link"
                danger
                size="large"
                icon={<LogoutOutlined />}
                onClick={() => {
                  Modal.confirm({
                    title: '退出登录',
                    content: '确定要退出登录吗？',
                    onOk: () => {
                      router.path = ''
                      user.logout()
                      message.success('已退出登录')
                    }
                  })
                }}
              ></Button>
            </Tooltip>
          </>
        ) : (
          <Button
            type="primary"
            icon={<LoginOutlined />}
            size="large"
            onClick={() => {
              router.path = 'global-login'
            }}
          >
            登录
          </Button>
        )}
      </div>
    </div>
  )
})