import React, { Fragment, PureComponent } from 'react';
import {
    DeleteOutlined,
    EditOutlined,
    PlusOutlined,
    SearchOutlined,
    RedoOutlined,
    DownOutlined,
    ExclamationCircleFilled,
    UpOutlined,
} from '@ant-design/icons';
import { connect, history } from '@umijs/max';
import { Button, Input, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Table } from 'antd';
import * as echarts from 'echarts';
import ReactECharts from 'echarts-for-react';
import StandardTable from '@/components/StandardTable';

import { MyIcon } from "@/components/Icon"
import style from "@/global.less";
import TimeSheetCreateForm from './form/TimeSheetCreateForm'; //新增表单
import TimeSheetUpdateForm from './form/TimeSheetUpdateForm'; //修改表单
import TimeSheetViewForm from './form/TimeSheetViewForm'; //查看表单
import TimeSheetRenderSimpleForm from './form/TimeSheetRenderSimpleForm'; //简单查询表单
import TimeSheetRenderAdvancedForm from './form/TimeSheetRenderAdvancedForm'; //高级查询表单
import styles from './TimeSheetList.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: 1,
            documentName: '安全操作规程V1.0.docx',
            reviewer: '张三',
            reviewTime: '2025-01-15 10:30',
            status: '已采纳',
        },
        {
            id: 2,
            documentName: '技术规范说明书.pdf',
            reviewer: '李四',
            reviewTime: '2025-01-14 14:20',
            status: '部分采纳',
        },
        {
            id: 3,
            documentName: '管理制度汇编.docx',
            reviewer: '王五',
            reviewTime: '2025-01-13 09:15',
            status: '待处理',
        },
        {
            id: 4,
            documentName: '设备维护手册.pdf',
            reviewer: '赵六',
            reviewTime: '2025-01-12 16:45',
            status: '未采纳',
        },
    ]
}
@connect(({ systemMonitoringTimeSheet, loading }) => ({
    systemMonitoringTimeSheet,
    loading: loading.models.systemMonitoringTimeSheet,
}))

class TimeSheetList extends PureComponent {
    state = {
        modalVisible: false,
        updateModalVisible: false,
        viewModalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
        updateFormValues: {},
        viewFormValues: {},
        toggleExpand: false,
        selectedFile: null,
        fileName: '',
        viewKnowledgeModalVisible: false,
        currentKnowledgeId: null,
    }

    columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            align: 'center',
        },
        {
            title: '文档名称',
            dataIndex: 'documentName',
            key: 'documentName',
            width: 200,
        },
        {
            title: '审阅人',
            dataIndex: 'reviewer',
            key: 'reviewer',
            width: 100,
        },
        {
            title: '审阅时间',
            dataIndex: 'reviewTime',
            key: 'reviewTime',
            width: 150,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (status) => {
                let color = '';
                switch(status) {
                    case '已采纳':
                        color = '#4CAF50';
                        break;
                    case '部分采纳':
                        color = '#FF9800';
                        break;
                    case '待处理':
                        color = '#2196F3';
                        break;
                    case '未采纳':
                        color = '#F44336';
                        break;
                    default:
                        color = '#757575';
                }
                return <span style={{ color }}>{status}</span>;
            },
        },
        {
            title: '操作',
            key: 'action',
            width: 80,
            render: (_, record) => (
                <Button type='link' onClick={() => this.handleViewKnowledge(record.id)}>
                    查看
                </Button>
            ),
        },
    ]

    componentDidMount() {
        // const { dispatch, timesheet: { params } } = this.props

        // dispatch({
        //     type: 'timesheet/query_page_for_prouser',
        // })

        // this.setState({
        //     expandForm: params?.expandForm || false,
        // })
    }

    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('重置成功')
                        }
                    }
                })
            }
        })
    }

    renderSimpleForm() {
        const { systemMonitoringTimeSheet: { params } } = this.props
        const parentMethods = {
            handleSearch: this.handleSearch,
            handleFormReset: this.handleFormReset,
            toggleForm: this.toggleForm,
            params
        }

        return <TimeSheetRenderSimpleForm {...parentMethods} />
    }

    renderAdvancedForm() {
        const { dispatch, prouser: { selectDeptTree, selectOrganTree, params } } = this.props
        const parentMethods = {
            handleSearch: this.handleSearch,
            handleFormReset: this.handleFormReset,
            toggleForm: this.toggleForm,
            dispatch: dispatch,
            selectDeptTree: selectDeptTree,
            selectOrganTree: selectOrganTree,
            params
        }

        return <TimeSheetRenderAdvancedForm {...parentMethods} />
    }

    renderForm() {
        const { expandForm } = this.state
        return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm()
    }

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

    // 处理文件选择
    handleFileSelect = (e) => {
        const file = e.target.files[0];
        if (file) {
            this.setState({
                selectedFile: file,
                fileName: file.name
            }, () => {
                // 自动上传文件
                this.uploadFile();
            });
        }
    }

    // 点击按钮触发文件选择
    triggerFileSelect = () => {
        this.fileInputRef.current.click();
    }

    // 文件上传
    uploadFile = async () => {
        const { selectedFile } = this.state;
        if (!selectedFile) return;

        try {
            const formData = new FormData();
            formData.append('file', selectedFile);

            message.loading('文件上传中...');
            
            // 调用上传接口
            const response = await fetch('http://192.168.13.131:8080/api/upload/word', {
                method: 'POST',
                body: formData,
            });

            if (response.ok) {
                const data = await response.json();
                message.success('文件上传成功！');
                console.log('上传成功，返回数据:', data);
                // 可以在这里处理上传成功后的逻辑
            } else {
                throw new Error('上传失败');
            }
        } catch (error) {
            message.error('文件上传失败：' + error.message);
            console.error('上传错误:', error);
        }
    }

    // 处理查看知识条目
    handleViewKnowledge = (id) => {
        console.log('查看知识条目:', id);
        // 设置当前选中的知识ID并打开模态框
        this.setState({ 
            viewKnowledgeModalVisible: true, 
            currentKnowledgeId: id 
        });
    }

    // 创建一个文件输入框的引用
    fileInputRef = React.createRef();

    render() {
        const {
            systemMonitoringTimeSheet: {
                data,
                selectDeptTree,
                selectOrganTree
            },
            loading,
            dispatch
        } = this.props
        const {
            selectedRows,
            modalVisible,
            updateModalVisible,
            viewModalVisible,
            updateFormValues,
            viewFormValues,
            toggleExpand,
            fileName
        } = 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
        }

        return (
            <>
                <Card bordered={false}>
                    <div style={{ marginBottom: '15px' }}>
                            <h3 style={{ fontWeight: 600, marginBottom: '20px' }}>系统监控统计</h3>
                            <Row gutter={[16, 16]}>
                                <Col span={8}>
                                    <Card title="人员分布" bordered={false}>
                                        <div style={{ height: 200 }}>
                                            <ReactECharts
                                                option={{
                                                    tooltip: {
                                                        trigger: 'item',
                                                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                                                    },
                                                    series: [
                                                        {
                                                            name: '人员分布',
                                                            type: 'pie',
                                                            radius: ['50%', '70%'],
                                                            avoidLabelOverlap: false,
                                                            itemStyle: {
                                                                borderRadius: 10,
                                                                borderColor: '#fff',
                                                                borderWidth: 2
                                                            },
                                                            label: {
                                                                show: false,
                                                                position: 'center'
                                                            },
                                                            emphasis: {
                                                                label: {
                                                                    show: true,
                                                                    fontSize: 20,
                                                                    fontWeight: 'bold'
                                                                }
                                                            },
                                                            labelLine: {
                                                                show: false
                                                            },
                                                            data: [
                                                                { value: 120, name: '技术部', itemStyle: { color: '#8884d8' } },
                                                                { value: 80, name: '行政部', itemStyle: { color: '#82ca9d' } },
                                                                { value: 60, name: '财务部', itemStyle: { color: '#ffc658' } },
                                                                { value: 40, name: '人力资源部', itemStyle: { color: '#ff8042' } }
                                                            ]
                                                        }
                                                    ]
                                                }}
                                                style={{ height: '200px', width: '100%' }}
                                            />
                                        </div>
                                        <div style={{ marginTop: '10px', fontSize: '12px' }}>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#8884d8', marginRight: '5px' }}></span>
                                                <span>技术部</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#82ca9d', marginRight: '5px' }}></span>
                                                <span>行政部</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#ffc658', marginRight: '5px' }}></span>
                                                <span>财务部</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#ff8042', marginRight: '5px' }}></span>
                                                <span>人力资源部</span>
                                            </div>
                                        </div>
                                    </Card>
                                </Col>
                                <Col span={8}>
                                    <Card title="文档类型分布" bordered={false}>
                                        <div style={{ height: 200 }}>
                                            <ReactECharts
                                                option={{
                                                    tooltip: {
                                                        trigger: 'item',
                                                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                                                    },
                                                    series: [
                                                        {
                                                            name: '文档类型分布',
                                                            type: 'pie',
                                                            radius: ['50%', '70%'],
                                                            avoidLabelOverlap: false,
                                                            itemStyle: {
                                                                borderRadius: 10,
                                                                borderColor: '#fff',
                                                                borderWidth: 2
                                                            },
                                                            label: {
                                                                show: false,
                                                                position: 'center'
                                                            },
                                                            emphasis: {
                                                                label: {
                                                                    show: true,
                                                                    fontSize: 20,
                                                                    fontWeight: 'bold'
                                                                }
                                                            },
                                                            labelLine: {
                                                                show: false
                                                            },
                                                            data: [
                                                                { value: 150, name: 'Word文档', itemStyle: { color: '#0088FE' } },
                                                                { value: 100, name: 'PDF文档', itemStyle: { color: '#00C49F' } },
                                                                { value: 60, name: 'Excel表格', itemStyle: { color: '#FFBB28' } },
                                                                { value: 40, name: '其他文档', itemStyle: { color: '#FF8042' } }
                                                            ]
                                                        }
                                                    ]
                                                }}
                                                style={{ height: '200px', width: '100%' }}
                                            />
                                        </div>
                                        <div style={{ marginTop: '10px', fontSize: '12px' }}>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#0088FE', marginRight: '5px' }}></span>
                                                <span>Word文档</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#00C49F', marginRight: '5px' }}></span>
                                                <span>PDF文档</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#FFBB28', marginRight: '5px' }}></span>
                                                <span>Excel表格</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#FF8042', marginRight: '5px' }}></span>
                                                <span>其他文档</span>
                                            </div>
                                        </div>
                                    </Card>
                                </Col>
                                <Col span={8}>
                                    <Card title="审阅和修改采纳情况" bordered={false}>
                                        <div style={{ height: 200 }}>
                                            <ReactECharts
                                                option={{
                                                    tooltip: {
                                                        trigger: 'item',
                                                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                                                    },
                                                    series: [
                                                        {
                                                            name: '审阅情况',
                                                            type: 'pie',
                                                            radius: ['50%', '70%'],
                                                            avoidLabelOverlap: false,
                                                            itemStyle: {
                                                                borderRadius: 10,
                                                                borderColor: '#fff',
                                                                borderWidth: 2
                                                            },
                                                            label: {
                                                                show: false,
                                                                position: 'center'
                                                            },
                                                            emphasis: {
                                                                label: {
                                                                    show: true,
                                                                    fontSize: 20,
                                                                    fontWeight: 'bold'
                                                                }
                                                            },
                                                            labelLine: {
                                                                show: false
                                                            },
                                                            data: [
                                                                { value: 120, name: '已采纳', itemStyle: { color: '#4CAF50' } },
                                                                { value: 80, name: '部分采纳', itemStyle: { color: '#FF9800' } },
                                                                { value: 60, name: '待处理', itemStyle: { color: '#2196F3' } },
                                                                { value: 40, name: '未采纳', itemStyle: { color: '#F44336' } }
                                                            ]
                                                        }
                                                    ]
                                                }}
                                                style={{ height: '200px', width: '100%' }}
                                            />
                                        </div>
                                        <div style={{ marginTop: '10px', fontSize: '12px' }}>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#4CAF50', marginRight: '5px' }}></span>
                                                <span>已采纳：审阅建议完全被接受</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#FF9800', marginRight: '5px' }}></span>
                                                <span>部分采纳：审阅建议部分被接受</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#2196F3', marginRight: '5px' }}></span>
                                                <span>待处理：审阅建议尚未处理</span>
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                                                <span style={{ display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#F44336', marginRight: '5px' }}></span>
                                                <span>未采纳：审阅建议未被接受</span>
                                            </div>
                                        </div>
                                    </Card>
                                </Col>
                            </Row>
                        </div>
                    <div style={{ marginBottom: '15px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div>
                            <h3 style={{ fontWeight: 600 }}>审阅详情列表</h3>
                        </div>

                        {/* <div style={{ gap: '10px' }}>
                            <Input placeholder='搜索知识条目' style={{ width: 200, marginRight: '10px' }} />

                            <Button type='primary' htmlType='submit' style={{ marginRight: '10px', background: '#4CAF50' }}>
                                新增知识
                            </Button>
                        </div> */}
                    </div>
                    <Table
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'id',
                                key: 'id',
                                width: 60,
                                align: 'center',
                            },
                            {
                                title: '文档名称',
                                dataIndex: 'documentName',
                                key: 'documentName',
                                width: 200,
                            },
                            {
                                title: '审阅人',
                                dataIndex: 'reviewer',
                                key: 'reviewer',
                                width: 100,
                            },
                            {
                                title: '审阅时间',
                                dataIndex: 'reviewTime',
                                key: 'reviewTime',
                                width: 150,
                            },
                            {
                                title: '状态',
                                dataIndex: 'status',
                                key: 'status',
                                width: 100,
                                render: (status) => {
                                    let color = '';
                                    switch(status) {
                                        case '已采纳':
                                            color = '#4CAF50';
                                            break;
                                        case '部分采纳':
                                            color = '#FF9800';
                                            break;
                                        case '待处理':
                                            color = '#2196F3';
                                            break;
                                        case '未采纳':
                                            color = '#F44336';
                                            break;
                                        default:
                                            color = '#757575';
                                    }
                                    return <span style={{ color }}>{status}</span>;
                                },
                            },
                            {
                                title: '操作',
                                key: 'action',
                                width: 80,
                                render: (_, record) => (
                                    <Button type="link" onClick={() => this.handleViewKnowledge(record.id)}>
                                        查看
                                    </Button>
                                ),
                            },
                        ]}
                        dataSource={[
                            {
                                id: 1,
                                documentName: '安全操作规程V1.0.docx',
                                reviewer: '张三',
                                reviewTime: '2025-01-15 10:30',
                                status: '已采纳',
                                key: '1',
                            },
                            {
                                id: 2,
                                documentName: '技术规范说明书.pdf',
                                reviewer: '李四',
                                reviewTime: '2025-01-14 14:20',
                                status: '部分采纳',
                                key: '2',
                            },
                            {
                                id: 3,
                                documentName: '管理制度汇编.docx',
                                reviewer: '王五',
                                reviewTime: '2025-01-13 09:15',
                                status: '待处理',
                                key: '3',
                            },
                            {
                                id: 4,
                                documentName: '设备维护手册.pdf',
                                reviewer: '赵六',
                                reviewTime: '2025-01-12 16:45',
                                status: '未采纳',
                                key: '4',
                            }
                        ]}
                        pagination={false}
                        style={{ marginTop: '20px' }}
                    />

                    {/* 知识条目查看模态框 */}
                    <Modal
                        title="文档格式规范"
                        open={this.state.viewKnowledgeModalVisible}
                        onCancel={() => this.setState({ viewKnowledgeModalVisible: false })}
                        footer={[
                            <Button key="close" onClick={() => this.setState({ viewKnowledgeModalVisible: false })}>
                                关闭
                            </Button>
                        ]}
                        width={600}
                    >
                        <div style={{ marginBottom: '20px' }}>
                            <h3 style={{ marginBottom: '10px', color: '#1890ff' }}>知识摘要</h3>
                            <p>所有提交的文档应遵循以下格式规范：1. 使用统一字体和字号；2. 标题层级清晰；3. 段落间距一致；4. 图表编号规范。</p>
                        </div>
                        
                        <div style={{ marginBottom: '20px' }}>
                            <h3 style={{ marginBottom: '10px', color: '#1890ff' }}>相关文件</h3>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <span>format_guide.docx</span>
                                <Button type="link" onClick={() => {
                                    // 这里可以实现文件下载的逻辑
                                    message.info('文件下载中...');
                                }}>
                                    下载
                                </Button>
                            </div>
                        </div>
                        
                        <div>
                            <h3 style={{ marginBottom: '10px', color: '#1890ff' }}>相关标签</h3>
                            <div style={{ display: 'flex', gap: '10px' }}>
                                <Tag color="blue">规范</Tag>
                                <Tag color="green">文档</Tag>
                            </div>
                        </div>
                    </Modal>

                    {/* <div className={styles.proUsertableList}>
                        <div className={styles.proUsertableListForm}>{this.renderForm()}</div>
                        <div style={{ fontWeight: 500 }}>汇总信息</div>
                        <Divider style={{ borderColor: '#cccccc', margin: 0 }}>
                            <div className={styles.summaryButton} onClick={() => this.handleCollapse()}>
                                {toggleExpand ? <><UpOutlined /> 收起</> : <><DownOutlined /> 展开</>}
                            </div>
                        </Divider>
                        <div style={{ display: toggleExpand ? 'block' : 'none' }}>
                            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={styles.summaryContent}>
                                <Col md={5} sm={24}>
                                    <div>
                                        <span>单位: </span>
                                        <span>清河中医院</span>
                                    </div>
                                </Col>

                                <Col md={5} sm={24}>
                                    <span>部门: </span>
                                    <span>心内科</span>
                                </Col>

                                <Col md={5} sm={24}>
                                    <div>
                                        <span>总人数: </span>
                                        <span>300</span>
                                    </div>
                                </Col>
                            </Row>
                            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={styles.summaryContent}>
                                <Col md={5} sm={24}>
                                    <span>总作业数量: </span>
                                    <span>600</span>
                                </Col>

                                <Col md={5} sm={24}>
                                    <span>总考勤工时: </span>
                                    <span>2300</span>
                                </Col>

                                <Col md={5} sm={24}>
                                    <span>总作业工时: </span>
                                    <span>2000</span>
                                </Col>
                                <Col md={5} sm={24}>
                                    <span>总空闲工时: </span>
                                    <span>200</span>
                                </Col>
                            </Row>
                            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={styles.summaryContent}>
                                <Col md={5} sm={24}>
                                    <span>直接作业占比: </span>
                                    <span>86.96%</span>
                                </Col>

                                <Col md={5} sm={24}>
                                    <span>空闲工时占比: </span>
                                    <span>13.04%</span>
                                </Col>
                            </Row>
                        </div>
                        <div style={{ display: 'flex', justifyContent: "space-between" }}>
                            <div>共20项</div>
                            <div style={{ marginRight: 30 }}>
                                图例：
                                <div style={{ display: 'inline-block', width: 65, height: 20, textAlign: 'center', background: '#8ddd15' }}>作业时长</div>
                                <div style={{ display: 'inline-block', width: 65, height: 20, textAlign: 'center', background: '#cccccc', }}>空闲时长</div>
                            </div>
                        </div>
                        <StandardTable
                            rowKey={'user_id'}
                            selectedRows={selectedRows}
                            loading={loading}
                            data={mockData}
                            columns={this.columns}
                            onSelectRow={this.handleSelectRows}
                            onChange={this.handleStandardTableChange}
                            scroll={{ x: 1000, y: 600 }}
                            showTotal={(total, range) => total}
                        />
                    </div> */}
                </Card>

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

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

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

export default TimeSheetList
