import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { Col, Divider, FormInstance, Row } from "antd";
import ProForm, { ProFormDatePicker, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form";
import { useImperativeHandle, useRef, useState } from "react";
import { handleGetCASHWORKERList, handleGetEndaccountDetail, handleGetENDACCOUNTModel, handleGetStateFeedBackList } from "../service";
import ProTable from "@ant-design/pro-table";
import { handleGetCashierStatus } from "@/services/options";
import moment from 'moment'
import numeral from 'numeral'

type DetailProps = {
    currentRow: any
    currentUser: any
    onRef: any
}
const UnUploadDetail = ({ currentRow, currentUser, onRef }: DetailProps) => {
    const formRef = useRef<FormInstance>();
    // 表格详情内容
    const [formDetail, setFormDetail] = useState<any>()
    // 表格数据
    const [tableData, setTableData] = useState<any>()
    // 表格的加载效果
    const [tableLoading, setTableLoading] = useState<boolean>(false)

    // 实时校验信息表格
    const columns: any = [
        {
            title: '序号',
            width: 60,
            dataIndex: 'index',
            hideInSearch: true,
            align: 'center',
            valueType: 'index'
        },
        {
            title: '收银状态',
            dataIndex: 'index',
            width: 120,
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return record?.Connect_Date ? handleGetCashierStatus(record?.Connect_Date, 10) ? <span style={{ color: '#00bfff' }}>{'收银状态正常'}</span> :
                    <span style={{ color: '#c71585' }}>{'网络未连接'}</span> : '-'
            }
        },
        {
            title: "心跳时间",
            width: 200,
            dataIndex: 'Connect_Date',
            align: 'center',
            hideInSearch: true,
            sorter: (a, b) => new Date(a.Connect_Date).getTime() - new Date(b.Connect_Date).getTime(),
            defaultSortOrder: 'descend',
            render: (_, record) => {
                return record?.Connect_Date ? moment(record?.Connect_Date).format('YYYY-MM-DD HH:mm:ss') : '-'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>对客营收</div>,
            width: 120,
            dataIndex: 'Current_SellAmount',
            hideInSearch: true,
            valueType: 'digit',
            align: 'right'
        },
        {
            title: <div style={{ textAlign: 'center' }}>客单数量</div>,
            width: 120,
            dataIndex: 'Current_TicketCount',
            hideInSearch: true,
            align: 'right',
            valueType: 'digit'
        },
        {
            title: <div style={{ textAlign: 'center' }}>客单均价</div>,
            width: 120,
            dataIndex: 'averagePrice',
            hideInSearch: true,
            valueType: 'digit',
            align: 'right',
            render: (_, record) => {
                return record?.Current_TicketCount && record?.Current_SellAmount ? `${numeral(record?.Current_SellAmount / record?.Current_TicketCount).format('0,0.00')}` : '0'
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>今日营收</div>,
            width: 120,
            dataIndex: 'Current_SellAmount',
            hideInSearch: true,
            align: 'right',
            valueType: 'digit'
        },
        {
            title: <div style={{ textAlign: 'center' }}>在售人员</div>,
            width: 140,
            dataIndex: 'Current_Person',
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: 'POS机号',
            width: 120,
            align: 'center',
            dataIndex: 'MachineCode',
            hideInSearch: true,
            render: (_, record) => {
                return record?.MachineCode ? `POS${record?.MachineCode}` : '-'
            }
        },
        {
            title: 'IP地址',
            width: 120,
            align: 'center',
            dataIndex: 'Connect_IP',
            hideInSearch: true,
        },
        {
            title: '收银机版本号',
            width: 140,
            align: 'center',
            dataIndex: 'Version_Num',
            hideInSearch: true,
        }
    ]

    // 拿到表格数据
    const hanldeGetTableData = async (detail: any) => {
        setTableLoading(true)
        const req: any = {
            provinceCode: currentUser?.ProvinceCode,
            ServerpartCode: detail?.SERVERPARTCODE,
            ShopCode: detail?.SHOPCODE,
            // ServerpartIds: detail?.SERVERPART_ID,
            // ServerpartShopIds: detail?.ServerpartShop_Id,
        }
        const data = await handleGetStateFeedBackList(req)
        setTableData(data)
        setTableLoading(false)
    }


    useImperativeHandle(onRef, () => ({
        formRef,
        formDetail
    }));

    return (
        <div>
            <Divider orientation="left">结账单数据</Divider>
            <ProForm
                formRef={formRef}
                submitter={false}
                request={async () => {
                    if (currentRow?.Endaccount_Id) {
                        const data = await handleGetENDACCOUNTModel({ EndaccountId: currentRow?.Endaccount_Id })
                        console.log('detail', data);
                        setFormDetail(data)
                        hanldeGetTableData(data)
                        let obj: any = {
                            ...data,
                            ENDPERSONCODE: data.WORKER_NAME && data.ENDPERSONCODE ? `${data.WORKER_NAME}-${data.ENDPERSONCODE}` : '',
                            CASHIER_NAME: data?.CASHIER_NAME ? data?.CASHIER_NAME.split(',') : []
                        }
                        return obj
                    }
                    return {}
                }}
            >
                <Row gutter={16}>
                    <Col span={8}>
                        <ProFormText
                            label={"收银机号"}
                            name={"MACHINECODE"}
                            rules={[{
                                required: true,
                                message: '请输入收银机号！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDatePicker
                            label={"起始时间"}
                            width="lg"
                            name={"ENDACCOUNT_STARTDATE"}
                            rules={[{
                                required: true,
                                message: '请选择起始时间！'
                            }]}
                            initialValue={moment().subtract(1, 'd').format('YYYY-MM-DD')}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDatePicker
                            label={"结账时间"}
                            width="lg"
                            name={"ENDACCOUNT_DATE"}
                            rules={[{
                                required: true,
                                message: '请选择起始时间！'
                            }]}
                            initialValue={moment().subtract(1, 'd').format('YYYY-MM-DD')}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormSelect
                            label={"结账人员"}
                            name={"ENDPERSONCODE"}
                            rules={[{
                                required: true,
                                message: '请选择结账人员！'
                            }]}
                            request={async () => {
                                const req: any = {
                                    SearchParameter: {
                                        SERVERPART_IDS: formDetail?.SERVERPART_ID,
                                        // ServerpartShopIds: formDetail?.ServerpartShop_Id,
                                        Worker_ValId: 1,
                                        CASHWORKER_TYPE: 2
                                    },
                                    PageIndex: 1,
                                    PageSize: 999999
                                }
                                const data = await handleGetCASHWORKERList(req)
                                console.log('结账人员', data);
                                let list: any = []
                                if (data && data.length > 0) {
                                    data.forEach((item: any) => {
                                        list.push({ label: item.CASHWORKER_NAME, value: `${item.CASHWORKER_NAME}-${item.CASHWORKER_LOGINNAME}` })
                                    })
                                }
                                return list
                            }}
                            fieldProps={{
                                // fieldNames: {
                                //     label: 'CASHWORKER_NAME',
                                //     value: 'CASHWORKER_LOGINNAME'
                                // }
                            }}
                        />
                    </Col>
                    <Col span={16}>
                        <ProFormSelect
                            label={"收银人员"}
                            name={"CASHIER_NAME"}
                            rules={[{
                                required: true,
                                message: '请选择结账人员！'
                            }]}
                            request={async () => {
                                const req: any = {
                                    SearchParameter: {
                                        SERVERPART_IDS: formDetail?.SERVERPART_ID,
                                        // ServerpartShopIds: formDetail?.ServerpartShop_Id,
                                        Worker_ValId: 1,
                                        CASHWORKER_TYPE: 1
                                    },
                                    PageIndex: 1,
                                    PageSize: 999999
                                }
                                const data = await handleGetCASHWORKERList(req)
                                console.log('收银人员', data);
                                return data
                            }}
                            fieldProps={{
                                fieldNames: {
                                    label: 'CASHWORKER_NAME',
                                    value: 'CASHWORKER_NAME'
                                    // value: 'CASHWORKER_LOGINNAME'
                                },
                                mode: 'multiple'
                            }}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"客单数量"}
                            name={"TICKETCOUNT"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入客单数量！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"销售数量"}
                            name={"TOTALCOUNT"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入销售数量！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"销售金额"}
                            name={"TOTALSELLAMOUNT"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入销售金额！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"优惠金额"}
                            name={"TOTALOFFAMOUNT"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入优惠金额！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"现金支付"}
                            name={"CASH"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入现金金额！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"信用卡"}
                            name={"CREDITCARD"}
                            rules={[{
                                required: true,
                                message: '请输入信用卡！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"消费券"}
                            name={"COSTBILL"}
                            rules={[{
                                required: true,
                                message: '请输入消费券！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"其他支付"}
                            name={"OTHERPAY"}
                            rules={[{
                                required: true,
                                message: '请输入其他支付！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"实收金额"}
                            name={"CASHPAY"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入实收金额！'
                            }]}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormDigit
                            label={"缴款金额"}
                            name={"CASHPAY_DOWNLORD"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入缴款金额！'
                            }]}
                        />
                    </Col>
                    {/* <Col span={8}>
                        <ProFormDigit
                            label={"长短款"}
                            name={"DIFFERENT_PRICE"}
                            fieldProps={{
                                addonAfter: false
                            }}
                            rules={[{
                                required: true,
                                message: '请输入长短款！'
                            }]}
                        />
                    </Col> */}
                    <Col span={24}>
                        <ProFormTextArea
                            label={"产生原因"}
                            name={"DIFFERENCE_REASON"}
                            rules={[{
                                required: true,
                                message: '请输入产生原因！'
                            }]}
                        />
                    </Col>
                </Row>

            </ProForm>
            <Divider orientation="left">实时校验信息</Divider>
            <ProTable
                search={false}
                options={false}
                pagination={false}
                columns={columns}
                loading={tableLoading}
                dataSource={tableData}
                bordered
            />
        </div>
    )
}

export default connect(({ user, }: ConnectState) => ({
    currentUser: user.currentUser,
}))(UnUploadDetail);
