import React from 'react';
import PropTypes from 'prop-types';
import styles from './style.css';
import { Toast } from 'antd-mobile';
import UserInfoContext from '../../context/userinfo-context';
import bgImg from './images/bg@2x.png';
import bannerIcon from './images/banner@2x.png';
import repairIcon from './images/repairs-new@2x.png';
import repairDealIcon from './images/repair_process@2x.png';
import publicCarIcon from './images/official_car_order@2x.png';
import publicCarDealIcon from './images/official_car_order_process@2x.png';

const HomePageStyle = {
  width: '100%',
  height: '100%',
  background: `url(${bgImg})`,
  overflowY: 'auto',
};
export class Index extends React.Component {
  static propTypes = {
    name: PropTypes.string,
  };
  validate = (code, path) => {
    const {
      userinfo: { author },
      history,
    } = this.props;
    let item = author.find(i => i.code === code);
    if (item && item.type) {
      history.push(path);
      return;
    } else {
      Toast.fail('无权使用该功能');
      return;
    }
  };
  render() {
    return (
      <div style={HomePageStyle}>
        <div className={styles.banner}>
          <img src={bannerIcon} alt="" />
        </div>
        <div className={styles.iconBox}>
          <div
            className={styles.repairIcon}
            onClick={() => this.validate('CSHQ0001', '/Repair')}
          >
            <img src={repairIcon} alt="" />
          </div>
          <div
            className={styles.publicCarIcon}
            onClick={() => this.validate('CSHQ0003', '/publicCar')}
          >
            <img src={publicCarIcon} alt="" />
          </div>
          <div
            className={styles.repairDealIcon}
            onClick={() => this.validate('CSHQ0002', '/RepairDeal')}
          >
            <img src={repairDealIcon} alt="" />
          </div>
          <div
            className={styles.publicCarDealIcon}
            onClick={() => this.validate('CSHQ0004', '/publicCarDeal')}
          >
            <img src={publicCarDealIcon} alt="" />
          </div>
        </div>
      </div>
    );
  }
}

export default props => (
  <UserInfoContext.Consumer>
    {({ userinfo }) => <Index userinfo={userinfo} {...props} />}
  </UserInfoContext.Consumer>
);
