import { Card, Row, Form, Input, Col, Select, Button, Table, Divider, Popconfirm,Modal,Alert } from 'antd';
import React, { useState, useEffect } from 'react';
import { PlusOutlined, ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import QRCode from 'qrcode.react';

const QrcodePreview = props => {
     const [form] = Form.useForm();
    const { addVisible, handleClose, currentRecord } = props;
    console.log(`currentRecord is：`, currentRecord);
      /* 下载二维码 */
    const downloadQrCode = (currentRecord) => {
            let materialName = currentRecord?.materialInfo?.materialName || currentRecord?.materialName || '';
            const canvas = document.getElementById('qrCode');
            const pngUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
            const downloadLink = document.createElement('a');
            downloadLink.href = pngUrl;
            downloadLink.download = materialName;//'qrCode.png'
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            props.handleClose();
    };
    
    const formItemLayout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    console.log(`currentRecord is:`,currentRecord);
    return (
        <Modal
            title={<h3>预览二维码</h3>}
            visible={addVisible}
            width="600px"
            footer={null}
            centered={true}
            closable
            maskClosable={true}
            onCancel={handleClose}
        >
            <Form form={form}>
                <Row gutter={10} className={classNames(utilsStyles.gutterBox)}>
                    <Col span={12}>
                        <Form.Item
                            label="物料编码"
                            className={classNames(utilsStyles.antFormItem)}
                            {...formItemLayout}
                        >
                            <span>{currentRecord?.materialInfo?.materialCode || currentRecord?.materialCode }</span>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="品名"
                            className={classNames(utilsStyles.antFormItem)}
                            {...formItemLayout}
                        >
                            <span>{ currentRecord?.materialInfo?.materialName || currentRecord?.materialName }</span>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="规格"
                            className={classNames(utilsStyles.antLightFormItem)}
                            {...formItemLayout}
                        >
                            <span>{ currentRecord?.materialInfo?.mmodel || currentRecord?.mmodel }</span>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="单位 "
                            className={classNames(utilsStyles.antLightFormItem)}
                            {...formItemLayout}
                        >
                            <span>{ currentRecord?.materialInfo?.munit || currentRecord?.munit || '暂无' }</span>
                        </Form.Item>
                    </Col>
                    <Col span={24}>
                        <div style={{ textAlign: 'center', padding: '30px' }}>
                            <div>
                                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
                                    <QRCode id="qrCode" size={150} value={currentRecord?.qr || ''} />
                                </div>
                                <Alert type='success' message = { `唯一识别码：${currentRecord?.qr || '识别码为空'}`} />
                            </div>
                        </div>
                    </Col>
                    <Col span={24}>
                        <div style={{ textAlign: 'center' }}>
                            <Button type="primary" onClick={() => downloadQrCode(currentRecord)}>二维码下载</Button>
                        </div>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
};
export default QrcodePreview;