import useRouterStore from '@/useRouterStore'
import { Button, Modal, Tag } 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'
import { globalToast } from '@/main'

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.go('global-login')
              }}
              icon={<EditOutlined />}
              type="primary"
            >
              修改个人信息
            </Button>
            <Button
              type="text"
              icon={<LogoutOutlined />}
              onClick={() => {
                Modal.confirm({
                  title: '退出登录',
                  content: '确定要退出登录吗？',
                  onOk: () => {
                    router.go('')
                    user.logout()
                    globalToast.success('已退出登录')
                  }
                })
              }}
            >
              退出登录
            </Button>
          </>
        ) : (
          <Button
            type="primary"
            icon={<LoginOutlined />}
            size="large"
            onClick={() => {
              router.go('global-login')
            }}
          >
            登录
          </Button>
        )}
      </div>
    </div>
  )
})