import React, { useState } from 'react';
import { Form, Input, Button, DatePicker, Space, Modal, Select } from 'antd';
import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined, PlusOutlined, UploadOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './PermitStatistics.less';
import licence1 from '@/assets/business_envinformation/image1.svg';
import licence2 from '@/assets/business_envinformation/image2.svg';
import viewicon from '@/assets/business_envinformation/viewicon.svg';
import editicon from '@/assets/business_envinformation/editicon.svg';
import downloadicon from '@/assets/business_envinformation/downloadicon.svg';
import deleteicon from '@/assets/business_envinformation/deleteicon.svg';



const PermitStatistics = () => {
    const [form] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentImage, setCurrentImage] = useState(null);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 14,
    });
    const [dataSource, setDataSource] = useState([
        {
            key: 1,
            administrativeRegion: '榆林市',
            permitNumber: '51669811',
            industryCategory: '信用风险管理与法律防',
            companyName: '北京那蓝国际贸易有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-15',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 2,
            administrativeRegion: '拉萨市',
            permitNumber: '34887875',
            industryCategory: '涉外警务',
            companyName: '中潮石林企业咨询(上海)有限公司北京分公司',
            validityPeriod: '5年',
            issueDate: '2025-08-09',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 3,
            administrativeRegion: '长家界市',
            permitNumber: '1716652546',
            industryCategory: '环境设计',
            companyName: '水木晨曦(北京)科技有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-17',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 4,
            administrativeRegion: '马潭市',
            permitNumber: '384654762',
            industryCategory: '电子竞技运动与管理',
            companyName: '亚商桥(北京)咨询有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-17',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 5,
            administrativeRegion: '交州市',
            permitNumber: '34669295254',
            industryCategory: '精算学',
            companyName: '中讯通讯科技有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-13',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 6,
            administrativeRegion: '驻马店市',
            permitNumber: '4347052411',
            industryCategory: '数字媒体艺术',
            companyName: '嘉实瑞沃德(北京)商贸有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-21',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 7,
            administrativeRegion: '三亚市',
            permitNumber: '388946691',
            industryCategory: '技术侦察学',
            companyName: '中大国际文化有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-17',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 8,
            administrativeRegion: '美湖市',
            permitNumber: '7190228566',
            industryCategory: '财政学',
            companyName: '嘉实瑞沃德(北京)商贸有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-20',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 9,
            administrativeRegion: '东营市',
            permitNumber: '6656363924',
            industryCategory: '保险学',
            companyName: '北京清丰国际医院管理有限公司',
            validityPeriod: '5年',
            issueDate: '2025-06-27',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 10,
            administrativeRegion: '九龙',
            permitNumber: '622145211',
            industryCategory: '英语',
            companyName: '北京庆奔科贸有限公司',
            validityPeriod: '5年',
            issueDate: '2025-08-28',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 11,
            administrativeRegion: '深圳市',
            permitNumber: '755123456',
            industryCategory: '计算机科学与技术',
            companyName: '深圳创新科技有限公司',
            validityPeriod: '3年',
            issueDate: '2025-09-01',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 12,
            administrativeRegion: '杭州市',
            permitNumber: '571789012',
            industryCategory: '电子商务',
            companyName: '杭州数字贸易有限公司',
            validityPeriod: '4年',
            issueDate: '2025-09-05',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 13,
            administrativeRegion: '成都市',
            permitNumber: '028345678',
            industryCategory: '生物技术',
            companyName: '成都生物科技股份有限公司',
            validityPeriod: '5年',
            issueDate: '2025-09-10',
            original: '附件',
            duplicate: '附件',
        },
        {
            key: 14,
            administrativeRegion: '武汉市',
            permitNumber: '027456789',
            industryCategory: '机械工程',
            companyName: '武汉智能制造有限公司',
            validityPeriod: '3年',
            issueDate: '2025-09-15',
            original: '附件',
            duplicate: '附件',
        },
    ]);

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
            width: 80,
            align: 'center',
        },
        {
            title: '行政区',
            dataIndex: 'administrativeRegion',
            key: 'administrativeRegion',
            width: 120,
        },
        {
            title: '许可证编号',
            dataIndex: 'permitNumber',
            key: 'permitNumber',
            width: 130,
        },
        {
            title: '行业类别',
            dataIndex: 'industryCategory',
            key: 'industryCategory',
            width: 200,
        },
        {
            title: '企业名称',
            dataIndex: 'companyName',
            key: 'companyName',
            width: 230,
        },
        {
            title: '有效期限',
            dataIndex: 'validityPeriod',
            key: 'validityPeriod',
            width: 80,
            align: 'center',
        },
        {
            title: '发证日期',
            dataIndex: 'issueDate',
            key: 'issueDate',
            width: 120,
            align: 'center',
        },
        {
            title: '正本',
            dataIndex: 'original',
            key: 'original',
            width: 80,
            align: 'center',
            render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件</a>
        },
        {
            title: '副本',
            dataIndex: 'duplicate',
            key: 'duplicate',
            width: 120,
            align: 'center',
            render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件</a>
        },
        {
            title: '操作',
            key: 'action',
            width: 140,
            align: 'center',
            render: (_, record) => (
                <Space size={13}>
                    <img 
                        src={viewicon}
                        alt="查看"
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleView(record)}
                    />
                    <img 
                        src={editicon}
                        alt="编辑"
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleEdit(record)}
                    />
                    <img 
                        src={downloadicon}
                        alt="下载"
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleDownload(record)}
                    />
                    <img 
                        src={deleteicon}
                        alt="删除"
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleDelete(record)}
                    />
                </Space>
            ),
        },
    ];

    const handleSearch = (values) => {
        console.log('搜索参数:', values);
        // TODO: 实现搜索功能
    };

    const handleReset = () => {
        form.resetFields();
        // TODO: 重置搜索
    };

    const handleView = (record) => {
        console.log('查看:', record);
        // TODO: 实现查看功能
    };

    const handleEdit = (record) => {
        console.log('编辑:', record);
        // TODO: 实现编辑功能
    };

    const handleDownload = (record) => {
        console.log('下载:', record);
        // TODO: 实现下载功能
    };

    const handleDelete = (record) => {
        console.log('删除:', record);
        // TODO: 实现删除功能
    };

    const handleAdd = () => {
        console.log('新增');
        // TODO: 实现新增功能
    };

    const handleImport = () => {
        console.log('导入');
        // TODO: 实现导入功能
    };

    const handleQuery = () => {
        console.log('查询');
        // TODO: 实现查询功能
    };

    const handleTableChange = (pagination) => {
        setPagination(pagination);
    };

    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const start = (current - 1) * pageSize;
        const end = start + pageSize;
        return dataSource.slice(start, end);
    };

    return (
        <div className={styles.permitContainer}>
            {/* 第一块：操作按钮和筛选条件 */}
            <div className={styles.searchSection}>
                <div className={styles.leftButtons}>
                    <Button 
                        type="primary" 
                        icon={<PlusOutlined />} 
                        onClick={handleAdd}
                        className={styles.addButton}
                    >
                        新增
                    </Button>
                    <Button 
                        icon={<UploadOutlined />} 
                        onClick={handleImport}
                        className={styles.importButton}
                    >
                        导入
                    </Button>
                </div>
                
                <div className={styles.rightControls}>
                    <span className={styles.filterLabel}>筛选条件</span>
                    <Select 
                        placeholder="请选择" 
                        style={{ width: 140, height: 28 }}
                        allowClear
                        className={styles.selectInput}
                    />
                    
                    <Input 
                        placeholder="请输入" 
                        style={{ width: 160, height: 28 }}
                    />
                    <Button 
                        onClick={handleQuery}
                        className={styles.queryButton}
                    >
                        查询
                    </Button>
                    <Button 
                        onClick={handleReset}
                        className={styles.resetButton}
                    >
                        重置
                    </Button>
                </div>
            </div>

            {/* 第二块：表格 */}
            <div className={styles.tableSection}>
                <StandardTable
                    columns={columns}
                    data={{
                        list: getCurrentPageData(),
                        pagination: {
                            ...pagination,
                            total: dataSource.length,
                            showTotal: (total) => `共 ${total} 条`,
                            showSizeChanger: false,
                        }
                    }}
                    onChange={handleTableChange}
                />
            </div>

            {/* 图片弹窗 */}
            <Modal
                open={isModalVisible}
                onCancel={() => setIsModalVisible(false)}
                footer={null}
                closeIcon={<CloseOutlined style={{ color: '#fff', fontSize: 20 }} />}
                width="auto"
                centered
                styles={{
                    mask: { backgroundColor: '#10101080' },
                    content: { padding: 0, background: 'transparent', boxShadow: 'none' }
                }}
            >
                {currentImage && <img src={currentImage} alt="许可证" style={{ width: '100%', display: 'block' }} />}
            </Modal>
        </div>
    );
};

export default PermitStatistics;
