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 access = useAccess()


    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            valueType: 'text',
            search: true,
        },
        {
            title: '功率',
            dataIndex: 'itemType',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                return record?.itemType ? record?.itemType + 'KW' : '-'
            }
        },
        {
            title: '设备类型',
            dataIndex: 'purposeType',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                return record?.purposeType == 1 ? '商用运维版' : record?.purposeType == 2 ? '商用合作版' : record?.purposeType == 3 ? '家庭专业版' : '-'
            }
        },
        {
            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"
                    hidden={!access.hasPerms('/api/goods/update')}
                    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,
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <Button
                            type="primary"
                            key="add"
                            hidden={!access.hasPerms('/api/goods/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;
