import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Row, Col } from 'antd'


const DayOfWeekSelect = props => {

    const {changeWeek} =props

    const [selectValues, setSelectValues] = useState([])
    const { onChange, value } = props

    const hours = [
        { name: "星期一", value: '1' },
        { name: "星期二", value: '2' },
        { name: "星期三", value: '3' },
        { name: "星期四", value: '4' },
        { name: "星期五", value: '5' },
        { name: "星期六", value: '6' },
        { name: "星期天", value: '7' },
    ]
    const onTypeChange = e => {
        let values = []
        switch (e.target.value) {
            case 0:
                values = ["1", "2", "3", "4", "5", "6", "7"]
                break
            case 1:
                const arr = ["1", "2", "3", "4", "5", "6", "7"]
                let newArr = []
                selectValues && arr.map(item => {
                    if (!selectValues.includes(item)) {
                        newArr.push(item)
                    }
                })
                values = newArr
                break
            case 2:
                values = ["1", "2", "3", "4", "5"]
                break
            case 3:
                values = ["6", "7"]
                break

        }
        changeWeek(values)
        setSelectValues(values)
        onChange && onChange(values)
    }

    const onCheckChange = (value) => {
        setSelectValues(value)
        onChange && onChange(value)
        changeWeek(value)
    }
    useEffect(() => {
        setSelectValues(value)
    }, [props])
    return (
        <div >
            <Radio.Group onChange={onTypeChange} style={{ margin: '0.25rem 0' }} >
                <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.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 DayOfWeekSelect;