import { Input, QRCode } from 'antd'
import '../../styles/home.scss'
import Button from '../../components/Button'
import { IoCopyOutline } from "react-icons/io5";
import { copy } from '../../utils';
import { observer } from 'mobx-react';
import store from '../../store';

const Link = () => {

  const { userInfo } = store.state

  return (
    <div className='link'>
      <div className='text-white fz-22 mb-2'>推广链接</div>

      <div className='container ptb-2'>
        <div className='plr-2'>代理推广链接</div>
        <div className='divider mt-2'></div>
        <div className='plr-2'>
          <div className='row-center'>
            <QRCode value={`${window.origin}/#/createProxy?code=${userInfo.inviti_code}`} bordered={false} />
          </div>
          <div className='tac fz-14 fz-wb-550 mt-1 row-center'>
            <span>推荐码：</span>
            <span className='text-success'>{userInfo.inviti_code}</span>
            <IoCopyOutline className='ml-1 tp' onClick={() => copy(userInfo.inviti_code)} />
          </div>
          <div className='mt-1'>
            <Input className='tac text-sub' disabled style={{
              backgroundColor: '#eff2f7',
              height: 40
            }} value={`${window.origin}/#/createProxy?code=${userInfo.inviti_code}`} />
          </div>
          <div className='mt-2 row-center'>
            <Button
              style={{
                width: 150,
                height: 50,
                backgroundColor: '#007DBA'
              }}
              onClick={() => copy(`${window.origin}/#/createProxy?code=${userInfo.inviti_code}`)}
            >链接复制</Button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default observer(Link)