import React, { useState , useEffect } from 'react';
import { Form, Select, Button, message } from 'antd';
import DynamicForm from './DynamicForm'

const { Option } = Select;

const PlanningCycle = ({ value = {}, onChange }) => {
    const cycleList = [
        { title: '年', key: 1 },
        { title: '月', key: 2 },
        { title: '周', key: 3 },
        { title: '日', key: 4 },
        { title: '策略触发', key: 5 },
    ]
    const [cycle, setCycle] = useState(2);
    const [date, setDate] = useState([]);
    const [visible, setVisible] = useState(false)

    const triggerChange = (changedValue) => {
        onChange?.({
            cycle,
            ...changedValue
        });
    };

    const onCycleChange = (values) => {
        setDate([])
        if (values) {
            setCycle(values);
        }else{
            setCycle(2);
        }

        triggerChange({
            cycle: values,
            date
        });
    };

    const onDateChange = (values) => {
        if (values) {
            setDate(values);
        }else{
            setDate();
        }

        triggerChange({
            date: values,
        });
    };
    const cycleTypeAction = () => {
        if(value?.cycle === 1 || value?.cycle === 2 || value?.cycle === 3 || value?.cycle === 4){
            setVisible(true)
        }else{
            message.warn('只有类型为年月周日的才可选择！')
        }
    }
    useEffect(() => {
        setCycle(value.cycle)
    }, [value.cycle])
    console.log(value)
    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <span>每</span>
            <Select
                value={value.cycle}
                placeholder="请选择"
                allowClear
                style={{
                    width: 80,
                    margin: '0 8px',
                }}
                onChange={onCycleChange}
            >
                {
                    cycleList?.length > 0 && cycleList.map(item => (<Option value={item?.key} key={item?.key}>{item?.title}</Option>))
                }
            </Select>
            {
                (value?.date && value?.date?.length > 0 ) ? (<div onClick={cycleTypeAction} className="ellipsis_list" style={{cursor: 'pointer'}}>
                {
                    value?.date?.map((item , index)=>(
                        <span key={index} style={{marginRight: 5}}>{`${item?.executiveDate || ''} ${item?.startTime || ''}-${item?.executiveDate || ''} ${item?.endTime || ''}，`}</span>
                    ))
                }
            </div>) : (
                <Button onClick={cycleTypeAction} style={{flex: 1}} type="link">请选择</Button>
            )
            }
            <DynamicForm visible={visible} setVisible={setVisible} cycle={value?.cycle} onDateChange={onDateChange} date={value?.date} />
        </div>
    );
}

export default PlanningCycle;