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 && onChange(values) setSelectValues(values) changeDay(values) } useEffect(() => { setSelectValues(value) }, [props]) const onCheckChange = (value) => { setSelectValues(value) onChange && onChange(value) changeDay(value) } 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;