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';
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 (
      <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>
    );
  }
}

export default index;
