import { Modal, message, Popconfirm, Button } from 'antd';
import React, { useEffect, useState, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { GetDeviceStorePage, removeSingleStockAdjust, PushStockAsync, CheckStockAdjust } from '../services';
import StockMaterialForm from "./StockMaterialForm";
import { PlusOutlined } from '@ant-design/icons';

const StockMaterial = (props) => {
    const actionRef = useRef();

    // 是否展示库存弹窗
    const [showStockForm, setShowStockForm] = useState(false);
    // 当前操作的库存
    const [currStock, setCurrStock] = useState();

    const columns = [
        {
            title: '主键',
            dataIndex: 'id',
            hideInSearch: true,
            hideInTable: true,
            tip: '规则名称是唯一的 key',
        },
        {
            title: '物料',
            dataIndex: 'batching_Name',
            valueType: 'textarea',
        },
        {
            title: '数量',
            dataIndex: 'batching_Count',
            valueType: 'textarea',
        },
        {
            title: '库位',
            dataIndex: 'batching_Loc',
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => [
                <a
                    key="config"
                    onClick={() => {
                        setCurrStock(record);
                        setShowStockForm(true);
                    }}
                >
                    修改
                </a>,
                <Popconfirm
                    type="primary"
                    key="primary"
                    title="确认删除吗？"
                    okText="是"
                    cancelText="否"
                    onConfirm={() => handleDelete(record)}
                >
                    <a href="#">删除</a>
                </Popconfirm>,
            ],
        },
    ];

    const handleOk = () => {
        props.onOk();
    }

    /**
     * 删除库存原料
     * @param {*} record 
     */
    const handleDelete = async (record) => {
        const response = await removeSingleStockAdjust(record.id);
        if (response.data) {
            message.success('删除成功');
            actionRef.current.reload();
        } else {
            message.error('删除失败，请重试');
        }
    }

    useEffect(() => {

    }, []);

    return (
        <Modal
            width={700}
            destroyOnClose
            title={`【${props.device.deviceName}】库存原料`}
            visible={props.open}
            onCancel={() => props.onCancel()}
            onOk={handleOk}
            maskClosable={false}
        >
            <ProTable
                actionRef={actionRef}
                rowKey="id"
                search={false}
                params={{
                    deviceId: props.device.id,
                }}
                toolBarRender={() => [
                    <Popconfirm
                        type="primary"
                        key="primary-async-time"
                        title="获取实时库存会覆盖本次补货数据"
                        okText="是"
                        cancelText="否"
                        onConfirm={async () => {
                            const response = await CheckStockAdjust(props.device.id);
                            if (response.data) {
                                message.success('获取实时库存会成功！');
                                actionRef.current.reload();
                            } else {
                                message.error(response.errors || '获取实时库存会失败！');
                            }
                        }}
                    >
                        <Button
                            type="primary"
                            key="primary"
                        >
                            获取实时库存
                        </Button>
                    </Popconfirm>,
                    <Popconfirm
                        type="primary"
                        key="primary-async"
                        title="确认同步吗？"
                        okText="是"
                        cancelText="否"
                        onConfirm={async () => {
                            const response = await PushStockAsync(props.device.id);
                            if (response.data) {
                                message.success('同步成功！');
                                actionRef.current.reload();
                            } else {
                                message.error(response.errors || '同步失败！');
                            }
                        }}
                    >
                        <Button
                            type="primary"
                            key="primary"
                        >
                            同步库存
                        </Button>
                    </Popconfirm>,
                    <Button
                        type="primary"
                        key="primary"
                        onClick={() => {
                            setCurrStock(undefined);
                            setShowStockForm(true);
                        }}
                    >
                        <PlusOutlined /> 新增库存原料
                    </Button>
                ]}
                request={async (params) => {
                    const response = await GetDeviceStorePage(params);
                    if (response.statusCode === 200) {
                        return {
                            data: response.data.data,
                            success: true,
                            total: response.data.total,
                        };
                    }
                    return [];
                }}
                columns={columns}
            />

            {
                showStockForm && <StockMaterialForm
                    device={props.device}
                    stockMaterial={currStock}
                    open={showStockForm}
                    onOk={() => {
                        setShowStockForm(false);
                        actionRef.current.reload();
                    }}
                    onCancel={() => setShowStockForm(false)}
                >

                </StockMaterialForm>
            }
        </Modal>
    );
};

export default StockMaterial;
