import { useContext } from 'react';
import { Button, Result, message, Typography, Image } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import { Outlet, useLocation } from 'react-router-dom';
import authExample from './../auth-apply.png';

const { Text } = Typography;

const ProtectedRoute = ({ auth }) => {
  const { auth_store } = useContext(stores_Context);

  if (auth_store.has_permission(auth)) {
    return <Outlet />;
  }

  const authApplyLink =
    // eslint-disable-next-line max-len
    'dingtalk://dingtalkclient/action/openapp?app_id=-4&container_type=work_platform&corpid=ding48bce8fd3957c96b&ddtab=true&redirect_type=jump&redirect_url=https%3A%2F%2Faflow.dingtalk.com%2Fdingtalk%2Fmobile%2Fhomepage.htm%3Fback_control%3Dfalse%26backcontrol%3Dfalse%26corpid%3Dding48bce8fd3957c96b%26dd_progress%3Dfalse%26dd_share%3Dfalse%26ddtab%3Dtrue%26showmenu%3Dfalse%23%2Fcustom%3Fpcredirect%3Dself%26processCode%3DPROC-C0C2E970-1E4E-44CF-A389-C7D3F10A7885';

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
      message.success('已复制到剪贴板');
    });
  };

  const { pathname } = useLocation();
  const applyInfo = `授权账户: ${auth_store.user.name}(${auth_store.user.userid})\n申请权限: ${auth[auth.length - 1].toString()}\n请求页面: ${pathname}`;

  return (
    <div>
      {/* '试着联系一下技术，所需权限: ' + auth.toString() */}
      <Result
        status="403"
        title="403 权限不足"
        subTitle={
          <>
            <div style={{ width: 300, textAlign: 'left', margin: 'auto auto' }}>
              <div>
                <Text type={'danger'} strong>
                  申请步骤:
                </Text>
              </div>
              <ol>
                <li>
                  复制以下信息
                  {/* <Button type="link" onClick={() => copyToClipboard(applyInfo)}>
                      复制
                    </Button> */}
                </li>
                <li>
                  <pre className={'p-s1'} style={{ border: '1px solid rgba(0,0,0,.15)', borderRadius: 4 }}>
                    {applyInfo}
                  </pre>
                </li>
                <li>
                  打开OA审批,
                  <ul>
                    <li>输入申请信息(姓名等)</li>
                    <li>
                      选择开通权限: <Text type={'warning'}>HT系统分析</Text>
                    </li>
                    <li>
                      填入上述复制的信息到 <Text type={'warning'}>权限内容</Text>
                    </li>
                  </ul>
                  <Button type="link" href={authApplyLink}>
                    打开OA审批 &raquo;
                  </Button>
                </li>
              </ol>
              <div>
                <Text type={'secondary'} strong>
                  示例:
                </Text>
              </div>
              <Image alt="example" src={authExample} preview={false} />
            </div>
          </>
        }
      />
    </div>
  );
};
export default observer(ProtectedRoute);
