import React, { useState } from 'react'
import styles from './index.module.scss'
import TopCom from '@/components/TopCom'
import ZFlooBtn from '@/components/ZFlooBtn'
import classNames from 'classnames'
import history from '@/utils/history'

const list = [
  {
    id: 1,
    time: '12-02 周一',
    shang: true,
    xia: true
  },
  {
    id: 2,
    time: '12-02 周二',
    shang: true,
    xia: false
  },
  {
    id: 3,
    time: '12-02 周三',
    shang: true,
    xia: true
  },
  {
    id: 4,
    time: '12-02 周四',
    shang: true,
    xia: true
  },
  {
    id: 5,
    time: '12-02 周五',
    shang: true,
    xia: true
  },
  {
    id: 6,
    time: '12-02 周六',
    shang: true,
    xia: true
  },
  {
    id: 7,
    time: '12-02 周日',
    shang: true,
    xia: true
  }
]

function A3selectDay() {
  const [acObj, setAcObj] = useState({
    id: 0,
    txt: ''
  })

  return (
    <div className={styles.A3selectDay}>
      <TopCom txt='选择日期' />

      <div className={classNames('A3main', acObj.id ? '' : 'A3mainNoBtn')}>
        <div className='A3list'>
          {list.length ? (
            <div className='mySorrl'>
              {list.map(item => (
                <div className='A3row' key={item.id}>
                  <div className='A3R1'>{item.time}</div>
                  <div className='A3R2'>
                    <div
                      onClick={() => setAcObj({ id: item.id, txt: '上午' })}
                      className={classNames(
                        item.id === acObj.id && acObj.txt === '上午' ? 'A3ac' : '',
                        item.shang ? '' : 'myBtnNo'
                      )}
                    >
                      上午{item.shang ? '' : '（已满）'}
                    </div>
                    <div
                      onClick={() => setAcObj({ id: item.id, txt: '下午' })}
                      className={classNames(
                        item.id === acObj.id && acObj.txt === '下午' ? 'A3ac' : '',
                        item.xia ? '' : 'myBtnNo'
                      )}
                    >
                      下午{item.xia ? '' : '（已满）'}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className='A3listNo'>暂无可约日期</div>
          )}
        </div>
        <ZFlooBtn
          txt={acObj.id ? '下一步' : '请选择日期'}
          clickFu={() => history.push('/selectCourse')}
        />
      </div>
    </div>
  )
}

const MemoA3selectDay = React.memo(A3selectDay)

export default MemoA3selectDay
