import React, { PureComponent } from 'react';
import {
    DeleteOutlined,
    EditOutlined,
    PlusOutlined,
    SearchOutlined,
    RedoOutlined,
    DownOutlined,
    ExclamationCircleFilled,
    UpOutlined,
    SafetyOutlined,
    ImportOutlined,
    ExportOutlined,
    UserOutlined,
    TeamOutlined,
    SettingOutlined,
    FileTextOutlined,
    ProjectOutlined,
    WarningOutlined,
    AlertOutlined,
} from '@ant-design/icons';
import { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree, Progress, Input, Select } from 'antd';
import StandardTable from '@/components/StandardTable';
import ReactECharts from 'echarts-for-react';

import { MyIcon } from "@/components/Icon"
import style from "@/global.less";
import StaffSheetCreateForm from '../form/BasicInfoCreateForm'; //新增表单
import StaffSheetUpdateForm from '../form/BasicInfoUpdateForm'; //修改表单
import StaffSheetViewForm from '../form/BasicInfoViewForm'; //查看表单
import styles from '../BasicInformation.less';
import datadictionary from "@/utils/dataDictionary";
import { formatDate } from "@/utils/formatUtils";
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";

const { confirm } = Modal;

//预约类型
const sex_type = datadictionary.sex
const user_status = datadictionary.user_status
const sys_user_post = datadictionary.sys_user_post

const mockData = {
    list: [
        {
            id: '01',
            certificateName: '安全生产许可证',
            certificateNumber: 'AQ103',
            validDate: '2025-09-09',
            status: '有效',
            remainingDays: 15,
            fileLink: '点击查看 PDF',
        },
        {
            id: '02',
            certificateName: '特种设备证书',
            certificateNumber: 'AQ103',
            validDate: '2025-09-09',
            status: '有效',
            remainingDays: 15,
            fileLink: '点击查看 PDF',
        },
        {
            id: '03',
            certificateName: '安全许可证书',
            certificateNumber: 'AQ103',
            validDate: '2025-09-09',
            status: '即将到期',
            remainingDays: 15,
            fileLink: '点击查看 PDF',
        },
        {
            id: '04',
            certificateName: '安全生产许可证',
            certificateNumber: 'AQ103',
            validDate: '2025-09-09',
            status: '即将到期',
            remainingDays: 15,
            fileLink: '点击查看 PDF',
        },
        {
            id: '05',
            certificateName: '安全生产许可证',
            certificateNumber: 'AQ103',
            validDate: '2025-09-09',
            status: '异常',
            remainingDays: 15,
            fileLink: '点击查看 PDF',
        },
    ],
    pagination: {
        total: 48,
        current: 1,
        pageSize: 5,
    },
}

class QualificationManagement extends PureComponent {
    state = {
        modalVisible: false,
        updateModalVisible: false,
        viewModalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
        updateFormValues: {},
        viewFormValues: {},
        toggleExpand: false,
    }

    columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            fixed: 'left',
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '证书名称',
            dataIndex: 'certificateName',
            key: 'certificateName',
            width: 150,
            fixed: 'left',
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '编号',
            dataIndex: 'certificateNumber',
            key: 'certificateNumber',
            width: 120,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '有效期',
            dataIndex: 'validDate',
            key: 'validDate',
            width: 100,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (text) => {
                let color = '#2E4CD4';
                let bgColor = '#E6E9FB';
                if (text === '即将到期') {
                    color = '#FF8800';
                    bgColor = '#FFF3E9';
                } else if (text === '异常') {
                    color = '#FF3E48';
                    bgColor = '#FFE0E2';
                }
                return (
                    <Tag
                        style={{
                            color: color,
                            backgroundColor: bgColor,
                            border: 'none',
                            borderRadius: 4,
                            padding: '2px 8px',
                            fontSize: '12px'
                        }}
                    >
                        {text}
                    </Tag>
                );
            },
        },
        {
            title: '预警信息',
            dataIndex: 'remainingDays',
            key: 'remainingDays',
            width: 100,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text} 天</span>
            ),
        },
        {
            title: '关联文件链接',
            dataIndex: 'fileLink',
            key: 'fileLink',
            width: 120,
            render: (text, record) => (
                <a style={{ color: '#2E4CD4', fontSize: '12px' }}>{text}</a>
            ),
        },
        // {
        //     title: '操作',
        //     fixed: 'right',
        //     align: 'center',
        //     width: 200,
        //     render: (text, record) => {
        //         return (
        //             <div>
        //                 <a className={styles.operateStyle} style={{ marginRight: 15 }}> 详情 </a>
        //                 <a className={styles.operateStyle} style={{ marginRight: 15 }}> 修改 </a>
        //                 <a className={styles.operateStyle} style={{ color: '#FF2626' }}> 删除 </a>
        //             </div>
        //         )
        //     }
        // },
    ]

    getPieChartOption = () => {
        return {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}% ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: '0',
                top: '22%',
                itemWidth: 16,
                itemHeight: 4,
                itemGap: 16,
                textStyle: {
                    fontSize: 12,
                    color: '#666',
                    fontWeight: 'normal'
                }
            },
            series: [
                {
                    name: '证照类型分布',
                    type: 'pie',
                    radius: ['30%', '45%'],
                    center: ['30%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    emphasis: {
                        scale: true,
                        scaleSize: 5
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 45,
                            name: '安全生产许可证',
                            itemStyle: {
                                color: '#4B69F1'
                            }
                        },
                        {
                            value: 20,
                            name: '安全评价报告',
                            itemStyle: {
                                color: '#44BB5F'
                            }
                        },
                        {
                            value: 20,
                            name: '施工资质证书',
                            itemStyle: {
                                color: '#A493FB'
                            }
                        },
                        {
                            value: 15,
                            name: '其他',
                            itemStyle: {
                                color: '#FFD85A'
                            }
                        }
                    ]
                }
            ]
        };
    }

    getPieCertificationStatusChartOption = () => {
        return {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}% ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: '20%',
                top: '22%',
                itemWidth: 16,
                itemHeight: 4,
                itemGap: 16,
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                }
            },
            series: [
                {
                    name: '证照状态分布',
                    type: 'pie',
                    radius: '45%',
                    center: ['30%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{d}%',
                        fontSize: 12,
                        // fontWeight: 'bold',
                        color: '#fff'
                    },
                    emphasis: {
                        scale: true,
                        scaleSize: 5
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 40,
                            name: '有效',
                            itemStyle: {
                                color: '#1269FF'
                            }
                        },
                        {
                            value: 25,
                            name: '临期 30 天',
                            itemStyle: {
                                color: '#6E86F4'
                            }
                        },
                        {
                            value: 25,
                            name: '临期 15 天',
                            itemStyle: {
                                color: '#A3B3F8'
                            }
                        },
                        {
                            value: 10,
                            name: '异常',
                            itemStyle: {
                                color: '#C6D0FB'
                            }
                        }
                    ]
                }
            ]
        };
    }

    handleStandardTableChange = (pagination, sorter) => {
        const { dispatch } = this.props
        const { formValues } = this.state

        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues
        }

        sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`)
    }

    handleFormReset = () => {
        const { dispatch } = this.props
        this.setState({
            formValues: {}
        })
    }

    toggleForm = () => {
        const { expandForm } = this.state
        this.setState({
            expandForm: !expandForm
        })
    }

    handleSelectRows = rows => {
        this.setState({
            selectedRows: rows
        })
    }

    handleSearch = values => {
        const { dispatch } = this.props
        const { expandForm } = this.state

        this.setState({
            formValues: values
        })
    }

    handleModalVisible = flag => {
        this.setState({
            modalVisible: !!flag
        })
    }

    handleUpdateModalVisible = (flag, record) => {
        this.setState({
            updateModalVisible: !!flag,
            updateFormValues: record || {}
        })
    }

    handleViewModalVisible = (flag, record) => {
        this.setState({
            viewModalVisible: !!flag,
            viewFormValues: record || {}
        })
    }

    handleAdd = fields => {
        const { dispatch } = this.props
        // 添加逻辑
    }

    handleDeleteRecord = record => {
        const { dispatch } = this.props
        // 删除逻辑
    }

    handleUpdate = fields => {
        const { dispatch } = this.props
        // 更新逻辑
    }

    handleCollapse = () => {
        const { toggleExpand } = this.state
        this.setState({
            toggleExpand: !toggleExpand
        })
    }

    render() {
        const {
            loading,
            dispatch
        } = this.props
        const {
            selectedRows,
            modalVisible,
            updateModalVisible,
            viewModalVisible,
            updateFormValues,
            viewFormValues,
            toggleExpand,
        } = this.state

        const parentMethods = {
            handleAdd: this.handleAdd,
            handleModalVisible: this.handleModalVisible,
            dispatch: dispatch,
            loading,
        }

        const updateMethods = {
            handleUpdateModalVisible: this.handleUpdateModalVisible,
            handleUpdate: this.handleUpdate,
            dispatch: dispatch,
            loading,
        }

        const viewMethods = {
            handleViewModalVisible: this.handleViewModalVisible
        }

        return (
            <Card bordered={false}  className={styles['card-container']}>
                {/* 主要内容区域 */}
                <Row gutter={16} style={{ marginBottom: 15 }}>
                    {/* 左侧：证照类型分布 */}
                    <Col span={7}>
                        <div
                            className={styles['func-area-bg']}
                            style={{
                                border: '1px solid #E3E7FB',
                                borderRadius: 4,
                                padding: 20,
                                height: 260
                            }}
                        >
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginBottom: 20,
                                color: '#333',
                                fontSize: 14,
                                fontWeight: 500
                            }}>
                                <span style={{
                                    display: 'inline-block',
                                    width: 2,
                                    height: 16,
                                    background: '#2E4CD4 ',
                                    marginRight: 8
                                }}></span>
                                证照类型分布
                            </div>
                            <div className={styles['chart-container']}>
                                <ReactECharts
                                    option={this.getPieChartOption()}
                                    className={styles['chart-full-size']}
                                    opts={{ renderer: 'canvas' }}
                                />
                            </div>
                        </div>
                    </Col>

                    {/* 中间：证照状态分布 */}
                    <Col span={8}>
                        <div
                            className={styles['func-area-bg']}
                            style={{
                                border: '1px solid #E3E7FB',
                                borderRadius: 4,
                                padding: 20,
                                height: 260
                            }}
                        >
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginBottom: 20,
                                color: '#333',
                                fontSize: 14,
                                fontWeight: 500
                            }}>
                                <span style={{
                                    display: 'inline-block',
                                    width: 2,
                                    height: 16,
                                    background: '#2E4CD4',
                                    marginRight: 8
                                }}></span>
                                证照状态分布
                            </div>

                            <div className={styles['chart-container']}>
                                <ReactECharts
                                    option={this.getPieCertificationStatusChartOption()}
                                    className={styles['chart-full-size']}
                                    opts={{ renderer: 'canvas' }}
                                />
                            </div>
                        </div>
                    </Col>

                    {/* 右侧：临期预警 */}
                    <Col span={9}>
                        <div
                            className={styles['warn-area-bg']}
                            style={{
                                border: '1px solid #FFE8E8',
                                borderRadius: 4,
                                padding: 20,
                                height: 260,
                                position: 'relative'
                            }}>
                            {/* 添加半透明覆盖层以增强内容可读性 */}
                            <div style={{
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                background: 'rgba(248, 249, 250, 0.3)',
                                borderRadius: 4,
                                pointerEvents: 'none'
                            }}></div>

                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginBottom: 10,
                                color: '#333',
                                fontSize: 14,
                                fontWeight: 500,
                                position: 'relative',
                                zIndex: 2
                            }}>
                                <span style={{
                                    display: 'inline-block',
                                    width: 2,
                                    height: 16,
                                    background: '#2E4CD4',
                                    marginRight: 8
                                }}></span>
                                临期预警
                            </div>

                            {/* 证照预警列表 */}
                            <div style={{
                                marginTop: 10,
                                marginLeft: 10,
                                width: '60%',
                                position: 'relative',
                                zIndex: 2
                            }}>
                                {[
                                    { name: '安全生产许可证', code: 'AQXK-2023-0552', status: '15天后到期', backgroundColor: '#FFF9F4', borderColor: '#FFD7BB', backgroundColorDate: '#FFEDDE', color: '#FF8800' },
                                    { name: '安全生产许可证', code: 'AQXK-2023-0552', status: '15天后到期', backgroundColor: '#FFF9F4', borderColor: '#FFD7BB', backgroundColorDate: '#FFEDDE', color: '#FF8800' },
                                    { name: '安全生产许可证', code: 'AQXK-2023-0552', status: '5天后到期', backgroundColor: '#FFF5F6', borderColor: '#FFC0BF', backgroundColorDate: '#FFE0E2', color: '#FF2526' }
                                ].map((item, index) => (
                                    <div key={index} style={{
                                        background: item.backgroundColor,
                                        border: `1px solid ${item.borderColor}`,
                                        borderRadius: 4,
                                        padding: '7px 16px',
                                        marginBottom: 12,
                                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                                        position: 'relative',
                                        zIndex: 2,
                                        backdropFilter: 'blur(1px)'
                                    }}>
                                        <div style={{
                                            display: 'flex',
                                            justifyContent: 'space-between',
                                            alignItems: 'center',
                                            marginBottom: 6
                                        }}>
                                            <span style={{
                                                fontWeight: 500,
                                                color: '#333',
                                                fontSize: 13
                                            }}>
                                                {item.name}
                                            </span>
                                            <div style={{
                                                background: item.backgroundColorDate,
                                                color: item.color,
                                                padding: '2px 8px',
                                                borderRadius: 5,
                                                fontSize: 11,
                                                fontWeight: 500
                                            }}>
                                                {item.status}
                                            </div>
                                        </div>
                                        <div style={{
                                            color: '#999',
                                            fontSize: 11,
                                            lineHeight: 1.2
                                        }}>
                                            编号：{item.code}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </Col>
                </Row>

                {/* 底部表格区域 */}
                <div>
                    <div className={styles['table-toolbar-container']}>
                        <Row justify="space-between" align="middle">
                            <Col>
                                <Space>
                                    <Input.Search
                                        placeholder="搜索证书名称..."
                                        className={styles['search-input']}
                                        onSearch={this.handleSearch}
                                    />
                                    <span style={{ marginLeft: 20 }}>证件类型</span>
                                    <Select
                                        placeholder="请选择"
                                        className={styles['filter-select']}
                                        options={[
                                            { value: 'all', label: '全部' },
                                            { value: 'high', label: '高风险' },
                                            { value: 'medium', label: '中风险' },
                                            { value: 'low', label: '低风险' },
                                        ]}
                                    />
                                </Space>
                            </Col>
                            <Col>
                                <Space>
                                    <Button
                                        icon={<ImportOutlined />}
                                        className={styles['button-style']}
                                    >
                                        批量导入
                                    </Button>
                                    <Button
                                        icon={<ExportOutlined />}
                                        className={styles['button-style']}
                                    >
                                        批量导出
                                    </Button>
                                </Space>
                            </Col>
                        </Row>
                    </div>

                    <StandardTable
                        rowKey={'id'}
                        selectedRows={selectedRows}
                        loading={loading}
                        data={mockData}
                        columns={this.columns}
                        onSelectRow={this.handleSelectRows}
                        onChange={this.handleStandardTableChange}
                        scroll={{ x: 1200 }}
                        showTotal={(total, range) => `共 ${total} 条`}
                    />
                </div>

                {modalVisible && <StaffSheetCreateForm {...parentMethods} modalVisible={modalVisible} />}

                {updateFormValues && Object.keys(updateFormValues).length ? (
                    <StaffSheetUpdateForm
                        {...updateMethods}
                        updateModalVisible={updateModalVisible}
                        values={updateFormValues}
                    />
                ) : null}

                {viewFormValues && Object.keys(viewFormValues).length ? (
                    <StaffSheetViewForm
                        {...viewMethods}
                        viewModalVisible={viewModalVisible}
                        values={viewFormValues}
                    />
                ) : null}
            </Card>
        )
    }
}

export default QualificationManagement;
