import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import ProForm, { ProFormText, ProFormTextArea } from "@ant-design/pro-form";
import { useRef } from "react";
import billBasic from '@/assets/DataVerification/billBasic.png'
import { Button, Col, Row, Image } from "antd";
import billSale from '@/assets/DataVerification/billSale.png'
import billCheck from '@/assets/DataVerification/billCheck.png'
import ProTable from "@ant-design/pro-table";
import auditFeedback from '@/assets/DataVerification/auditFeedback.png'
import productDataImg from '@/assets/DataVerification/productData.png'
import mobilePay from '@/assets/DataVerification/mobilePay.png'
import upLoad from '@/assets/DataVerification/upLoad.png'
import noData from '@/assets/DataVerification/noData.svg'
import './detailBasicInfo.less'


type DetailProps = {
    leftTimeList: any;
    disableBtn: any;
    setPayDetail: any;
    setFlowFlush: any;
    currentDetail: any;
    auditTableData: any;
    setAuditRowDetail: any;
    setShowAuditDrawer: any;
    handleGetQueryRecords: any;
    selectTab: any;
    setShowChangeLoading: any;
    handleGetShopPriceData: any;
    imgList: any;
    formRef: any;
}
const DetailBasicInfo = ({ formRef, imgList, handleGetShopPriceData, setShowChangeLoading, selectTab, handleGetQueryRecords, setAuditRowDetail, setShowAuditDrawer, auditTableData, leftTimeList, disableBtn, setPayDetail, setFlowFlush, currentDetail }: DetailProps) => {
    const columns: any = [
        {
            dataIndex: 'Check_Info',
            title: '稽核反馈',
        },
        {
            dataIndex: 'Error_Rate',
            title: '稽核误差率',
            render: (_, record) => {
                return <span style={{ color: record.Error_Rate > 0.2 ? 'red' : '' }}>{`${record.Error_Rate}%`}</span>
            }
        },
        {
            dataIndex: 'Difference_Amount',
            title: '长短款/流水冲正',
            render: (_, record) => {
                return <span style={{ color: record.Difference_Amount > 0 ? 'green' : 'red' }}>
                    {`${record.Difference_Amount} / ${record.Supplement_Amount}`}
                </span>
            }
        },
        {
            dataIndex: 'Audit_Date',
            title: '稽查时间',
        },
        {
            dataIndex: 'Audit_Type',
            title: '稽查类型',
        },
        {
            dataIndex: 'Audit_Id',
            title: '稽查内码',
            hideInTable: true
        },
    ]



    return (
        <div>
            {
                leftTimeList && leftTimeList.length > 0 ?
                    <div className={'listRight'}>
                        <ProForm
                            formRef={formRef}
                            submitter={{
                                // 清空表单自带的按钮
                                render: (props, doms) => {
                                    return []
                                }
                            }}>
                            <div className={'rightFormTitle'}>
                                <div className={'titleLeft'}>
                                    <img className={'titleIcon'} src={billBasic} />
                                    <span className={'titleName'}>{'账单基础信息'}</span>
                                </div>
                            </div>
                            <div style={{ paddingLeft: '20px', marginTop: '8px' }}>
                                <Row>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='收银机号'
                                            name='MachineCode'
                                        />
                                    </Col>
                                    <Col className={'CashierName'} span={6}>
                                        <ProFormText

                                            readonly
                                            label='收银人员'
                                            name='Cashier_Name'
                                        />
                                    </Col>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='结账人员'
                                            name='Checkout_Name'
                                        />
                                    </Col>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='稽核人员'
                                            name='Auditor_Name'
                                        />
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='起始时间'
                                            name='Endaccount_StartDate'
                                        />
                                    </Col>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='结账时间'
                                            name='Endaccount_EndDate'
                                        />
                                    </Col>
                                </Row>
                            </div>

                            <div className={'rightFormTitle'} >
                                <div className={'titleLeft'}>
                                    <img className={'titleIcon'} src={billSale} />
                                    <span className={'titleName'}>{'账单销售信息'}</span>
                                </div>
                                {
                                    disableBtn ?
                                        <Button onClick={() => {
                                            setPayDetail(true)
                                        }}>支付明细</Button> : ''
                                }
                            </div>
                            <div style={{ paddingLeft: '20px', marginTop: '8px' }}>
                                <Row>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='客单数量'
                                            name='Ticket_Count'
                                        />
                                    </Col>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='客单均价'
                                            name='AvgTicketPrice'
                                        />
                                    </Col>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='优惠金额'
                                            name='TotalOff_Amount'
                                        />
                                    </Col>
                                    <Col span={6}>
                                        <ProFormText
                                            readonly
                                            label='稽核补录'
                                            name='Check_Replenish'
                                        />
                                    </Col>
                                </Row>
                                <div className={'specialField'}>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="总销售额"
                                            name='TotalSell_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="现金支付"
                                            name='Cash_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="移动支付"
                                            name='MobilePay_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="其他支付"
                                            name='OtherPay_Amount'
                                        />
                                    </div>
                                </div>

                                <div className={'specialField'}>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="长款金额"
                                            name='Difference_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="缴款金额"
                                            name='Payment_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'-'}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="现金支付"
                                            name='Cash_Amount'
                                        />
                                    </div>
                                    {/* <span>{'+'}</span> */}
                                    <div className={'fieldItem'} style={{ width: 'calc(25% + 10px)' }}>
                                    </div>
                                </div>
                            </div>

                            <div className={'rightFormTitle'} >
                                <div className={'titleLeft'}>
                                    <img className={'titleIcon'} src={billCheck} />
                                    <span className={'titleName'}>{'账单校验说明'}<span style={{ marginLeft: '12px', color: 'red', fontSize: '14px', fontWeight: 500 }}>{'必填项'}</span></span>
                                </div>
                                {
                                    disableBtn ?
                                        <Button onClick={() => {
                                            setFlowFlush(true);
                                        }}>流水冲正</Button> : ''
                                }
                            </div>
                            <div className={'specialField'} >
                                <div style={{ paddingLeft: '20px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: "space-between" }}>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请输入实收金额'
                                                }
                                            ]}
                                            label="实收金额"
                                            name='Revenue_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="总销售额"
                                            name='TotalSell_Amount'
                                        />
                                    </div>
                                    <span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
                                    <div className={'fieldItem'}>
                                        <ProFormText
                                            // readonly
                                            disabled
                                            label="冲正金额"
                                            name='Correct_TotalAmount'
                                        />
                                    </div>
                                    <div className={'fieldItem'} style={{ width: 'calc(25% + 10px)' }}>
                                    </div>
                                </div>
                            </div>
                            <Row>
                                <div style={{ width: '100%' }}>
                                    <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                        <Col span={24}>
                                            {
                                                currentDetail?.Approved_Info ?
                                                    <span style={{ color: 'red' }}>{`${currentDetail?.Approved_Staff || '-'}【${currentDetail?.Approved_Date || '-'}】:${currentDetail?.Approved_Info || '-'}`}</span> : ''
                                            }
                                            <ProFormTextArea
                                                label="校验说明"
                                                name='Description_Info'
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: '请输入校验说明'
                                                    }
                                                ]}
                                                fieldProps={{
                                                    placeholder: ""
                                                }}
                                            />
                                        </Col>
                                    </div>
                                </div>
                            </Row>
                            {
                                disableBtn ?
                                    <>
                                        {
                                            auditTableData && auditTableData.length > 0 ?
                                                <>
                                                    <div className={'rightFormTitle'} >
                                                        <div className={'titleLeft'}>
                                                            <img className={'titleIcon'} src={auditFeedback} />
                                                            <span className={'titleName'}>{'稽核反馈'}</span>
                                                        </div>
                                                    </div>
                                                    <ProTable
                                                        style={{ marginTop: '12px' }}
                                                        search={false}
                                                        options={false}
                                                        columns={columns}
                                                        dataSource={auditTableData}
                                                        onRow={(record) => {
                                                            return {
                                                                onClick: (event) => {
                                                                    setAuditRowDetail(record)
                                                                    setShowAuditDrawer(true)
                                                                },
                                                            }
                                                        }}
                                                    >
                                                    </ProTable>
                                                </> : ''
                                        }
                                        <div className={'rightFormTitle'} >
                                            <div className={'titleLeft'}>
                                                <img className={'titleIcon'} src={productDataImg} />
                                                <span className={'titleName'}>{'单品数据'}</span>
                                            </div>
                                            {
                                                disableBtn ?
                                                    <div>
                                                        <Button style={{ marginRight: '8px' }} onClick={() => {
                                                            handleGetQueryRecords(1)
                                                        }}>查询单品报表</Button>
                                                        {
                                                            selectTab === 1 ?
                                                                <Button onClick={() => {
                                                                    setShowChangeLoading(true)
                                                                    handleGetShopPriceData(1, currentDetail?.Endaccount_Id)
                                                                }}>获取单品数据</Button> : ''
                                                        }
                                                    </div> : ''
                                            }
                                        </div>
                                        <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                            <Row>
                                                <Col span={6}>
                                                    <ProFormText
                                                        readonly
                                                        label="销售数量"
                                                        name='SellCount_Sale'
                                                    />
                                                </Col>
                                                <Col span={6}>
                                                    <ProFormText
                                                        readonly
                                                        label="销售金额"
                                                        name='FactAmount_Sale'
                                                    />
                                                </Col>
                                            </Row>
                                        </div>

                                        {
                                            currentDetail?.ShowCigarette ?
                                                <>
                                                    <div className={'rightFormTitle'} style={{ marginTop: '24px' }}>
                                                        <div className={'titleLeft'}>
                                                            <img className={'titleIcon'} src={mobilePay} />
                                                            <span className={'titleName'}>{'香烟数据'}</span>
                                                        </div>
                                                        {
                                                            disableBtn ?
                                                                <div>
                                                                    <Button style={{ marginRight: '8px' }} onClick={() => {
                                                                        handleGetQueryRecords(2)
                                                                    }}>查询香烟记录</Button>
                                                                    {
                                                                        selectTab === 1 ?
                                                                            <Button onClick={() => {
                                                                                setShowChangeLoading(true)
                                                                                handleGetShopPriceData(2, currentDetail?.Endaccount_Id, currentDetail?.CigaretteType)
                                                                            }}>获取香烟数据</Button> : ''
                                                                    }
                                                                </div> : ''
                                                        }
                                                    </div>
                                                    <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                                        <Row>
                                                            <Col span={6}>
                                                                <ProFormText
                                                                    readonly
                                                                    label="销售数量"
                                                                    name='SellCount_Cigarette'
                                                                />
                                                            </Col>
                                                            <Col span={6}>
                                                                <ProFormText
                                                                    readonly
                                                                    label="销售金额"
                                                                    name='FactAmount_Cigarette'
                                                                />
                                                            </Col>
                                                        </Row>
                                                    </div>
                                                </>
                                                : ''
                                        }
                                        <div className={'rightFormTitle'} >
                                            <div className={'titleLeft'}>
                                                <img className={'titleIcon'} src={mobilePay} />
                                                <span className={'titleName'}>{'移动支付'}</span>
                                            </div>
                                            {
                                                disableBtn ?
                                                    <div>
                                                        <Button style={{ marginRight: '8px' }} onClick={() => {
                                                            handleGetQueryRecords(3)
                                                        }}>查询支付记录</Button>
                                                        {
                                                            selectTab === 1 ?
                                                                <Button onClick={() => {
                                                                    setShowChangeLoading(true)
                                                                    handleGetShopPriceData(3, currentDetail?.Endaccount_Id)
                                                                }}>获取移动支付</Button> : ''
                                                        }
                                                    </div> : ''
                                            }
                                        </div>
                                        <Row>
                                            <div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
                                                <Col span={6}>
                                                    <ProFormText
                                                        readonly
                                                        label="销售金额"
                                                        name='FactAmount_Mobilepayment'
                                                    />
                                                </Col>
                                            </div>
                                        </Row>
                                        <div className={'rightFormTitle'} style={{ marginBottom: '12px' }}>
                                            <div className={'titleLeft'}>
                                                <img className={'titleIcon'} src={upLoad} />
                                                <span className={'titleName'}>{'上传单据'}</span>
                                            </div>
                                        </div>
                                        {
                                            selectTab === 1 ?
                                                <iframe
                                                    style={{ borderWidth: '0px' }}
                                                    width={'100%'}
                                                    height={370}
                                                    // src={`http://10.104.1.69:8000/cloud/static/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`}
                                                    src={`${REACT_APP_ENV === 'dev' ? 'http://192.168.1.207:8000/' : 'http://saas.eshangtech.com/cloud/'}static/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`}
                                                />
                                                // http://saas.eshangtech.com/cloud/
                                                :
                                                <div className={'imgList'}>
                                                    {
                                                        imgList && imgList.length > 0 ?
                                                            imgList.map((item: any) => {
                                                                return <Image
                                                                    width={150}
                                                                    style={{ marginRight: '8px' }}
                                                                    src={item.ImageUrl}
                                                                />
                                                            }) : ''
                                                    }
                                                </div>
                                        }
                                    </> : ''
                            }
                        </ProForm>
                    </div>
                    :
                    <div className={'listRight'}>
                        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center' }}>
                            <div style={{ width: '150px', height: '150px' }}>
                                <img style={{ width: '150px', height: '150px' }} src={noData} />
                            </div>
                            <div>暂无数据</div>
                        </div>
                    </div>
            }
        </div>
    )
}

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