import React, { Component } from 'react';
import { Switch, Route, Redirect, NavLink } from 'react-router-dom';
import styles from './style.css';
import ReprtRepair from './ReprtRepair';
import RepairList from './RepairList';
import ErrorBoundary from '../ErrorCatch/ErrorBoundary';

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFooter: true,
    };
  }

  componentDidMount() {
    let screenHeight = document.body.offsetHeight;
    window.onresize = () => {
      let nowHeight = document.body.offsetHeight;
      if (nowHeight < screenHeight) {
        this.setState({
          showFooter: false,
        });
      } else {
        this.setState({
          showFooter: true,
        });
      }
    };
  }

  render() {
    const { showFooter } = this.state;
    return (
      <ErrorBoundary>
        <div className="Content-Wrap">
          <div className="RepairContent">
            <Switch>
              <Route path="/repair/ReprtRepair" component={ReprtRepair} />
              <Route path="/repair/RepairList" component={RepairList} />
              <Route render={() => <Redirect to="/repair/ReprtRepair" />} />
            </Switch>
          </div>
          {showFooter && (
            <div className={styles.footer}>
              <NavLink
                className={styles['footer-item']}
                to="/repair/ReprtRepair"
                replace
              >
                报修服务
              </NavLink>
              <span className={styles.line} />
              <NavLink
                className={styles['footer-item']}
                to="/repair/RepairList"
                replace
              >
                报修记录
              </NavLink>
            </div>
          )}
        </div>
      </ErrorBoundary>
    );
  }
}

export default index;
