/* eslint-disable no-case-declarations */ /* eslint-disable no-unused-expressions */ /* eslint-disable default-case */ import React, { useEffect, useState } from 'react'; import { Radio, Checkbox, Row, Col } from 'antd'; import styles from './HourOfDaySelect.less'; const HourOfDaySelect = props => { const { changeDay } = props; const [selectValues, setSelectValues] = useState([]); const { onChange, value } = props; const hours = [ { name: '0:00', value: '0' }, { name: '1:00', value: '1' }, { name: '2:00', value: '2' }, { name: '3:00', value: '3' }, { name: '4:00', value: '4' }, { name: '5:00', value: '5' }, { name: '6:00', value: '6' }, { name: '7:00', value: '7' }, { name: '8:00', value: '8' }, { name: '9:00', value: '9' }, { name: '10:00', value: '10' }, { name: '11:00', value: '11' }, { name: '12:00', value: '12' }, { name: '13:00', value: '13' }, { name: '14:00', value: '14' }, { name: '15:00', value: '15' }, { name: '16:00', value: '16' }, { name: '17:00', value: '17' }, { name: '18:00', value: '18' }, { name: '19:00', value: '19' }, { name: '20:00', value: '20' }, { name: '21:00', value: '21' }, { name: '22:00', value: '22' }, { name: '23:00', value: '23' }, ]; const onTypeChange = e => { let values = []; switch (e.target.value) { case 0: values = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', ]; break; case 1: const arr = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', ]; let newArr = []; selectValues && arr.map(item => { if (!selectValues.includes(item)) { newArr.push(item); } }); values = newArr; break; case 2: values = ['6', '8']; break; case 3: values = ['0', '8', '16']; break; case 4: values = ['0', '6', '12', '18']; break; } onChange(values); setSelectValues(values); changeDay(values); }; useEffect(() => { setSelectValues(value); }, [props]); const onCheckChange = val => { setSelectValues(val); onChange(val); changeDay(val); }; return ( <div className={styles.hourOfDay_container}> <Radio.Group onChange={onTypeChange} style={{ marginBottom: '0.5rem' }}> <Radio style={{ width: '85px' }} value={0}> 全选 </Radio> <Radio style={{ width: '85px' }} value={1}> 反选 </Radio> <Radio style={{ width: '88px' }} value={2}> 一天两次 </Radio> <Radio style={{ width: '88px' }} value={3}> 一天三次 </Radio> <Radio style={{ width: '88px' }} value={4}> 一天四次 </Radio> </Radio.Group> <Checkbox.Group value={selectValues} onChange={onCheckChange}> <Row> {hours.map((item, idx) => { return ( <Col span={4} key={idx}> <Checkbox value={item.value}>{item.name}</Checkbox> </Col> ); })} </Row> </Checkbox.Group> </div> ); }; export default HourOfDaySelect;