/*
 * @Author: cclu
 * @Date: 2021-12-13 11:01:23
 * @LastEditTime: 2022-04-29 14:31:12
 * @LastEditors: Please set LastEditors
 * @Description: 数据校验 冲正校验组件
 * @FilePath: \cloud-platform\src\pages\DataVerification\components\FlowingCorrection.tsx
 */
import { Card, Col, Form, Input, InputNumber, Row } from "antd";
import DescriptionItem from "./DescriptionItem";

import type { EndaccountDetailModel } from "../data";
import './FlowingCorrection.less'


const FlowingCorrection = ({ detail, form }: { detail: EndaccountDetailModel | undefined, form: any }) => {
    return (
        <Form form={form}>
            <Card title="移动支付" size="small" headStyle={{ backgroundColor: '#f2f6fa', fontWeight: 700 }} className="model-card">

                <Row>
                    <Col span={4}>
                        <div>前端金额</div>
                        <div className="price-text">4000.00</div>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">+</div>

                    </Col>
                    <Col span={4}>
                        <div className="input-title-text">移动冲正</div>
                        <Form.Item name="Correct_MobilePayAmount" style={{ marginBottom: 0 }} rules={[
                            {
                                required: true,
                                message: '请输入移动冲正',
                                pattern: /\d+/

                            }]}>
                            <InputNumber
                                bordered={false}
                                step="1"
                                min={0}
                                style={{ fontSize: 22, borderBottom: '1px solid #2191FC', width: 100 }}

                            />
                        </Form.Item>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">=</div>

                    </Col>
                    <Col span={4}>
                        <div>后台金额</div>
                        <div className="price-text">6000.00</div>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">+</div>

                    </Col>
                    <Col span={4}>
                        <div className="input-title-text">到账实差</div>
                        <Form.Item name="RevenueAmount" style={{ marginBottom: 0 }} rules={[
                            {
                                required: true,
                                message: '请输入到账实差',
                                pattern: /\d+/

                            }]}>
                            <InputNumber
                                bordered={false}
                                step="1"
                                min={0}
                                style={{ fontSize: 22, borderBottom: '1px solid #2191FC', width: 100 }}

                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item
                    rules={[
                        {
                            required: true,
                            message: '请输入冲正说明',
                        },
                    ]}
                    name="DescriptionInfo"
                    style={{ marginTop: 24, marginBottom: 0 }}
                    label="冲正说明"
                >
                    <Input.TextArea placeholder="请输入..." style={{ height: 32 }} />
                </Form.Item>
            </Card>

            <Card title="流水冲正" size="small" headStyle={{ backgroundColor: '#f2f6fa', fontWeight: 700 }} className="model-card">
                <Row>
                    <Col span={4}>
                        <div>冲正金额</div>
                        <div className="price-text">4000.00</div>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">=</div>

                    </Col>


                    <Col span={4}>
                        <div>移动冲正</div>
                        <div className="price-text">{detail?.Correct_MobilePayAmount}</div>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">+</div>

                    </Col>
                    <Col span={4}>
                        <div className="input-title-text">现金冲正</div>
                        <Form.Item name="Correct_CashAmount" style={{ marginBottom: 0 }} rules={[
                            {
                                required: true,
                                message: '请输入到账实差',
                                pattern: /\d+/

                            }]}>
                            <InputNumber
                                bordered={false}
                                step="1"
                                min={0}
                                style={{ fontSize: 22, borderBottom: '1px solid #2191FC', width: 100 }}

                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item
                    rules={[
                        {
                            required: true,
                            message: '请输入冲正说明',
                        },
                    ]}
                    name="DescriptionInfo"
                    style={{ marginTop: 24, marginBottom: 0 }}
                    label="冲正说明"
                >
                    <Input.TextArea placeholder="请输入..." style={{ height: 32 }} />
                </Form.Item>
            </Card>

            <Card title="日结校验" size="small" headStyle={{ backgroundColor: '#f2f6fa', fontWeight: 700 }} className="model-card">
                <Row>
                    <Col span={4}>
                        <div>实收金额</div>
                        <div className="price-text">4000.00</div>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">=</div>

                    </Col>
                    <Col span={4}>
                        <div>总销售额</div>
                        <div className="price-text">{detail?.TotalSell_Amount}</div>
                    </Col>
                    <Col span={2}>
                        <div className="calc-text">+</div>

                    </Col>
                    <Col span={4}>
                        <div>冲正金额</div>
                        <div className="price-text">6000.00</div>
                    </Col>

                </Row>
            </Card>

            <Card title="冲正列表" size="small" headStyle={{ backgroundColor: '#f2f6fa', fontWeight: 700 }} >
                <Row>
                    <Col span={6}>
                        <DescriptionItem title="商品名称 " content="牛肉面" />

                    </Col>
                    <Col span={8}>
                        <DescriptionItem title="商品编码 " content="461075200" />

                    </Col>
                    <Col span={6}>
                        <DescriptionItem title="销售数量 " content="01" />

                    </Col>
                </Row>
                <Row>
                    <Col span={6}>
                        <DescriptionItem title="销售金额 " content="13.00" />

                    </Col>
                    <Col span={8}>
                        <DescriptionItem title="操作时间 " content="2021-10-30 5:13:00" />

                    </Col>
                    <Col span={6}>
                        <DescriptionItem title="冲正说明 " content="操作失误" />

                    </Col>
                </Row>
            </Card>
        </Form>
    );
}

export default FlowingCorrection;