import React, { useEffect, useState } from 'react';
import * as dd from 'dingtalk-jsapi';
import { message } from 'antd';
import { LoadingOutlined, CheckOutlined } from '@ant-design/icons';
import { bindDDCode } from '@/services/boom';

function DDLogin(props) {
  const {
    match: {
      params: { dingUserId },
    },
  } = props;
  const [info, setInfo] = useState('');
  useEffect(() => {
    if (dd.env.platform != 'notInDingTalk') {
      dd.ready(function() {
        dd.runtime.permission.requestAuthCode({
          corpId: 'ding0cdce2d5dbf986d9', // 企业id
          onSuccess: async function(info) {
            setTimeout(() => {
              setInfo(info.code);
            }, 500);
            let res = await bindDDCode(dingUserId, info.code);
            console.log(res);

            // 通过该免登授权码可以获取用户身份
          },
          onFail: error => {
            setInfo(JSON.stringify(error));
          },
        });
      });
    }
  }, []);

  return (
    <div
      style={{
        width: '100vw',
        fontSize: 24,
        paddingTop: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
      }}
    >
      {info ? (
        <>
          <CheckOutlined style={{ fontSize: 40, color: '#52c41a' }} />
          <div>授权成功</div>
          {/* <div>{info}</div> */}
        </>
      ) : (
        <>
          <LoadingOutlined style={{ fontSize: 40, color: '#1890ff' }} />
          <div>授权中...</div>
        </>
      )}
    </div>
  );
}

export default DDLogin;