import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button, Popconfirm, Tag } from 'antd';
import ProTable from '@ant-design/pro-table';
import PlanTemplateModal from '../components/planTemplateModal';
import { createPatrolTemplate, delPatrolTemplate, updatePatrolTemplate, getPatrolTemplate } from '../actions/template';
import { getCheckItemsGroup } from '../actions/checkItems';

function PatrolTemplate(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(getCheckItemsGroup())
    }, [])

    const columns = [{
        title: '模板名称',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true,
    }, {
        title: '模板描述',
        dataIndex: 'describe',
        key: 'describe',
        ellipsis: true,
        search: false,
    }, {
        title: '操作人',
        dataIndex: 'user.name',
        key: 'user.name',
        ellipsis: true,
        search: false,
        render: (t, r, i) => {
            return r.user ? r.user.name : '-'
        }
    }, {
        title: '检查项',
        dataIndex: 'checkItems',
        key: 'checkItems',
        ellipsis: true,
        search: false,
        render: (_, r) => {
            return r?.checkItems ? r?.checkItems.map(c => <Tag>{c.name}</Tag>) : '-'
        }
    }, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        search: false,
        width: 200,
        render: (_, record) => {
            return <>
                <Button type="link" onClick={() => {
                    setType('edit')
                    setCurRecord(record)
                    setVisible(true)
                }}>修改</Button>
                <Popconfirm
                    title="确认删除？"
                    onConfirm={() => {
                        dispatch(delPatrolTemplate(record.id)).then(res => {
                            if (res.success) {
                                tableRef.current.reload();
                            }
                        })
                    }}>
                    <Button type="link" danger disabled={record && record.patrolPlans && record.patrolPlans.length}>删除</Button>
                </Popconfirm>
            </>
        },
    }];

    return (
        <>
            <ProTable
                columns={columns}
                actionRef={tableRef}
                options={false}
                dataSource={dataSource || []}
                rowKey='id'
                pagination={{ pageSize: 10 }}
                search={{
                    defaultCollapsed: false,
                    optionRender: (searchConfig, formProps, dom) => [
                        ...dom.reverse(),
                        <Button
                            type="primary"
                            key="primary"
                            onClick={() => {
                                setType('create')
                                setVisible(true)
                            }}
                        >新增巡检模板</Button>,
                    ],
                }}
                request={async (params = {}) => {
                    const res = await dispatch(getPatrolTemplate(params));
                    setDataSource(res?.payload.data?.rows);
                    return { ...res };
                }}
                onReset={() => { }}
                rowClassName={(record, index) => {
                    let className = 'global-light-row';
                    if (index % 2 === 1) className = 'global-dark-row';
                    return className;
                }}
            />
            {
                visible ?
                    <PlanTemplateModal
                        visible={visible}
                        type={type}
                        curRecord={curRecord}
                        onCancel={() => {
                            setVisible(false);
                            setCurRecord({})
                        }}
                        tableRef={tableRef}
                    /> : null
            }
        </>
    )
}

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