import React, { PureComponent } from 'react';
import { Alert } from 'antd';
import style from "styled-components";
import plice from "../assets/images/plice.png";

export default class NoAuthority extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {

    };
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }
  render() {
    return (
      <Noauthority className="noauthority">
        <div style={{margin: '0 auto', width: 600}}>
          <div style={{textAlign: 'center'}}>
            <img style={{margin: '0 auto', width: 200}} src={plice}/>
          </div>
          <p>可能原因:</p>
          <ul>
            <li>企业所在省份的保安服务监管信息系统（公安端）暂未开启服务；</li>
            <li>保安服务监管信息系统（公安端）正在升级维护；</li>
            <li>网络超时，请<a onClick={() => {
              location.reload();
            }} href="javascript: void(0)">刷新重试</a>。</li>
            <li>若有疑问，请点击平台右侧【在线咨询】联系客服或拨打客服热线：400-662-9696。</li>
          </ul>
          {/* <Alert
            message="可能原因"
            description={(() => (
              <ul>
                <li>企业所在省份的保安服务监管信息系统（公安端）暂未开启服务；</li>
                <li>保安服务监管信息系统（公安端）正在省级维护；</li>
                <li>网络超时，请<a>刷新重试</a>。</li>
              </ul>
            ))()}
            type="warning"
            showIcon
          />
          <Alert style={{marginTop: '10px'}} message="若有疑问，请点击平台右侧【在线咨询】联系客服或拨打客服热线：400-662-9696" type="info" showIcon /> */}
        </div>
      </Noauthority>
    );
  }
}

const Noauthority = style.div`
  width: 100%;
  height: calc(100vh - 72px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: space-between;
  justify-content: center;
  padding: 10px 20px;
`;