import { useEffect } from 'react'
import {
  Row,
  Col,
  Space,
  Descriptions,
  Avatar,
  Tag,
  Divider,
  List,
  Result,
  Button,
  Image,
  Select,
} from 'antd'
import { UserOutlined } from '@ant-design/icons'
import useAuthStore from '@/stores/AuthStore'

function Profile() {
  const loginUser = useAuthStore((state) => state.loginUser)

  useEffect(() => {
    // 测试错误捕获：
    // throw new Error('💥 CABOOM 💥')
  }, [])

  return (
    <>
      <Row>
        <Col span={12} offset={6}>
          <Descriptions title='个人资料' layout='vertical' column={2}>
            <Descriptions.Item label='名字'>
              <Space size='middle'>
                <Avatar src={loginUser.avatarUrl}>
                  {loginUser.username.substring(1)}
                </Avatar>
                {loginUser.username}
              </Space>
            </Descriptions.Item>
            <Descriptions.Item label='HT 账号'>
              {loginUser.accountList?.map((a) => {
                return (
                  <Tag
                    key={a.OPI_Code}
                    icon={<UserOutlined />}
                    bordered={false}>
                    {a.OPI_Code}
                  </Tag>
                )
              })}
            </Descriptions.Item>
            <Descriptions.Item label='手机'>
              {loginUser.mobile}
            </Descriptions.Item>

            <Descriptions.Item label='商业号身份'>
            <Space>
              <Select
                defaultValue='jack'
                style={{
                  width: 200,
                }}
                options={[
                  {
                    value: 'GH 顾问',
                    label: 'GH 顾问(18741256987)',
                  },
                  {
                    value: 'GH 客服',
                    label: 'GH 客服(13845214785)',
                  },
                  {
                    value: 'GH 客运',
                    label: 'GH 客运(191477856351)',
                  },
                  {
                    value: '国际事业部',
                    label: '国际事业部(无)',
                    disabled: true,
                  },
                  {
                    value: 'CT 事业部',
                    label: 'CT 事业部(无)',
                    disabled: true,
                  },
                  {
                    value: '花梨鹰事业部',
                    label: '花梨鹰事业部(无)',
                    disabled: true,
                  },
                ]}
              />
              <Button type="primary">切换</Button>
              </Space>
            </Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
      <Divider orientation='left'></Divider>
      <Row>
        <Col span={6} offset={6}>
          {/* {loginUser.email} */}
          <List
            header={<div>邮箱</div>}
            dataSource={[
              loginUser.email,
              'christyluo@chinahighlights.com',
              'christyluo@chinahighlights.net',
              'christyluo@asiahighlights.com',
              'christyluo@asiahighlights.net',
              'christyluo@globalhighlights.com',
              'christyluo@globalhighlights.net',
              'christyluo@163.com',
            ]}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </Col>
        <Col span={6}>
          <Result
            icon={
              <Image
                preview={false}
                width={200}
                src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
              />
            }
            title='登录成功'
            extra={<Button type='primary'>退出账号</Button>}
          />
        </Col>
      </Row>
    </>
  )
}

export default Profile