import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button, Popconfirm } from 'antd';
import ProTable from '@ant-design/pro-table';
import PlanModal from '../components/planModal';
import { createPatrolPlan, delPatrolPlan, updatePatrolPlan, getPatrolPlan } from '../actions/plan';
import { getPatrolTemplate } from '../actions/template';
import moment from 'moment';

function PatrolPlan(props) {
    const { dispatch, user } = props;
    const tableRef = useRef();
    const [dataSource, setDataSource] = useState([{}]);
    const [visible, setVisible] = useState(false);
    const [type, setType] = useState();
    const [curRecord, setCurRecord] = useState();

    useEffect(() => {
        dispatch(getPatrolTemplate({}))
    }, [])

    const onCreate = (values) => {
        if (type === 'create') {
            dispatch(createPatrolPlan(values)).then(res => {
                if (res.success) {
                    tableRef.current.reload();
                }
            })
        } else {
            dispatch(updatePatrolPlan({ ...values, id: curRecord.id })).then(res => {
                if (res.success) {
                    tableRef.current.reload();
                }
            })
        }
        setVisible(false);
        setCurRecord(null);
    };

    const columns = [{
        title: '结构物名称',
        dataIndex: 'projectName',
        key: 'projectName',
        ellipsis: true,
        render: (_, record) => {
            return <div>{record?.project?.name}</div>
        }
    }, {
        title: '巡检任务名称',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true
    }, {
        title: '开始时间',
        dataIndex: 'startTime',
        key: 'startTime',
        ellipsis: true,
        search: false,
        render: (_, record) => moment(record.startTime).format('YYYY-MM-DD')
    }, {
        title: '结束时间',
        dataIndex: 'endTime',
        key: 'endTime',
        ellipsis: true,
        search: false,
        render: (_, record) => moment(record.endTime).format('YYYY-MM-DD')
    }, {
        title: '巡检频次',
        dataIndex: 'frequency',
        key: 'frequency',
        ellipsis: true,
        search: false,
    }, {
        title: '巡检点位',
        dataIndex: 'patrolPoints',
        key: 'patrolPoints',
        ellipsis: true,
        search: false,
        render: (_, record) => <div>{record?.points?.length ? record?.points?.map(p => p.name).join() : '-'}</div>
    }, {
        title: '巡检人',
        dataIndex: 'patrolPerson',
        key: 'patrolPerson',
        ellipsis: true,
        search: false,
        render: (_, record) => <div>{record?.users?.map(u => u.name).join()}</div>
    }, {
        title: '巡检次数统计',
        dataIndex: 'patrolCount',
        key: 'patrolCount',
        ellipsis: true,
        search: false,
    }, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        search: false,
        width: 200,
        render: (_, record) => {
            return <>
                <Button type="link" onClick={() => {
                    setType('edit')
                    setCurRecord(record)
                    setVisible(true)
                }}>修改</Button>
                <Button type="link" onClick={() => {
                    setType('view')
                    setCurRecord(record)
                    setVisible(true)
                }}>查看</Button>
                <Popconfirm
                    title="确认删除？"
                    onConfirm={() => {
                        dispatch(delPatrolPlan(record.id)).then(res => {
                            if (res.success) {
                                tableRef.current.reload();
                            }
                        })
                    }}>
                    <Button type="link" danger>删除</Button>
                </Popconfirm>
            </>
        },
    }];

    return (
        <>
            <ProTable
                columns={columns}
                actionRef={tableRef}
                options={false}
                dataSource={dataSource || []}
                rowKey='id'
                pagination={{ pageSize: 10 }}
                search={{
                    defaultCollapsed: false,
                    labelWidth: 'auto',
                    optionRender: (searchConfig, formProps, dom) => [
                        ...dom.reverse(),
                        <Button
                            type="primary"
                            key="primary"
                            onClick={() => {
                                setType('create')
                                setVisible(true)
                            }}
                        >新增巡检计划</Button>,
                    ],
                }}
                request={async (params = {}) => {
                    const res = await dispatch(getPatrolPlan(params));
                    setDataSource(res?.payload.data?.rows);
                    return { ...res };
                }}
                onReset={() => { }}
            />
            {
                visible ?
                    <PlanModal
                        visible={visible}
                        onCreate={onCreate}
                        type={type}
                        curRecord={curRecord}
                        onCancel={() => {
                            setVisible(false);
                            setCurRecord(null)
                        }}
                    /> : null
            }
        </>
    )
}

function mapStateToProps(state) {
    const { auth } = state
    return {
        user: auth.user
    }
}
export default connect(mapStateToProps)(PatrolPlan);