import React, { useState } from 'react';
import { Modal, Upload, message, Progress } from 'antd';
import { UploadOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import styles from '../BasicInformation.less';
import fileIcon from '@/assets/basic_information/file-icon.png';
const BasicInfoImportForm = (props) => {
    const { modalVisible, handleModalVisible, loading } = props;
    const [fileList, setFileList] = useState([
        // 示例数据，实际可根据上传进度动态设置
        // { uid: '1', name: '文件名称', size: 3 * 1024 * 1024, status: 'uploading', percent: 60 },
        // ...
    ]);

    const maxFiles = 10;
    const maxSize = 100 * 1024 * 1024; // 100M

    const beforeUpload = (file) => {
        if (file.size > maxSize) {
            message.error('单个文件不能超过100M');
            return Upload.LIST_IGNORE;
        }
        if (fileList.length >= maxFiles) {
            message.error(`最多只能上传${maxFiles}个文件`);
            return Upload.LIST_IGNORE;
        }
        // 模拟上传进度
        file.status = 'uploading';
        file.percent = 60;
        return true;
    };

    const handleChange = ({ fileList: newFileList }) => {
        // 模拟每个文件60%进度
        const updatedList = newFileList.slice(0, maxFiles).map(file => ({
            ...file,
            status: 'uploading',
            percent: 60,
        }));
        setFileList(updatedList);
    };

    const handleRemove = (file) => {
        setFileList(fileList.filter(item => item.uid !== file.uid));
    };

    const handleOk = () => {
        handleModalVisible(false);
        setFileList([]);
    };

    const handleCancel = () => {
        handleModalVisible(false);
        setFileList([]);
    };

    // 文件列表渲染
    const renderFileList = () => (
        <div className={styles['import-file-list']}>
            {fileList.map(file => (
                <div
                    key={file.uid}
                    className={styles['import-file-item']}
                >
                    <div className={styles['import-file-icon']}>
                        <img src={fileIcon} alt="file" style={{ width: 28, height: 28 }} />
                    </div>
                    <div className={styles['import-file-info']}>
                        <div className={styles['import-file-name']}>{file.name || '文件名称'}</div>
                        <div className={styles['import-file-size']}>
                            {file.size ? `${(file.size / (1024 * 1024)).toFixed(0)} MB` : '3 MB'}
                        </div>
                        <Progress
                            percent={file.percent || 60}
                            strokeColor="#2E4CD4"
                            trailColor="#D4D7E5"
                            size="small"
                            style={{ marginBottom: 0 }}
                        />
                    </div>
                    <div
                        className={styles['import-file-remove']}
                        onClick={() => handleRemove(file)}
                    >
                        ×
                    </div>
                </div>
            ))}
        </div>
    );

    return (
        <Modal
            width={450}
            bodyStyle={{
                minHeight: '180px',
            }}
            className={styles.createForm}
            centered
            destroyOnClose
            title="新建项目"
            open={modalVisible}
            onCancel={handleCancel}
            footer={[
                <button
                    key="cancel"
                    onClick={handleCancel}
                    className={styles['modal-cancel-btn']}
                >取消</button>,
                <button
                    key="submit"
                    onClick={handleOk}
                    className={styles['modal-ok-btn']}
                >确定</button>
            ]}
        >
            <div style={{ marginTop: 10 }}>
                {fileList.length > 0 && renderFileList()}
                <div
                    style={{
                        marginTop: 20
                    }}
                >
                    <Upload.Dragger
                        fileList={fileList}
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                        multiple
                        showUploadList={false}
                        style={{ width: '100%' }}
                    >
                        <div style={{ textAlign: 'center', color: '#2E4CD4', fontSize: 32, marginBottom: 8 }}>
                            <UploadOutlined />
                        </div>
                        <div style={{ color: '#333', fontSize: 14, marginBottom: 4 }}>
                            添加文件 {fileList.length}/{maxFiles}
                        </div>
                    </Upload.Dragger>
                </div>
                <div style={{ fontSize: 12, display: 'flex', alignItems: 'center', marginBottom: 0, marginTop: 10 }}>
                    <ExclamationCircleOutlined style={{ marginRight: 6, color: '#FF4D4F' }} />
                    单个文件不超过 100M
                </div>
            </div>
        </Modal>
    );
};

export default BasicInfoImportForm;