import { DropboxOutlined, PlusOutlined, DownloadOutlined } from '@ant-design/icons';
import { Button, message, Modal, Input, Form, Select, Popconfirm } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import api from './service';

const Manage = () => {
    const [row, setRow] = useState();
    //获取店铺(店铺信息)
    const [shopList, setShopList] = useState([]);
    //绑定
    const actionRef = useRef();

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();


    // 获取店铺分类、商品名称信息
    useEffect(() => {
        getShopList();
    }, []);
    const getShopList = async () => {
        const response = await api.GetAllStore();
        if (response.statusCode == 200) {
            setShopList(response.data);
        } else {
            message.error(response.msg || '获取店铺列表失败');
        }

    }

    const columns = [
        {
            title: '主键',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
        },
        {
            title: '归属场景',
            dataIndex: 'storeId',
            ellipsis: true,
            hideInSearch: true,
            render: (_, record) => {
                const find = shopList.find(item => item.id === record.storeId);
                if (find) {
                    return <div>{find.name}</div>
                }
            }
        },
        {
            title: '授权码',
            dataIndex: 'authorizeCode',
            hideInSearch: true,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            width: 200,
            render: (_, record) => [
                <Popconfirm
                    title="确定要重新授权吗?"
                    onConfirm={() => {
                        api.Update({ id: record.id }).then((re) => {
                            if (re.data) {
                                message.success('修改成功');
                                setIsModalOpen(false);
                                actionRef.current.reloadAndRest();
                            } else {
                                message.error('修改失败');
                            }
                        });
                    }}
                    okText="确定"
                    cancelText="取消" >
                    <a
                        key={record.id}
                        onClick={async () => {

                        }} >
                        重新授权
                    </a>
                </Popconfirm>,
                <Popconfirm
                    title="确认删除吗?"
                    onConfirm={() => {
                        api.Del(record.id).then((re) => {
                            if (re.data) {
                                message.success('删除成功');
                                setIsModalOpen(false);
                                actionRef.current.reloadAndRest();
                            } else {
                                message.error('删除成功');
                            }
                        });
                    }}
                    okText="确定"
                    cancelText="取消" >
                    <a
                        key={record.id}
                        onClick={async () => {

                        }} >
                        删除
                    </a>
                </Popconfirm>

            ],
        },
    ];



    return (
        <PageContainer header={{
            title: '',
            breadcrumb: {},
          }}>
            <ProTable
                headerTitle=""
                actionRef={actionRef}
                rowKey="orderFlowId"
                search={{
                    labelWidth: 120,
                }}
                toolBarRender={() => [
                    <Button type="primary" key="create" onClick={() => { setIsModalOpen(true); }}>
                        <DownloadOutlined /> 新建
                    </Button>,
                ]}
                columns={columns}
                //数据绑定
                request={async (params, sorter, filter) => {
                    const msg = await api.page(params);
                    return {
                        data: msg.data.data,
                        success: true,
                        total: msg.data.total,
                    };
                }}
            ></ProTable>

            <>
                <Modal title="授权" open={isModalOpen} onOk={() => { form.submit() }} onCancel={() => {
                    setIsModalOpen(false);
                }}>
                    <Form
                        form={form}
                        preserve={false}
                        layout="horizontal"
                        labelCol={{ span: 4 }}
                        onFinish={async (value) => {
                            if (value.id) {
                                api.Update(value).then((re) => {
                                    if (re.data) {
                                        message.success('修改成功');
                                        handleModalVisible(false);
                                        actionRef.current.reloadAndRest();
                                    } else {
                                        message.error('修改失败');
                                    }
                                });
                            } else {
                                api.Create(value).then((re) => {
                                    if (re.data) {
                                        setIsModalOpen(false);
                                        message.success('添加成功');
                                        actionRef.current.reloadAndRest();
                                    } else {
                                        message.error(re.errors || '添加失败');
                                    }
                                });

                            }
                        }}
                    >
                        <Form.Item name="id" hidden={true}>
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="归属场景"
                            name="storeId"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择归属场景！',
                                },
                            ]}
                        >
                            <Select allowClear placeholder="请选择归属场景" style={{ width: '100%' }}>
                                {
                                    shopList.map(item => {
                                        return <Option value={item.id} key={item.id}>{item.name}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>

            </>
        </PageContainer>
    );
};

export default Manage;
