import { goodsPage, goodsUpdate } from '@/services/goods/index';
import { history } from '@umijs/max';

import React, { useRef, useEffect } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Button, Modal, Image, Switch } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';



const GoodsTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            valueType: 'text',
            search: false,
        },
        {
            title: '功率',
            dataIndex: 'itemType',
            valueType: 'text',
            search: false,
        },
        {
            title: '销售价格',
            dataIndex: 'salePrice',
            valueType: 'text',
            search: false,
        },
        {
            title: '利润',
            dataIndex: 'profit',
            valueType: 'text',
            search: false,
        },
        {
            title: '库存',
            dataIndex: 'stock',
            valueType: 'text',
            search: false,
        },
        {
            title: '销量',
            dataIndex: 'sales',
            valueType: 'text',
            search: false,
        },
        {
            title: '商品主图',
            dataIndex: 'picture',
            valueType: 'text',
            search: false,
            render: (_, record) => {
                let _Img = record.picture ? JSON.parse(record.picture)[0] : ''
                return _Img ? <Image src={_Img} width={50}></Image> : ''
            }
        },
        {
            title: '是否上架',
            dataIndex: 'isUp',
            valueType: 'text',
            search: false,
            render: (_, record) => {
                let onChange = async (e) => {
                    let data = JSON.parse(JSON.stringify(record))
                    data.isUp = e ? 1 : 0
                    let _res = await goodsUpdate(data)
                    message.success(e ? '上架成功' : '下架成功');
                    if (actionRef.current) {
                        actionRef.current.reload();
                    }
                }
                return <Switch checkedChildren="上架" value={record.isUp == 1 ? true : false} unCheckedChildren="下架" defaultChecked onChange={onChange} />
            }

        },
        {
            title: '操作',
            dataIndex: 'option',
            width: '220px',
            valueType: 'option',
            render: (_, record) => [
                <Button
                    type="link"
                    size="small"
                    onClick={() => {
                        history.push(`goods/${record.id}/update`);
                    }}
                >
                    编辑
                </Button>,
                <Button
                    type="link"
                    size="small"
                    danger
                    key="api/sys/menu/deleteBatchByIds"
                    onClick={async () => {
                        Modal.confirm({
                            title: '删除',
                            content: '确定删除该项吗？',
                            okText: '确认',
                            cancelText: '取消',
                            onOk: async () => {
                                const success = await handleRemoveOne(record);
                                if (success) {
                                    if (actionRef.current) {
                                        actionRef.current.reload();
                                    }
                                }
                            },
                        });
                    }}
                >
                    删除
                </Button>,
            ],
        },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="goodsList"
                    search={{
                        labelWidth: 120,
                    }}
                    toolBarRender={() => [
                        <Button
                            type="primary"
                            key="add"
                            onClick={async () => {
                                history.push('goods/0/create');
                            }}
                        >
                            <PlusOutlined /> 新建
                        </Button>
                    ]}
                    request={async (params, sorter, filter) => {
                        let { data } = await goodsPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default GoodsTableList;