import React, { Fragment, 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 { connect, history } from '@umijs/max';
import { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tabs, 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',
            projectName: '安全项目一',
            location: '北京朝阳区',
            area: '15,000m²',
            organization: '安全生产部',
            staffCount: 168,
            safetyLevel: '高',
        },
        {
            id: '02',
            projectName: '安全项目二',
            location: '北京朝阳区',
            area: '15,000m²',
            organization: '安全生产部',
            staffCount: 168,
            safetyLevel: '中',
        },
        {
            id: '03',
            projectName: '安全项目三',
            location: '北京朝阳区',
            area: '15,000m²',
            organization: '安全生产部',
            staffCount: 168,
            safetyLevel: '低',
        },
        {
            id: '04',
            projectName: '安全项目四',
            location: '北京朝阳区',
            area: '15,000m²',
            organization: '安全生产部',
            staffCount: 168,
            safetyLevel: '低',
        },
        {
            id: '05',
            projectName: '安全项目五',
            location: '北京朝阳区',
            area: '15,000m²',
            organization: '安全生产部',
            staffCount: 168,
            safetyLevel: '中',
        },
    ],
    pagination: {
        total: 48,
        current: 1,
        pageSize: 5,
    },
}

// 组织架构树形数据
const treeData = [
    {
        title: '安全部',
        key: '0-0',
        icon: <TeamOutlined />,
        children: [
            {
                title: '安全管理科',
                key: '0-0-0',
                icon: <SafetyOutlined />,
            },
            {
                title: '生产科',
                key: '0-0-1',
                icon: <ProjectOutlined />,
            },
            {
                title: '设备科',
                key: '0-0-2',
                icon: <SettingOutlined />,
            },
        ],
    },
];
@connect(({ staffsheet, loading }) => ({
    staffsheet,
    loading: loading.models.staffsheet,
}))

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

    columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 80,
            fixed: 'left',
        },
        {
            title: '项目名称',
            dataIndex: 'projectName',
            key: 'projectName',
            width: 150,
            fixed: 'left',
        },
        {
            title: '地理信息',
            dataIndex: 'location',
            key: 'location',
            width: 120,
        },
        {
            title: '占地面积',
            dataIndex: 'area',
            key: 'area',
            width: 100,
        },
        {
            title: '组织机构',
            dataIndex: 'organization',
            key: 'organization',
            width: 120,
        },
        {
            title: '职业人数',
            dataIndex: 'staffCount',
            key: 'staffCount',
            width: 100,
            render: (text) => `${text} 人`,
        },
        {
            title: '安全等级',
            dataIndex: 'safetyLevel',
            key: 'safetyLevel',
            width: 100,
            render: (text) => {
                let color = 'green';
                if (text === '高') color = 'red';
                else if (text === '中') color = 'orange';
                return <Tag color={color}>{text}</Tag>;
            },
        },
        {
            title: '操作',
            fixed: 'right',
            align: 'center',
            width: 200,
            render: (text, record) => {
                return (
                    <Fragment>
                        <a className={styles.operateStyle} style={{ marginRight: 15 }}> 详情 </a>
                        <a className={styles.operateStyle} style={{ marginRight: 15 }}> 修改 </a>
                        <a className={styles.operateStyle} style={{ color: '#FF2626' }}> 删除 </a>
                    </Fragment>
                )
            }
        },
    ]

    componentDidMount() {
        // 初始化页面数据
    }

    getPieChartOption = () => {
        return {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}% ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: '25%',
                top: '25%',
                itemWidth: 14,
                itemHeight: 14,
                itemGap: 20,
                textStyle: {
                    fontSize: 14,
                    color: '#333',
                    fontWeight: 'normal'
                }
            },
            series: [
                {
                    name: '功能区域占比',
                    type: 'pie',
                    radius: ['30%', '45%'],
                    center: ['30%', '45%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    emphasis: {
                        scale: true,
                        scaleSize: 5
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 45,
                            name: '生产区',
                            itemStyle: {
                                color: '#4A90E2'
                            }
                        },
                        {
                            value: 20,
                            name: '仓储区',
                            itemStyle: {
                                color: '#7ED321'
                            }
                        },
                        {
                            value: 20,
                            name: '办公区',
                            itemStyle: {
                                color: '#9B59B6'
                            }
                        },
                        {
                            value: 15,
                            name: '辅助区',
                            itemStyle: {
                                color: '#F5A623'
                            }
                        }
                    ]
                }
            ]
        };
    }

    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}`)

        // dispatch({
        //     type: 'prouser/query_page_for_prouser',
        //     payload: params
        // })
    }

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

        // dispatch({
        //     type: 'prouser/query_page_for_prouser',
        //     payload: {
        //         resetFlag: true
        //     }
        // })
    }

    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
        })

        // dispatch({
        //     type: 'prouser/query_page_for_prouser',
        //     payload: {
        //         ...values,
        //         resetFlag: true,
        //         expandForm
        //     }
        // })
    }

    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

        dispatch({
            type: 'prouser/insert_for_prouser',
            payload: {
                user_id: fields.user_id,
                user_name: fields.user_name,
                user_name_cn: fields.user_name_cn,
                user_name_en: fields.user_name_en,
                password: fields.password,
                email: fields.email,
                phone: fields.phone,
                landline: fields.landline,
                sex: fields.sex,
                avatar: fields.avatar,
                sign: fields.sign,
                tags: fields.tags,
                id_card: fields.id_card,
                birthday: fields.birthday,
                job_status: fields.job_status,
                hiredate: fields.hiredate,
                departure_time: fields.departure_time,
                user_type: fields.user_type,
                emp_no: fields.emp_no,
                access_card_no: fields.access_card_no,
                country: fields.country,
                province: fields.province,
                city: fields.city,
                address: fields.address,
                work_addr: fields.work_addr,
                floor: fields.floor,
                inprovince: fields.inprovince,
                // dept_code: fields.dept_code,
                // dept_name: fields.dept_name,
                inner_dept_code: fields.inner_dept_code,
                org_code: fields.org_code,
                org_name: fields.org_name,
                inner_org_code: fields.inner_org_code,
                posts: fields.posts,
                wx_openid: fields.wx_openid,
                wx_mpopenid: fields.wx_mpopenid,
                wx_miniopenid: fields.wx_miniopenid,
                wx_unionid: fields.wx_unionid,
                mobile_imei: fields.mobile_imei,
                device_num: fields.device_num,
                al_taobao: fields.al_taobao,
                al_alipay: fields.al_alipay,
                al_dingding: fields.al_dingding,
                is_system_user: fields.is_system_user,
                mgr_type: fields.mgr_type,
                pwd_security_level: fields.pwd_security_level,
                pwd_update_date: fields.pwd_update_date,
                last_login_ip: fields.last_login_ip,
                last_login_date: fields.last_login_date,
                freeze_date: fields.freeze_date,
                freeze_cause: fields.freeze_cause,
                zindex: fields.zindex,
                wx_msg: fields.wx_msg,
                email_msg: fields.email_msg,
                system_msg: fields.system_msg,
                remarks: fields.remarks,
                status: fields.status,
                creator: fields.creator,
                create_date: fields.create_date,
                updater: fields.updater,
                update_date: fields.update_date
            },
            callback: (res) => {
                if (res.success == true) {
                    message.success('添加成功')
                    this.handleModalVisible()
                }
            }
        })
    }

    handleDeleteRecord = record => {
        const { dispatch } = this.props

        dispatch({
            type: 'prouser/delete_by_primarykey_for_prouser',
            payload: {
                recordid: record.user_id
            },
            callback: res => {
                if (res.success) {
                    message.success('删除成功')

                    this.setState({
                        selectedRows: []
                    })
                }
            }
        })
    }

    handleUpdate = fields => {
        const { dispatch } = this.props

        dispatch({
            type: 'prouser/update_for_prouser',
            payload: {
                user_id: fields.user_id,
                user_name: fields.user_name,
                user_name_cn: fields.user_name_cn,
                user_name_en: fields.user_name_en,
                password: fields.password,
                email: fields.email,
                phone: fields.phone,
                landline: fields.landline,
                sex: fields.sex,
                avatar: fields.avatar,
                sign: fields.sign,
                tags: fields.tags,
                id_card: fields.id_card,
                birthday: fields.birthday,
                job_status: fields.job_status,
                hiredate: fields.hiredate,
                departure_time: fields.departure_time,
                user_type: fields.user_type,
                emp_no: fields.emp_no,
                access_card_no: fields.access_card_no,
                country: fields.country,
                province: fields.province,
                city: fields.city,
                address: fields.address,
                work_addr: fields.work_addr,
                floor: fields.floor,
                inprovince: fields.inprovince,
                // dept_code: fields.dept_code,
                // dept_name: fields.dept_name,
                inner_dept_code: fields.inner_dept_code,
                org_code: fields.org_code,
                org_name: fields.org_name,
                inner_org_code: fields.inner_org_code,
                posts: fields.posts,
                wx_openid: fields.wx_openid,
                wx_mpopenid: fields.wx_mpopenid,
                wx_miniopenid: fields.wx_miniopenid,
                wx_unionid: fields.wx_unionid,
                mobile_imei: fields.mobile_imei,
                device_num: fields.device_num,
                al_taobao: fields.al_taobao,
                al_alipay: fields.al_alipay,
                al_dingding: fields.al_dingding,
                is_system_user: fields.is_system_user,
                mgr_type: fields.mgr_type,
                pwd_security_level: fields.pwd_security_level,
                pwd_update_date: fields.pwd_update_date,
                last_login_ip: fields.last_login_ip,
                last_login_date: fields.last_login_date,
                freeze_date: fields.freeze_date,
                freeze_cause: fields.freeze_cause,
                zindex: fields.zindex,
                wx_msg: fields.wx_msg,
                email_msg: fields.email_msg,
                system_msg: fields.system_msg,
                remarks: fields.remarks,
                status: fields.status,
                creator: fields.creator,
                create_date: fields.create_date,
                updater: fields.updater,
                update_date: fields.update_date
            },
            callback: (res) => {
                if (res.success === true) {
                    message.success('修改成功')
                    this.handleUpdateModalVisible()
                }
            }
        })
    }

    // 修改用户状态
    handleUpdateUserStatus = (fields, status, msg) => {
        const { dispatch } = this.props

        confirm({
            title: `确定要 ${msg} 当前用户的吗?`,
            icon: <ExclamationCircleFilled />,
            onOk() {
                dispatch({
                    type: 'prouser/update_for_prouser',
                    payload: {
                        user_id: fields.user_id,
                        status: status,
                    },
                    callback: (res) => {
                        if (res.success === true) {
                            message.success('修改成功')
                        }
                    }
                })
            }
        })
    }

    // 修改用户密码
    handleUpdateUserPassword = fields => {
        const { dispatch } = this.props
        confirm({
            title: '确定要重置当前用户的密码吗?',
            icon: <ExclamationCircleFilled />,
            onOk() {
                dispatch({
                    type: 'prouser/resetpwd_for_prouser',
                    payload: {
                        user_id: fields.user_id
                    },
                    callback: (res) => {
                        if (res.success === true) {
                            message.success('重置成功')
                        }
                    }
                })
            }
        })
    }

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

    render() {
        const {
            staffsheet: {
                data,
                selectDeptTree,
                selectOrganTree
            },
            loading,
            dispatch
        } = this.props
        const {
            selectedRows,
            modalVisible,
            updateModalVisible,
            viewModalVisible,
            updateFormValues,
            viewFormValues,
            toggleExpand,
            activeTab
        } = this.state

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

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

        const viewMethods = {
            handleViewModalVisible: this.handleViewModalVisible
        }

        const tabItems = [
            {
                key: '1',
                label: '基本信息管理',
            },
            {
                key: '2',
                label: '资质证照管理',
            },
            {
                key: '3',
                label: '人员基础信息',
            }
        ];

        return (
            <div>
                {/* 顶部标签页 */}
                <div style={{ marginBottom: 0, background: '#EEEFF7', padding: '0 24px' }}>
                    <Tabs
                        activeKey={activeTab}
                        onChange={(key) => this.setState({ activeTab: key })}
                        items={tabItems}
                        className="custom-tabs"
                        style={{ marginBottom: 0 }}
                    />
                </div>

                <Card bordered={false} style={{ margin: 0, background: '#fff', borderRadius: 0 }}>
                    {/* 主要内容区域 */}
                    <Row gutter={16} style={{ marginBottom: 24 }}>
                        {/* 左侧：组织机构人员管理 */}
                        <Col span={9}>
                            <div
                                style={{
                                    background: '#f8f9fa',
                                    border: '1px solid #e9ecef',
                                    borderRadius: 8,
                                    padding: 20,
                                    height: 300
                                }}
                            >
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    marginBottom: 20,
                                    color: '#333',
                                    fontSize: 16,
                                    fontWeight: 500
                                }}>
                                    <span style={{
                                        display: 'inline-block',
                                        width: 2,
                                        height: 16,
                                        background: '#2E4CD4',
                                        marginRight: 8
                                    }}></span>
                                    组织机构与人员管理
                                </div>

                                {/* 组织架构图 */}
                                <div className={styles['org-chart-container']}>
                                    {/* 顶部按钮 */}
                                    <div className={styles['org-top-button-container']}>
                                        <Button
                                            type="primary"
                                            className={styles['org-top-button']}
                                        >
                                            项目安全管组织架构
                                        </Button>
                                    </div>

                                    {/* 连接线 - 顶部到第一层 */}
                                    <div className={styles['org-connect-line-vertical']}></div>

                                    {/* 第一层水平连接线 */}
                                    <div className={styles['org-connect-line-horizontal']}></div>

                                    {/* 第一层垂直连接线 */}
                                    <div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-left']}`}></div>
                                    <div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-center']}`}></div>
                                    <div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-right']}`}></div>

                                    {/* 第一层部门 */}
                                    <div className={styles['org-departments-container']}>
                                        <div className={styles['org-department']}>
                                            <div className={`${styles['org-department-icon']} ${styles['org-department-icon-safety']}`}>
                                                <SafetyOutlined style={{ color: 'white', fontSize: 20 }} />
                                            </div>
                                            <div className={styles['org-department-label']}>安监部</div>

                                            {/* 安监部连接线 */}
                                            <div className={styles['org-department-connect-v']}></div>
                                            <div className={styles['org-department-connect-h']}></div>
                                            <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
                                            <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
                                        </div>

                                        <div className={styles['org-department']}>
                                            <div className={`${styles['org-department-icon']} ${styles['org-department-icon-production']}`}>
                                                <ProjectOutlined style={{ color: 'white', fontSize: 20 }} />
                                            </div>
                                            <div className={styles['org-department-label']}>生产部</div>

                                            {/* 生产部连接线 */}
                                            <div className={styles['org-department-connect-v']}></div>
                                            <div className={styles['org-department-connect-h']}></div>
                                            <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
                                            <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
                                        </div>

                                        <div className={styles['org-department']}>
                                            <div className={`${styles['org-department-icon']} ${styles['org-department-icon-equipment']}`}>
                                                <SettingOutlined style={{ color: 'white', fontSize: 20 }} />
                                            </div>
                                            <div className={styles['org-department-label']}>设备部</div>

                                            {/* 设备部连接线 */}
                                            <div className={styles['org-department-connect-v']}></div>
                                            <div className={styles['org-department-connect-h']}></div>
                                            <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
                                            <div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
                                        </div>
                                    </div>

                                    {/* 第二层子部门 */}
                                    <div style={{
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        paddingLeft: '4%',
                                        paddingRight: '4%'
                                    }}>
                                        {/* 安监部子部门 */}
                                        <div style={{ display: 'flex', gap: 16 }}>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{
                                                    width: 36,
                                                    height: 36,
                                                    borderRadius: '50%',
                                                    backgroundColor: '#52c41a',
                                                    margin: '0 auto 6px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center'
                                                }}>
                                                    <UserOutlined style={{ color: 'white', fontSize: 16 }} />
                                                </div>
                                                <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>安全监督科</div>
                                            </div>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{
                                                    width: 36,
                                                    height: 36,
                                                    borderRadius: '50%',
                                                    backgroundColor: '#52c41a',
                                                    margin: '0 auto 6px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center'
                                                }}>
                                                    <TeamOutlined style={{ color: 'white', fontSize: 16 }} />
                                                </div>
                                                <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>风险评估科</div>
                                            </div>
                                        </div>

                                        {/* 生产部子部门 */}
                                        <div style={{ display: 'flex', gap: 16 }}>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{
                                                    width: 36,
                                                    height: 36,
                                                    borderRadius: '50%',
                                                    backgroundColor: '#1890ff',
                                                    margin: '0 auto 6px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center'
                                                }}>
                                                    <UserOutlined style={{ color: 'white', fontSize: 16 }} />
                                                </div>
                                                <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>生产调度科</div>
                                            </div>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{
                                                    width: 36,
                                                    height: 36,
                                                    borderRadius: '50%',
                                                    backgroundColor: '#1890ff',
                                                    margin: '0 auto 6px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center'
                                                }}>
                                                    <TeamOutlined style={{ color: 'white', fontSize: 16 }} />
                                                </div>
                                                <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>现场管理科</div>
                                            </div>
                                        </div>

                                        {/* 设备部子部门 */}
                                        <div style={{ display: 'flex', gap: 16 }}>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{
                                                    width: 36,
                                                    height: 36,
                                                    borderRadius: '50%',
                                                    backgroundColor: '#13c2c2',
                                                    margin: '0 auto 6px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center'
                                                }}>
                                                    <UserOutlined style={{ color: 'white', fontSize: 16 }} />
                                                </div>
                                                <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>设备维护科</div>
                                            </div>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{
                                                    width: 36,
                                                    height: 36,
                                                    borderRadius: '50%',
                                                    backgroundColor: '#13c2c2',
                                                    margin: '0 auto 6px',
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    justifyContent: 'center'
                                                }}>
                                                    <SettingOutlined style={{ color: 'white', fontSize: 16 }} />
                                                </div>
                                                <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>备件管理科</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Col>

                        {/* 中间：功能区域占比 */}
                        <Col span={8}>
                            <div
                                style={{
                                    background: '#f8f9fa',
                                    border: '1px solid #e9ecef',
                                    borderRadius: 8,
                                    padding: 20,
                                    height: 300
                                }}
                            >
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    marginBottom: 20,
                                    color: '#333',
                                    fontSize: 16,
                                    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={7}>
                            <div className={styles['risk-assessment-container']}>
                                {/* 顶部装饰性背景层 */}
                                <div className={styles['risk-background-top']}></div>

                                {/* 底部装饰性背景层 */}
                                <div className={styles['risk-background-bottom']}></div>

                                {/* 标题 */}
                                <div className={styles['risk-title']}>
                                    <span className={styles['risk-title-indicator']}></span>
                                    <span className={styles['risk-title-text']}>实时风险评估</span>
                                </div>

                                {/* 主要内容区域 */}
                                <div className={styles['risk-content-area']}>
                                    {/* 左侧盾牌图标 */}
                                    <div className={styles['risk-shield-container']}>
                                        <div className={styles['risk-shield']}>
                                            <SafetyOutlined className={styles['risk-shield-icon']} />
                                            {/* 3D效果的底座 */}
                                            <div className={styles['risk-shield-shadow']}></div>
                                        </div>
                                    </div>

                                    {/* 右侧内容 */}
                                    <div className={styles['risk-info-container']}>
                                        {/* 风险等级提示框 */}
                                        <div className={styles['risk-level-alert']}>
                                            <span className={styles['risk-level-text']}>
                                                当前风险等级：
                                                <span className={styles['risk-level-danger']}>重大风险</span>
                                            </span>
                                        </div>

                                        {/* 提示信息 */}
                                        <div className={styles['risk-tip-container']}>
                                            <div className={styles['risk-tip-icon']}>
                                                <span className={styles['risk-tip-emoji']}>💡</span>
                                            </div>
                                            <div className={styles['risk-tip-content']}>
                                                <div className={styles['risk-tip-text']}>
                                                    提示：安全等级分为 红、橙、黄、蓝四级，当前风险等级为红区，存在重大风险
                                                </div>
                                            </div>
                                        </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}
                                        />
                                        <Select
                                            placeholder="筛选条件"
                                            className={styles['filter-select']}
                                            defaultValue="all"
                                            options={[
                                                { value: 'all', label: '全部' },
                                                { value: 'high', label: '高风险' },
                                                { value: 'medium', label: '中风险' },
                                                { value: 'low', label: '低风险' },
                                            ]}
                                        />
                                    </Space>
                                </Col>
                                <Col>
                                    <Space>
                                        <Button
                                            icon={<PlusOutlined />}
                                            className={styles['button-style']}
                                        >
                                            新建项目
                                        </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 && <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>
            </div>
        )
    }
}

export default BasicInformation