import React, { useEffect, useRef, useState } from "react";
import closeIcon from "@/assets/brand/closeIcon.png";

import './reportDetail.less'
import ProTable from "@ant-design/pro-table";
import { handleGetDataList, handleGetMobilePayment, handleGetShopTypeTree } from "@/pages/DataVerification/list/service";
import { Button, Input, Select, TreeSelect, Table } from "antd";


const reportDetail: React.FC<{ queryRecords: boolean, selectQueryType: number, currentItem: any, currentRow: any, currentUser: any }> = ({ queryRecords, selectQueryType, currentItem, currentRow, currentUser }) => {
    const tableRef = useRef()
    // 收银前端流水合计
    const [totalRepayment, setTotalRepayment] = useState<number>(0)
    // 单品报表
    const firstColumns = [
        {
            title: '序',
            dataIndex: 'index',
            width: 70,
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '商品名称',
            width: 250,
            align: 'center',
            dataIndex: 'commodity_name',
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: '商品条码',
            width: 120,
            align: 'center',
            dataIndex: 'Commodity_Barcode',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>销售数量</div>,
            width: 80,
            align: 'right',
            valueType: 'digit',
            dataIndex: 'Total_Count',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>销售单价</div>,
            width: 80,
            align: 'right',
            valueType: 'digit',
            dataIndex: 'Commodity_RetailPrice',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>优惠金额</div>,
            width: 80,
            align: 'right',
            valueType: 'digit',
            dataIndex: 'Total_OffAmount',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>实收总额</div>,
            width: 80,
            align: 'right',
            valueType: 'digit',
            dataIndex: 'Total_SellAmount',
            hideInSearch: true,
        },
        {
            title: '商品类型',
            width: 120,
            align: 'center',
            dataIndex: 'CommodityType_Name',
            // request: async () => {
            //     return await getFieldEnumTree({ FieldExplainField: 'CommodityType_Id', sessionName: 'CommodityType_Id' });
            // },
        },
        {
            title: '单品扫码标识',
            width: 120,
            align: 'center',
            dataIndex: 'ScanSymbol',
            hideInSearch: true,
        }
    ]
    // 香烟记录
    const secondColumns = [
        {
            title: '序',
            width: 70,
            align: 'center',
            dataIndex: 'index',
            hideInSearch: true,
        },
        {
            title: '商品名称',
            width: 250,
            align: 'center',
            ellipsis: true,
            dataIndex: 'commodity_name',
            hideInSearch: true,
        },
        {
            title: '商品条码',
            width: 150,
            align: 'center',
            dataIndex: 'Commodity_Barcode',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>销售数量</div>,
            width: 80,
            dataIndex: 'Total_Count',
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>销售单价</div>,
            dataIndex: 'Commodity_RetailPrice',
            width: 80,
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>优惠金额</div>,
            dataIndex: 'Total_OffAmount',
            width: 80,
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>实收总额</div>,
            dataIndex: 'Total_SellAmount',
            width: 80,
            align: 'right',
            valueType: 'digit',
            hideInSearch: true,
        },
        {
            title: '商品类型',
            width: 120,
            align: 'center',
            dataIndex: 'CommodityType_Name',
            hideInSearch: true,
        },
    ]
    // 支付记录
    const thirdColumns = [
        {
            title: '序',
            width: 70,
            align: 'center',
            dataIndex: 'index',
            hideInSearch: true,
        },
        {
            title: '交易结果',
            width: 120,
            align: 'center',
            dataIndex: 'FactTradeState',
            hideInSearch: true,
        },
        {
            title: '销售时间',
            dataIndex: 'MobilePayDate',
            hideInSearch: true,
            align: 'center',
            width: 150
        },
        {
            title: '单据编号',
            dataIndex: 'TicketCode',
            hideInSearch: true,
            align: 'center',
            width: 250
        },
        {
            title: <div style={{ textAlign: 'center' }}>销售金额</div>,
            width: 120,
            valueType: 'digit',
            align: 'right',
            dataIndex: 'TicketAmount',
            hideInSearch: true,
        },
        {
            title: '后台交易状态',
            dataIndex: 'ChannelTradeState',
            hideInSearch: true,
            align: 'center',
            width: 120
        },
        {
            title: '前端交易状态',
            dataIndex: 'CashierTradeState',
            hideInSearch: true,
            align: 'center',
            width: 120
        },
        {
            title: '支付方式',
            dataIndex: 'OperatorType',
            hideInSearch: true,
            align: 'center',
            width: 120
        },
    ]
    const [tableData, setTableData] = useState<any>()
    const [exceptionType, setExceptionType] = useState<number>(5)
    const [treeData, setTreeData] = useState<any>()
    // 搜索表格内的 输入框的值
    const [searchText, setSearchText] = useState<string>()
    // 若搜索的输入框有值 出现的表格内容列表
    const [showDataList, setShowDataList] = useState<any>()
    // 商品类型的搜索项
    const [selectShopType, setSelectShopType] = useState<any>()
    console.log('currentItem', currentItem)
    console.log('currentRow', currentRow)


    // 商品类型列表

    useEffect(async () => {
        if (queryRecords && selectQueryType === 1) {
            const options = await handleGetShopTypeTree({ PROVINCE_CODE: currentUser?.ProvinceCode })
            console.log('options', options)
            setTreeData(options)
        }
    }, [queryRecords]);


    return (
        <div className={'reportDetail'}>
            <div className={'detailTop'}>
                <p className={'detailTitle'}>{selectQueryType === 1 ? '单品报表' : selectQueryType === 2 ? '香烟记录' : selectQueryType === 3 ? '支付记录' : ''}</p>
                <img className={'closeIcon'} src={closeIcon} />
            </div>
            <div className={'searchBox'}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    {
                        selectQueryType === 1 ?
                            <div className={'searchLabel'}>
                                <span className={'label'}>商品类型:</span>
                                <TreeSelect
                                    showSearch
                                    style={{ width: '250px' }}
                                    allowClear
                                    treeData={treeData}
                                    onChange={(e: any) => {
                                        console.log('e', e)
                                        setSelectShopType(e)
                                    }}
                                />
                            </div>
                            : ''
                    }
                    {
                        selectQueryType === 3 ?
                            <div className={'searchLabel'}>
                                <span className={'label'}>交易状态: </span>
                                <Select
                                    style={{ width: '250px' }}
                                    value={exceptionType}
                                    options={[
                                        { label: '异常数据', value: 5 },
                                        { label: '交易成功', value: 9 },
                                        { label: '人工确认', value: 1 },
                                        { label: '交易失败', value: 0 },
                                    ]}
                                    onChange={(e: any) => {
                                        setExceptionType(e)
                                    }}
                                />
                            </div>
                            : ''
                    }
                    <Input
                        allowClear
                        value={searchText}
                        style={{ width: '300px' }}
                        // onInput={(e: any)=>{
                        //     console.log('e',e)
                        //     setSearchText(e.target.value)
                        // }}
                        onChange={(e: any) => {
                            console.log('e', e)
                            setSearchText(e.target.value)
                        }}
                        placeholder={'商品名称/商品条码/销售数量/销售单价/优惠金额/实收总额/商品类型'}
                    />
                </div>
                <div className={'btnBox'}>
                    <Button style={{ marginRight: '8px' }} onClick={() => {
                        setSearchText('')
                        setSelectShopType(undefined)
                        tableRef.current?.reset()
                    }}>重置</Button>
                    <Button type={'primary'} onClick={() => {
                        tableRef.current?.reload()
                    }}>查询</Button>
                </div>
            </div>
            <ProTable
                actionRef={tableRef}
                options={false}
                search={false}
                bordered
                columns={selectQueryType === 1 ? firstColumns : selectQueryType === 2 ? secondColumns : selectQueryType === 3 ? thirdColumns : []}
                request={async (params) => {
                    console.log('params', params)
                    if (selectQueryType !== 3) {
                        let req
                        if (selectQueryType === 1) {
                            req = {
                                ServerpartCode: currentItem?.Serverpart_Code,
                                ShopCode: currentItem?.ServerpartShop_Code,
                                MachineCode: currentItem?.MachineCode,
                                StartDate: currentItem?.Endaccount_StartDate,
                                EndDate: currentItem?.Endaccount_EndDate,
                                CommodityTypeId: selectShopType
                            }
                        } else if (selectQueryType === 2) {
                            req = {
                                ServerpartCode: currentItem?.Serverpart_Code,
                                ShopCode: currentItem?.ServerpartShop_Code,
                                MachineCode: currentItem?.MachineCode,
                                StartDate: currentItem?.Endaccount_StartDate,
                                EndDate: currentItem?.Endaccount_EndDate,
                                CommodityTypeId: currentItem?.CigaretteTypeIds
                            }
                        }
                        const data = await handleGetDataList(req)
                        const list = JSON.parse(JSON.stringify(data.List))
                        list.forEach((item: any, index: number) => {
                            item.index = index + 1
                        })
                        if (searchText) {
                            const newList: any = []
                            list.forEach((item: any) => {
                                if (item.commodity_name.toString().indexOf(searchText) !== -1 ||
                                    item.Commodity_Barcode.toString().indexOf(searchText) !== -1 ||
                                    item.Total_Count.toString().indexOf(searchText) !== -1 ||
                                    item.Commodity_RetailPrice.toString().indexOf(searchText) !== -1 ||
                                    item.Total_OffAmount.toString().indexOf(searchText) !== -1 ||
                                    item.Total_SellAmount.toString().indexOf(searchText) !== -1 ||
                                    item.CommodityType_Name.toString().indexOf(searchText) !== -1
                                ) {
                                    newList.push(item)
                                }
                            })
                            return { data: newList }
                        }
                        setTableData(list)
                        return { data: list }
                    }
                    if (selectQueryType === 3) {
                        const req = {
                            ExceptionType: exceptionType,
                            ServerpartCode: currentItem?.Serverpart_Code,
                            ShopCode: currentItem?.ServerpartShop_Code,
                            MachineCode: currentItem?.MachineCode,
                            StartDate: currentItem?.Endaccount_StartDate,
                            EndDate: currentItem?.Endaccount_EndDate
                        }
                        const data = await handleGetMobilePayment(req)
                        const list = JSON.parse(JSON.stringify(data.List))
                        let money: number = 0
                        list.forEach((item: any, index: number) => {
                            item.index = index + 1
                            money += Number(item.TicketAmount)
                        })
                        setTotalRepayment(money)
                        if (searchText) {
                            const newList: any = []
                            list.forEach((item: any) => {
                                if (item.FactTradeState.toString().indexOf(searchText) !== -1 ||
                                    item.MobilePayDate.toString().indexOf(searchText) !== -1 ||
                                    item.TicketCode.toString().indexOf(searchText) !== -1 ||
                                    item.TicketAmount.toString().indexOf(searchText) !== -1 ||
                                    item.ChannelTradeState.toString().indexOf(searchText) !== -1 ||
                                    item.CashierTradeState.toString().indexOf(searchText) !== -1 ||
                                    item.OperatorType.toString().indexOf(searchText) !== -1
                                ) {
                                    newList.push(item)
                                }
                            })
                            return { data: newList }
                        }
                        setTableData(list)
                        return { data: list }
                    }
                    return { data: [], success: true }
                }}
                pagination={false}
                scroll={{ y: 'calc(100vh - 310px)', x: '100%' }}
            >
            </ProTable>
            {
                selectQueryType === 3 ?
                    <div style={{ width: '100%', boxSizing: 'border-box', paddingLeft: '24px' }}>
                        移动支付金额：收银前端<span style={{ color: 'red' }}>{currentItem?.MobilePay_Amount}</span>元， 后台交易<span style={{ color: 'red' }}>{currentItem?.MobilePay_Amount}</span>元， 金额差异<span style={{ color: 'red' }}>0.00</span>元
                        {
                            tableData && tableData.length > 0 ?
                                <>;收银前端流水合计<span style={{ color: 'red' }}>{totalRepayment.toFixed(2)}</span>元</> : ''
                        }
                    </div> : ''
            }
        </div>
    )
}
export default reportDetail
