import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ProCard, ProTable } from '@ant-design/pro-components';
import { useRef } from 'react';
import { Space, Button, Popconfirm, message } from 'antd';
import { initial } from 'lodash';
import { getList, onAdd, onDelete } from './action';
import Form from './form';
import { useServiceContext } from '../../context';
import { PlusCircleOutlined } from '@ant-design/icons';
import { useRequest, useToggle } from 'ahooks';
import { CardForm, CardDetail } from '@component/ui';
import { themeMessage } from '@component/utils';
export default ({ readonly, title, required }) => {
    const actionRef = useRef();
    const [value, { set }] = useToggle({
        visible: false,
    });
    const { serviceId } = useServiceContext();
    const { runAsync, confirmLoading } = useRequest(onDelete, {
        manual: true,
        onSuccess(result) {
            themeMessage(result);
            if (result.type === 'success') {
                init && init();
            }
        },
        onError(result) {
            message.error(result.message);
        },
    });
    const columns = [
        {
            title: '企业名称',
            dataIndex: 'customerName',
            ellipsis: true,
            search: false,
        },
        {
            title: '姓名',
            dataIndex: 'userName',
            ellipsis: true,
            search: false,
        },
        {
            title: '电话',
            dataIndex: 'phone',
            ellipsis: true,
            search: false,
        },
        {
            title: '部门',
            dataIndex: 'groupName',
            ellipsis: true,
            search: false,
        },
        {
            title: '职务',
            dataIndex: 'userPosition',
            ellipsis: true,
            search: false,
        },
        {
            title: '操作',
            ellipsis: true,
            search: false,
            render(_, item) {
                return (_jsx(Popconfirm, Object.assign({ placement: "top", title: "\u786E\u8BA4\u5220\u9664\u5417\uFF1F", onConfirm: () => handleDelete(item), okText: "\u786E\u8BA4", cancelText: "\u53D6\u6D88", okButtonProps: { loading: confirmLoading } }, { children: _jsx(Button, Object.assign({ type: "link", danger: true, size: "small" }, { children: "\u5220\u9664" })) })));
            },
        },
    ];
    function init() {
        var _a;
        (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.reload();
    }
    function handleDelete(item) {
        return runAsync({
            Id: item.id,
        });
    }
    function onCancel() {
        set({
            visible: false,
        });
    }
    if (readonly) {
        return (_jsx(CardDetail, Object.assign({ title: title }, { children: _jsx(ProTable, { cardProps: {
                    bodyStyle: {
                        padding: 0,
                    },
                }, rowKey: "id", actionRef: actionRef, params: { serviceId }, options: false, search: false, pagination: false, columns: initial(columns), request: getList }) })));
    }
    return (_jsxs(CardForm, Object.assign({ gutter: [10, 10], title: _jsxs(_Fragment, { children: [required && _jsx("i", Object.assign({ style: { color: 'red' } }, { children: "*" })), title] }), extra: !readonly && (_jsx(Button, Object.assign({ type: "link", size: "small", icon: _jsx(PlusCircleOutlined, {}), onClick: () => set({
                item: null,
                title: '参与人员添加',
                service: onAdd,
                visible: true,
            }) }, { children: "\u6DFB\u52A0" }))) }, { children: [value.visible && (_jsx(Form, { item: value.item, title: value.title, service: value.service, init: init, onCancel: onCancel })), _jsx(ProTable, { cardProps: {
                    bodyStyle: {
                        padding: 0,
                    },
                }, rowKey: "id", actionRef: actionRef, params: { serviceId }, options: false, search: false, pagination: false, columns: columns, request: getList })] })));
};