import { Form, Input, Modal, Select, DatePicker } from 'antd';
import { DownOutlined } from '@ant-design/icons';
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(curRecord?.frequency ? curRecord.frequency.substring(curRecord.frequency.length - 3, curRecord.frequency.length) : "次/天");
    const [form] = Form.useForm();

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

        } else {
            dispatch(getUserList())
            dispatch(getProjectList())
        }
        if (type === 'edit' || type === 'view') {
            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?.filter(f => f.structure?.includes(curRecord?.project?.id))?.map(u => ({ label: u.name, value: u.id })))
            // 如果巡检人员用户被删除，筛掉被删除的用户
            const userListIds = userList?.map(u => u.id);
            const filterUsers = curRecord?.users?.filter(u => userListIds.includes(u.id));
            const nextUserIds = filterUsers?.map(u => u.id);
            form.setFieldsValue({
                userIds: nextUserIds,
                userDept: [...new Set(filterUsers?.map(u => u.department?.name))].join()
            });
        }
    }, [userList])

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

    const selectAfter = (
        <Select
            defaultValue={curRecord?.frequency ? curRecord.frequency.substring(curRecord.frequency.length - 3, curRecord.frequency.length) : "次/天"}
            onChange={value => setUnit(value)}
            suffixIcon={<DownOutlined style={{color: '#fff'}} />}
        >
            <Option value="次/天">次/天</Option>
            <Option value="次/周">次/周</Option>
            <Option value="次/月">次/月</Option>
        </Select>
    );
    return (
        <Modal
            className="global-modal"
            width={717}
            visible={visible}
            title={(type === 'view' ? '查看' : type === 'edit' ? '编辑' : '新增') + "巡检计划"}
            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}
                name="form_in_modal"
                labelAlign='right'
                labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}
                initialValues={{
                    ...curRecord,
                    time: [moment(curRecord?.startTime), moment(curRecord?.endTime)],
                    points: curRecord?.points?.map(p => p.id),
                    userIds: curRecord?.users?.map(u => u.id),
                    userDept: [...new Set(curRecord?.users?.map(u => u.department?.name))].join(),
                    frequency: curRecord?.frequency?.split('次')[0]
                }}
                disabled={type === 'view'}
            >
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
                    <Form.Item
                        name="structureId"
                        label="结构物名称"
                        labelCol={{ span: 9 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择结构物' },
                        ]}
                    >
                        <Select disabled={type === 'view'} bordered={false} options={struOpt} loading={struLoading} onChange={(projectId) => {
                            dispatch(positionList({ projectId })).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.setFieldsValue({ userIds: [], userDept: [] });
                            setUserOpt(userList?.filter(f => f.structure?.includes(projectId))?.map(u => ({ label: u.name, value: u.id })))
                        }} />
                    </Form.Item>
                    <Form.Item
                        name="name"
                        label="巡检任务名称"
                        labelCol={{ span: 9 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请输入巡检任务名称' },
                        ]}
                    >
                        <Input disabled={type === 'view'} bordered={false} />
                    </Form.Item>
                </div>
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
                    <Form.Item
                        name="way"
                        label="巡检方式"
                        labelCol={{ span: 8 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择巡检方式' },
                        ]}
                        initialValue='周期巡检'
                    >
                        <Select bordered={false} options={[{
                            label: '周期巡检',
                            value: '周期巡检'
                        }]} disabled />
                    </Form.Item>
                    <Form.Item
                        name="frequency"
                        label="巡检频次"
                        labelCol={{ span: 8 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择巡检频次' },
                        ]}
                    >
                        <Input addonAfter={selectAfter} disabled={type === 'view'} bordered={false} />
                    </Form.Item>
                </div>
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
                    <Form.Item
                        name="templateId"
                        label="巡检模板"
                        labelCol={{ span: 8 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择巡检模板' },
                        ]}
                    >
                        <Select
                            bordered={false}
                            disabled={type === 'view'}
                            options={patrolTemplate.map(t => {
                                return { label: t.name, value: t.id }
                            })}
                            loading={templateLoading}
                        />
                    </Form.Item>
                    <Form.Item
                        name="time"
                        label="任务周期"
                        labelCol={{ span: 8 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择任务周期' },
                        ]}
                    >
                        <RangePicker disabled={type === 'view'} bordered={false} />
                    </Form.Item>
                </div>
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
                    <Form.Item
                        name="points"
                        label="巡检点"
                        labelCol={{ span: 8 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择巡检点' },
                        ]}
                    >
                        <Select mode="multiple" options={pointOpt} disabled={!pointOpt || type === 'view'} bordered={false} />
                    </Form.Item>
                    <Form.Item
                        name="userIds"
                        label="巡检人员"
                        labelCol={{ span: 8 }}
                        style={{ width: 330 }}
                        rules={[
                            { required: true, message: '请选择巡检人员' },
                        ]}
                    >
                        <Select mode="multiple" disabled={type === 'view'} bordered={false} options={userOpt} loading={userLoading} onChange={(values) => {
                            const selectUser = userList?.filter(u => values?.includes(u.id))
                            form.setFieldsValue({
                                userDept: [...new Set(selectUser?.map(u => u.department.name))].join()
                            });
                        }} />
                    </Form.Item>
                </div>
                <Form.Item
                    name="userDept"
                    label="巡检单位"
                >
                    <Input disabled bordered={false} />
                </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);