import React, { useCallback } from 'react'
import styles from './index.module.scss'

import bgImg from '@/assets/img/home/bg.png'
import icon1 from '@/assets/img/home/icon1.png'
import icon2 from '@/assets/img/home/icon2.png'
import icon3 from '@/assets/img/home/icon3.png'
import history from '@/utils/history'

import backImg from '@/assets/img/back.png'

const list = [
  {
    name: '团体预约',
    img: icon1,
    color: '#7dbe2b',
    bac: '#f2f9ea',
    path: '/notice'
  },
  {
    name: '团体认证',
    img: icon2,
    color: '#107bd9',
    bac: '#e7f2fc',
    path: '/team'
  },
  {
    name: '我的申请',
    img: icon3,
    color: '#f18101',
    bac: '#fef3e6',
    path: '/my'
  }
]

function A1home() {
  const toHomeHtml = useCallback(() => {
    window.location.href = '/web/home.html'
  }, [])

  return (
    <div className={styles.A1home}>
      <div className='A1bg'>
        <img src={bgImg} alt='' />
        <img className='A1bgBack' src={backImg} alt='' onClick={toHomeHtml} />
      </div>

      <div className='A1list'>
        {list.map(item => (
          <div
            onClick={() => history.push(item.path)}
            className='A1row'
            key={item.name}
            style={{ color: item.color, borderColor: item.color, backgroundColor: item.bac }}
          >
            <img src={item.img} alt='' />
            {item.name}
          </div>
        ))}
      </div>
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
