import React, { useEffect, useState } from 'react' import { Radio, Checkbox, Row, Col } from 'antd' import styles from './HourOfDaySelect.less' const HourOfDaySelect = 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: values = [] 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) } useEffect(()=>{ setSelectValues(value) },[props]) const onCheckChange = (value)=>{ setSelectValues(value) onChange&&onChange(value) } return ( <div className={styles.hourOfDay_container}> <Radio.Group onChange={onTypeChange}> <Radio value={0}>全选</Radio> <Radio value={1}>反选</Radio> <Radio value={2}>一天两次</Radio> <Radio value={3}>一天三次</Radio> <Radio value={4}>一天四次</Radio> </Radio.Group> <Checkbox.Group value={selectValues} onChange={onCheckChange}> <Row> { hours.map((item, idx) => { return ( <Col span={4}> <Checkbox value={item.value}>{item.name}</Checkbox> </Col> ) }) } </Row> </Checkbox.Group> </div> ) } export default HourOfDaySelect;