import React, { useState, useRef, useEffect } from 'react';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Modal, Popconfirm, Input, Alert } from 'antd';
import { RecallCoupon, GetCouponRecordById, GetCouponRecordGoods,RecallCouponGoods } from '../service';

const record = (props) => {
    const ref = useRef();
    const { TextArea } = Input;
    const [isModalVisible, setIsModalVisible] = useState(false);
    var remark = "";
    const [row, setrow] = useState();

    const handleOk = async (value) => {

        if (props.couponRecord.showType == 1) {
            await RecallCoupon(JSON.stringify({ Id: row.id, Status: row.status == 1 ? 0 : 1, Remark: remark })).then(r => {
                setIsModalVisible(false);
                ref.current.reload();
            });
        } else {
            await RecallCouponGoods(JSON.stringify({ Id: row.id, Status: row.status == 1 ? 0 : 1, Remark: remark })).then(r => {
                setIsModalVisible(false);
                ref.current.reload();
            });
        }


    };

    const handleCancel = () => {

        setIsModalVisible(false);
    };
    const onChange = (value) => {
        remark = value.target.value;
    };
    const columns = [
        {
            title: '主键',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
        },
        {
            title: '适用范围',
            dataIndex: 'supplier',
            hideInSearch: true,
            valueType: 'textarea',
        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            valueEnum: {
                1: { text: "禁用", status: 'Warning' },
                0: { text: '启用', status: 'Success' },
            }
        },
        // {
        //     title: '适用范围',
        //     dataIndex: 'rangeType',
        //     hideInTable: true,
        //     valueType: 'textarea',
        //     valueEnum: {
        //         0: { text: "全部" },
        //         1: { text: '店铺' },
        //         2: { text: '供应商' },
        //         3: { text: '区域' }
        //     }
        // },
        {
            title: '备注',
            dataIndex: 'remark',
            hideInSearch: true,
            valueType: 'textarea',
        },
        {
            title: "发放时间",
            key: 'sendTime',
            hideInSearch: true,
            dataIndex: 'sendTime',
        },
        {
            title: "操作",
            dateIndex: "option",
            valueType: 'option',
            render: (_, p) => {

                return (<Popconfirm type="primary" key="primary" title="确认启用吗？" okText="是" cancelText="否"
                    onConfirm={async () => {
                        TextArea.value = p.remark;
                        setrow(p);
                        setIsModalVisible(true);
                    }}
                    onCancel={() => { }} >
                    <a href="#">{p.status == 0 ?   "禁用" :"启用" }</a>
                </Popconfirm>);
            }
        }
    ];

    return (<Modal footer={null} destroyOnClose visible={props.shows} width={1100} onCancel={() => { props.onCancel(); }}>
        <PageContainer
            headerTitle=""
            header={{
                title: '发放记录',
                breadcrumb: {},
            }}>
            <ProTable
                actionRef={ref}
                rowKey="id"
                options={false}
                search={{
                    labelWidth: 120,
                }}
                pagination={{
                    pageSize: 5
                }}
                columns={columns}
                request={async (params) => {
                    var queryData = [];
                    var total = 0;
                    params.couponId = props.couponRecord.couponId;
                    params.batchNo = props.couponRecord.batchNo;
                    if (props.couponRecord.showType == 1) {
                        await GetCouponRecordById(params).then((r) => {
                            queryData = r.data.data;
                            total = r.data.total;
                        });
                    } else {
                        await GetCouponRecordGoods(params).then((r) => {
                            queryData = r.data.data;
                            total = r.data.total;
                        });
                    }

                    return {
                        data: queryData,
                        success: true,
                        total: total,
                    };
                }}
            ></ProTable>
        </PageContainer>

        <Modal title="备注" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <TextArea onChange={event => onChange(event)} rows={4} />
        </Modal>

    </Modal>
    );
};

export default record;