import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProTable
} from '@ant-design/pro-components';
import { Button, Image, ConfigProvider, Input  } from 'antd';
import { PostCompanyViplist ,PostCompanyFeechange} from '@/apis/api';
import { Imageprefix } from '@/constants';




const CompanyListPage: React.FC = ({ dispatch, getId, openModel }: any) => {
    const actionRef = useRef<ActionType>();
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(10)
    const [fullname, setFullname] = useState<any>(sessionStorage.getItem('vip_company_info') ? JSON.parse(sessionStorage.getItem('vip_company_info')).full_name : '')

    const setId = (id: number) => {
        getId(id)
    }

    useEffect(() => {
        if (!openModel.openModal) {
            actionRef.current.reload();
        }
    }, [openModel.openModal])

    useEffect(() => {
        if (!openModel.openFeeModal) {
            actionRef.current.reload();
        }
    }, [openModel.openFeeModal])

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                        colorLink: '#4FBE70',

                    }
                }}
            >

                <ProTable
                    scroll={{ x: 1300 }}
                    actionRef={actionRef}
                    dataSource={list}
                    columns={[
                        {
                            title: '筛选日期',
                            dataIndex: 'date_range',
                            hidden: true,
                            width: 120,
                            valueType: 'dateRange',
                        },
                        {
                            title: 'ID',
                            dataIndex: 'id',
                            width: 80,
                            fixed: 'left',
                        },
                        {
                            title: '企业名称',
                            dataIndex: 'full_name',
                            width: 300,
                            fixed: 'left',
                            valueType: 'input',
                            renderFormItem: () => {
                                return (
                                    <><Input placeholder="请输入企业名称" value={fullname} onChange={(e) => {
                                        setFullname(e.target.value)
                                    }} /></>  
                                )
                            }
                        },
                     
                        {
                            title: '见习基地',
                            dataIndex: 'probation_text',
                            search: false,
                            width: 100,
                        },
                        {
                            title: '知名企业',
                            dataIndex: 'famous_text',
                            search: false,
                            width: 100
                        },
                        {
                            title: '会员类型',
                            dataIndex: 'member_type_text',
                            search: false,
                            width: 100
                        },
                        {
                            title: '会员状态',
                            dataIndex: 'member_status_text',
                            width: 100,
                            search: false,

                        },
                        {
                            title: '开始时间',
                            dataIndex: 'start_date',
                            search: false,

                            width: 200
                        },
                        {
                            title: '到期时间',
                            dataIndex: 'end_date',
                            search: false,

                            width: 200
                        }, {
                            title: '剩余点数',
                            dataIndex: 'balance_fee',
                            search: false,
                            width: 100,
                        },
                        {
                            title: '业务员',
                            dataIndex: 'sales',
                            search: false,
                            width: 200
                        },
                        {
                            title: '操作',
                            width: 300,
                            key: 'option',
                            valueType: 'option',
                            fixed: 'right',
                            render: (_, record, action) => [
                                <Button key='1' type='link' onClick={() => {
                                    setId(record.id)
                                    dispatch({ type: 'openModel/getOpenModal', payload: true })
                                }}>编辑</Button>,
                                <Button key='1' type='link' onClick={() => {
                                    setId(record.id)
                                    dispatch({ type: 'openModel/getOpenFeeModal', payload: true })
                                }}>变更点数</Button>
                            ],
                        },
                    ]}
                    rowKey="id"
                    pagination={{
                        current: page,
                        pageSize: pageSize,
                        showSizeChanger: true,
                        total: total,
                        pageSizeOptions: [9, 18, 27, 99],
                        onChange(page, pageSize) {
                            setPage(page)
                            setPageSize(pageSize)
                        },
                        onShowSizeChange(current, size) {
                            setPage(current)
                            setPageSize(size)
                        }
                    }}
                    request={async (params = {} as Record<string, any>) =>
                        PostCompanyViplist({
                            page: page,
                            pagesize: pageSize,
                            sort: 'id',
                            sortby: 'desc',
                            keyword: fullname,
                            start_date: params.date_range ? params.date_range[0] : '',
                            end_date: params.date_range ? params.date_range[1] : '',
                        }).then(res => {
                            setList(res.data.list)
                            setTotal(res.data.total)
                        })
                    }
                    onReset={() => {
                        if (sessionStorage.getItem('vip_company_info')) {
                            sessionStorage.removeItem('vip_company_info')
                        }
                        setFullname('')
                        actionRef.current.reload();
                    }}
                    headerTitle="企业列表"
                />
            </ConfigProvider>
        </>
    );
};



export default connect(({ dictModel, openModel }: any) => ({
    dictModel,
    openModel
}))(CompanyListPage);