import React, { useContext, useState, useEffect, useRef } from 'react';
import { connect, history } from 'umi';
import { Form, Card, TimePicker, DatePicker, Row, Col, Input, Select, Button } from 'antd';
const { TextArea } = Input;
const { Option } = Select;
const { RangePicker } = DatePicker;
const SelectCycleSelectInput = ({ value = {}, onChange }) => {
    const [selectType, setSelectType] = useState(1);//1为周,2为月
    const [dayCount, setDayCount] = useState(null);
    const [monthSelectDay, setMonthSelectDay] = useState(null);
    
    useEffect(() => {
        let selectDay = new Array(31).fill(1);
        let monthDays = selectDay.map((item, index) => {
            return index + 1;
        });
        console.log(`monthDays is:`, monthDays);
        setMonthSelectDay(monthDays);
    }, []);
    //触发类型
    const triggerChange = (changedValue) => {
        if (onChange) {
            console.log({
                ...value,
                dayCount,
                selectType,
                ...changedValue,
            });
            onChange({
                ...value,
                dayCount,
                selectType,
                ...changedValue,
            });
        }
    };
    const onDayCountChange = (newDayCount) => {
        // if (!('dayCount' in value)) {
        //     setDayCount(newDayCount);
        // }
        setDayCount(newDayCount);

        triggerChange({
            dayCount: newDayCount,
        });
    };

    const onSelectTypeChange = (newSelectType) => {
        // if (!('selectType' in value)) {
        //     setSelectType(newSelectType);
        // }
        setSelectType(newSelectType);
        setDayCount(null);//peter new add 

        triggerChange({
            selectType: newSelectType,
            dayCount: null
        });
    };
    console.log(`render selectType is:`, selectType);
    return (<Row>
        <Col span={8}>
            <Select
                value={value.selectType || selectType}
                onChange={onSelectTypeChange}
            >
                <Option value={1}>每周</Option>
                <Option value={2}>每月</Option>
            </Select>
        </Col>
        <Col span={16}>
            {
                selectType === 1 && <Select style={{ marginLeft: '8px' }} allowClear placeholder='请选择' onChange={onDayCountChange} >
                    <Option value={1} key={1}>星期一</Option>
                    <Option value={2} key={2}>星期二</Option>
                    <Option value={3} key={3}>星期三</Option>
                    <Option value={4} key={4}>星期四</Option>
                    <Option value={5} key={5}>星期五</Option>
                    <Option value={6} key={6}>星期六</Option>
                    <Option value={7} key={7}>星期日</Option>
                </Select>
            }
            {
                selectType === 2 && <span>
                    <Select style={{ margin: '0 5px', width: '80%' }} allowClear placeholder='请选择' onChange={onDayCountChange}>
                        {
                            monthSelectDay && monthSelectDay.map(item => (
                                <Option key={item} value={item}>{item}</Option>
                            ))
                        }
                    </Select> 日
                </span>
            }
        </Col>
    </Row>
    )
};

export default SelectCycleSelectInput;