import React, { PureComponent } from 'react';
import {
    DeleteOutlined,
    EditOutlined,
    PlusOutlined,
    SearchOutlined,
    RedoOutlined,
    DownOutlined,
    ExclamationCircleFilled,
    ExclamationCircleOutlined,
    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 PersonnelCreateForm from '../form/PersonnelCreateForm'; //新增表单
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";
import userIcon from '@/assets/basic_information/user.png';
import contractExpireIcon from '@/assets/basic_information/contract-expire.png';
import contractOverdueIcon from '@/assets/basic_information/contract-overdue.png';
import certificateExpireIcon from '@/assets/basic_information/certificate-expire.png';
// import certificateOverdueIcon from '@/assets/basic_information/certificate-overdue.png';
import addIcon from '@/assets/basic_information/add.png';
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',
            name: '王一一',
            idCard: '411***************7659',
            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
            phone: '15278967754',
            category: '长期工',
            contractStatus: '有效',
            contractExpiry: '2025-08-26',
        },
        {
            id: '02',
            name: '刘冰',
            idCard: '411***************7659',
            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
            phone: '15278967754',
            category: '外包工',
            contractStatus: '异常',
            contractExpiry: '2025-08-26',
        },
        {
            id: '03',
            name: '赵志远',
            idCard: '411***************7659',
            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
            phone: '15278967754',
            category: '临时工',
            contractStatus: '有效',
            contractExpiry: '2025-08-26',
        },
        {
            id: '04',
            name: '王博国',
            idCard: '411***************7659',
            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
            phone: '15278967754',
            category: '顾问',
            contractStatus: '剩余30天',
            contractExpiry: '2025-08-26',
        },
        {
            id: '05',
            name: '赵敏敏',
            idCard: '411***************7659',
            company: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
            phone: '15278967754',
            category: '外包工',
            contractStatus: '剩余30天',
            contractExpiry: '2025-08-26',
        },
    ],
    pagination: {
        total: 48,
        current: 1,
        pageSize: 5,
    },
}

class PersonnelBasicInfo 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: 'name',
            key: 'name',
            width: 80,
            fixed: 'left',
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '身份证号',
            dataIndex: 'idCard',
            key: 'idCard',
            width: 180,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '所属公司',
            dataIndex: 'company',
            key: 'company',
            width: 250,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '联系方式',
            dataIndex: 'phone',
            key: 'phone',
            width: 120,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '人员分类',
            dataIndex: 'category',
            key: 'category',
            width: 100,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '合同状态',
            dataIndex: 'contractStatus',
            key: 'contractStatus',
            width: 100,
            render: (text) => {
                let color = '#2E4CD4';
                let bgColor = '#E6E9FB';
                if (text === '异常') {
                    color = '#FF3E48';
                    bgColor = '#FFE0E2';
                } else if (text === '剩余30天') {
                    color = '#FF8800';
                    bgColor = '#FFF3E9';
                }
                return (
                    <Tag
                        style={{
                            color: color,
                            backgroundColor: bgColor,
                            border: 'none',
                            borderRadius: 4,
                            padding: '2px 8px',
                            fontSize: '12px'
                        }}
                    >
                        {text}
                    </Tag>
                );
            },
        },
        {
            title: '合同有效期',
            dataIndex: 'contractExpiry',
            key: 'contractExpiry',
            width: 120,
            render: (text) => (
                <span style={{ fontSize: '12px' }}>{text}</span>
            ),
        },
        {
            title: '操作',
            fixed: 'right',
            align: 'center',
            width: 100,
            render: (text, record) => (
                <a style={{ color: '#2E4CD4', fontSize: '12px' }}>上传附件</a>
            ),
        },
    ]

    getPieChartOption = () => {
        return {
            radar: {
                indicator: [
                    { name: '{a|培训完成率} {b|85%}', max: 100 },
                    { name: '{a|持证率} {b|92%}', max: 100 },
                    { name: '{a|注册工程师占比} {b|15%}', max: 100 }
                ],
                center: ['45%', '50%'],
                radius: 80,
                splitNumber: 4,
                shape: 'polygon',
                axisName: {
                    rich: {
                        a: {
                            color: '#333',
                            fontSize: 12,
                            fontWeight: 400,
                        },
                        b: {
                            color: '#2E4CD4',
                            fontSize: 12,
                            fontWeight: 400,
                        }
                    },
                    formatter: function (value) {
                        // value 形如 "持证率 92%"
                        // 这里直接返回，ECharts rich 会自动处理
                        return value;
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#BFCBFF']
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['#fff']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#E6EAF5'
                    }
                }
            },
            series: [{
                type: 'radar',
                data: [
                    {
                        value: [85, 92, 15],
                        areaStyle: {
                            color: '#499BFF'
                        },
                        lineStyle: {
                            color: '#1269FF',
                            width: 2
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#2E4CD4',
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    }
                ]
            }]
        }
    }

    getPieDepartmentDistributionChartOption = () => {
        return {
            grid: {
                left: 0,
                right: 0,
                top: 70,
                bottom: 0,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['技术部', '销售部', '市场部', '财务部', '人事部'],
                axisLine: { lineStyle: { color: '#E6EAF5' } },
                axisTick: { show: false },
                axisLabel: { color: '#666', fontSize: 13 }
            },
            yAxis: {
                type: 'value',
                minInterval: 100,
                splitLine: { lineStyle: { color: '#E6EAF5' } },
                axisLabel: { color: '#666', fontSize: 13 }
            },
            series: [{
                type: 'bar',
                data: [360, 450, 370, 360, 200],
                barWidth: 25,
                itemStyle: {
                    color: typeof window !== 'undefined' && window.echarts
                        ? new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#3691FF' },
                            { offset: 1, color: '#1E68FF' }
                        ])
                        : '#1E68FF'
                }
            }]
        };
    }

    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={4}>
                        <div className={styles['stat-card']}>
                            <div style={{ flex: 1 }}>
                                <div className={styles['stat-card-label']}>总人数</div>
                                <div className={styles['stat-card-value']}>1456</div>
                            </div>
                            <div className={styles['stat-card-icon']}>
                                <img src={userIcon} alt="总人数" />
                            </div>
                        </div>
                    </Col>
                    <Col span={4}>
                        <div className={styles['stat-card']}>
                            <div style={{ flex: 1 }}>
                                <div className={styles['stat-card-label']}>合同即将过期</div>
                                <div className={styles['stat-card-value']}>357</div>
                            </div>
                            <div className={styles['stat-card-icon']}>
                                <img src={contractExpireIcon} alt="合同即将过期" />
                            </div>
                        </div>
                    </Col>
                    <Col span={4}>
                        <div className={styles['stat-card']}>
                            <div style={{ flex: 1 }}>
                                <div className={styles['stat-card-label']}>合同已过期</div>
                                <div className={styles['stat-card-value']}>1456</div>
                            </div>
                            <div className={styles['stat-card-icon']}>
                                <img src={contractOverdueIcon} alt="合同已过期" />
                            </div>
                        </div>
                    </Col>
                    <Col span={4}>
                        <div className={styles['stat-card']}>
                            <div style={{ flex: 1 }}>
                                <div className={styles['stat-card-label']}>证件即将过期</div>
                                <div className={styles['stat-card-value']}>1456</div>
                            </div>
                            <div className={styles['stat-card-icon']}>
                                <img src={certificateExpireIcon} alt="证件即将过期" />
                            </div>
                        </div>
                    </Col>
                    <Col span={4}>
                        <div className={styles['stat-card']}>
                            <div style={{ flex: 1 }}>
                                <div className={styles['stat-card-label']}>证件已过期</div>
                                <div className={styles['stat-card-value']}>1456</div>
                            </div>
                            <div className={styles['stat-card-icon']}>
                                {/* <img src={certificateOverdueIcon} alt="证件已过期" */}
                            </div>
                        </div>
                    </Col>
                    <Col span={4}>
                        <div className={styles['stat-card']}>
                            <div style={{ flex: 1 }}>
                                <div className={styles['stat-card-label']}>本月新增</div>
                                <div className={styles['stat-card-value']}>1456</div>
                            </div>
                            <div className={styles['stat-card-icon']}>
                                <img src={addIcon} alt="本月新增" />
                            </div>
                        </div>
                    </Col>
                </Row>
                {/* 主要内容区域 */}
                <Row gutter={16} style={{ marginBottom: 15 }}>
                    {/* 左侧：人员资质 */}
                    <Col span={8}>
                        <div
                            className={styles['ryzz-area-bg']}
                            style={{
                                // border: '1px solid #DBE2FF',
                                borderRadius: 4,
                                padding: 20,
                                height: 240,
                                position: 'relative'
                            }}
                        >
                            <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 style={{
                                width: '100%',
                                height: 220,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                position: 'relative'
                            }}>
                                <ReactECharts
                                    option={this.getPieChartOption()}
                                    style={{ width: '100%', height: '100%' }}
                                    opts={{ renderer: 'canvas' }}
                                />
                            </div>
                        </div>
                    </Col>

                    {/* 中间：部门人员分布 */}
                    <Col span={10}>
                        <div
                            className={styles['ryzz-area-bg']}
                            style={{
                                // border: '1px solid #e9ecef',
                                borderRadius: 4,
                                padding: 20,
                                height: 240,
                                display: 'flex',
                                flexDirection: 'column'
                            }}
                        >
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginBottom: 12,
                                color: '#333',
                                fontSize: 14,
                                fontWeight: 500
                            }}>
                                <span style={{
                                    display: 'inline-block',
                                    width: 2,
                                    height: 16,
                                    background: '#2E4CD4',
                                    marginRight: 8
                                }}></span>
                                部门人员分布
                            </div>
                            <div style={{
                                width: '100%',
                                flex: 1,
                                minHeight: 0,
                                display: 'flex',
                                alignItems: 'flex-end'
                            }}>
                                <ReactECharts
                                    option={this.getPieDepartmentDistributionChartOption()}
                                    className={styles['chart-full-size']}
                                    style={{ width: '100%', height: 220 }}
                                    opts={{ renderer: 'canvas' }}
                                />
                            </div>
                        </div>
                    </Col>

                    {/* 右侧：到期提醒 */}
                    <Col span={6}>
                        <div 
                        className={styles['dqtx-area-bg']}
                        style={{
                            // border: '1px solid #e9ecef',
                            borderRadius: 4,
                            padding: 20,
                            height: 240,
                            position: 'relative'
                        }}>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginBottom: 20,
                                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: 0 }}>
                                <div style={{
                                    background: '#F1F5FF',
                                    borderRadius: 6,
                                    padding: '10px 14px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    marginBottom: 12,
                                    boxShadow: '0 0 2px 0 rgba(46,76,212,0.2)'
                                }}>
                                    <ExclamationCircleOutlined style={{ color: '#FF4D4F', fontSize: 18, marginRight: 10 }} />
                                    <span style={{ color: '#222', fontSize: 14 }}>沈一撒合同已到期</span>
                                </div>
                                <div style={{
                                    background: '#F1F5FF',
                                    borderRadius: 6,
                                    padding: '10px 14px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    marginBottom: 12,
                                    boxShadow: '0 0 2px 0 rgba(46,76,212,0.2)'
                                }}>
                                    <ExclamationCircleOutlined style={{ color: '#FF4D4F', fontSize: 18, marginRight: 10 }} />
                                    <span style={{ color: '#222', fontSize: 14 }}>赵敏敏合同临期 15 天</span>
                                </div>
                                <div style={{
                                    background: '#F1F5FF',
                                    borderRadius: 6,
                                    padding: '10px 14px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    marginBottom: 0,
                                    boxShadow: '0 0 2px 0 rgba(46,76,212,0.2)'
                                }}>
                                    <ExclamationCircleOutlined style={{ color: '#FF4D4F', fontSize: 18, marginRight: 10 }} />
                                    <span style={{ color: '#222', fontSize: 14 }}>赵敏敏合同临期 15 天</span>
                                </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={<PlusOutlined />}
                                        style={{ backgroundColor: '#2E4CD4', color: '#fff', borderColor: '#2E4CD4' }}
                                        onClick={() => this.handleModalVisible(true)}
                                    >
                                        新增人员
                                    </Button>
                                    <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 && <PersonnelCreateForm {...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 PersonnelBasicInfo;
