import { Button, Form, Input, Modal, Select, DatePicker } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { getUserList, getProjectList, positionList } from '../actions/plan';
import moment from 'moment';

const { RangePicker } = DatePicker;

const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userList, structureList, struLoading, type, curRecord, templateLoading, patrolTemplate }) => {
    const [userOpt, setUserOpt] = useState();
    const [struOpt, setStruOpt] = useState();
    const [pointOpt, setPointOpt] = useState();
    const [points, setPoints] = useState();
    const [unit, setUnit] = useState('次/天');
    const [form] = Form.useForm();

    useEffect(() => {
        if (type === 'view') {

        } else {
            dispatch(getUserList())
            dispatch(getProjectList())
        }
        if (type === 'edit') {
            dispatch(positionList({ projectId: curRecord?.project?.id })).then(res => {
                if (res.success) {
                    setPoints(res.payload.data?.rows)
                    setPointOpt(res.payload.data?.rows[0]?.points?.map(p => ({ label: p.name, value: p.id })))
                }
            })
        }
    }, [])

    useEffect(() => {
        if (userList.length) {
            setUserOpt(userList.map(u => ({ label: u.name, value: u.id })))
        }
    }, [userList])

    useEffect(() => {
        if (structureList?.rows?.length) {
            setStruOpt(structureList?.rows?.map(s => ({ label: s.name, value: s.id })))
        }
    }, [structureList])

    const selectAfter = (
        <Select defaultValue="次/天" onChange={value => setUnit(value)}>
            <Option value="次/天">次/天</Option>
            <Option value="次/周">次/周</Option>
            <Option value="次/月">次/月</Option>
        </Select>
    );
    return (
        <Modal
            visible={visible}
            title="新增巡检计划"
            okText="确定"
            cancelText="取消"
            onCancel={() => {
                form.resetFields();
                onCancel();
            }}
            onOk={() => {
                if (type === 'view') {
                    form.resetFields();
                    onCancel();
                    return;
                }
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        const params = {
                            ...values,
                            frequency: values.frequency + unit,
                            startTime: values.time[0],
                            endTime: values.time[1],
                            points: points[0]?.points?.filter(p => values?.points?.includes(p.id))
                        }
                        onCreate(params);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    ...curRecord,
                    time: [moment(curRecord?.startTime), moment(curRecord?.startTime)],
                    points: curRecord?.points?.map(p => p.id),
                    userDept: curRecord?.user?.department?.name,
                    frequency: curRecord?.frequency?.split('次')[0]
                }}
                disabled={type === 'view'}
            >
                <Form.Item
                    name="structureId"
                    label="结构物名称"
                    rules={[
                        { required: true, message: '请选择结构物' },
                    ]}
                >
                    <Select disabled={type === 'view'} options={struOpt} loading={struLoading} onChange={(value) => {
                        dispatch(positionList({ projectId: value })).then(res => {
                            if (res.success) {
                                setPoints(res.payload.data?.rows)
                                setPointOpt(res.payload.data?.rows[0]?.points?.map(p => ({ label: p.name, value: p.id })))
                            }
                        })
                    }} />
                </Form.Item>
                <Form.Item
                    name="name"
                    label="巡检任务名称"
                    rules={[
                        { required: true, message: '请输入巡检任务名称' },
                    ]}
                >
                    <Input disabled={type === 'view'} />
                </Form.Item>
                <Form.Item
                    name="way"
                    label="巡检方式"
                    rules={[
                        { required: true, message: '请选择巡检方式' },
                    ]}
                    initialValue='周期巡检'
                >
                    <Select options={[{
                        label: '周期巡检',
                        value: '周期巡检'
                    }]} disabled />
                </Form.Item>
                <Form.Item
                    name="frequency"
                    label="巡检频次"
                    rules={[
                        { required: true, message: '请选择巡检频次' },
                    ]}
                >
                    <Input addonAfter={selectAfter} disabled={type === 'view'} />
                </Form.Item>
                <Form.Item
                    name="templateId"
                    label="巡检模板"
                    rules={[
                        { required: true, message: '请选择巡检模板' },
                    ]}
                >
                    <Select
                        disabled={type === 'view'}
                        options={patrolTemplate.map(t => {
                            return { label: t.name, value: t.id }
                        })}
                        loading={templateLoading}
                    />
                </Form.Item>
                <Form.Item
                    name="time"
                    label="任务周期"
                    rules={[
                        { required: true, message: '请选择任务周期' },
                    ]}
                >
                    <RangePicker disabled={type === 'view'} />
                </Form.Item>
                <Form.Item
                    name="points"
                    label="巡检点"
                    rules={[
                        { required: true, message: '请选择巡检点' },
                    ]}
                >
                    <Select mode="multiple" options={pointOpt} disabled={!pointOpt || type === 'view'} />
                </Form.Item>
                <Form.Item
                    name="userId"
                    label="巡检人员"
                    rules={[
                        { required: true, message: '请选择巡检人员' },
                    ]}
                >
                    <Select disabled={type === 'view'} options={userOpt} loading={userLoading} onChange={(value) => {
                        const curUser = userList.filter(u => u.id == value)
                        if (curUser.length) {
                            form.setFieldsValue({
                                userDept: curUser[0].department.name
                            });
                        }
                    }} />
                </Form.Item>
                <Form.Item
                    name="userDept"
                    label="巡检单位"
                >
                    <Input disabled />
                </Form.Item>
            </Form>
        </Modal >
    );
};

function mapStateToProps (state) {
    const { auth, userList, structureList, patrolTemplate } = state
    return {
        user: auth.user,
        userList: userList.data || [],
        structureList: structureList.data || [],
        patrolTemplate: (patrolTemplate.data || { rows: [] }).rows,
        userLoading: userList.isRequesting,
        struLoading: structureList.isRequesting,
        templateLoading: patrolTemplate.isRequesting,
    }
}
export default connect(mapStateToProps)(PlanModal);