
import React, { useState } from 'react';
import { Card, Result, Timeline, Statistic, Table, Row, Input, Button, Col, Select, Modal, Form } from 'antd';
import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import ReactECharts from 'echarts-for-react';
import styles from './ResponsibilityImplementation.less';

import timer_shaft from '@/assets/basic_information/timer_shaft.png'


const ResponsibilityImplementation = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [form] = Form.useForm();

    const handleAddResponsible = () => {
        setIsModalVisible(true);
    };

    const handleModalCancel = () => {
        setIsModalVisible(false);
        form.resetFields();
    };

    const handleModalOk = () => {
        form.validateFields().then(values => {
            console.log('表单数据:', values);
            // 这里可以添加提交逻辑
            setIsModalVisible(false);
            form.resetFields();
        }).catch(err => {
            console.log('表单验证失败:', err);
        });
    };

    const columns = [
        {
            title: "编号",
            dataIndex: "id",
            key: "id",
            width: 50,
        },
        {
            title: "责任区域",
            dataIndex: "zrqy",
            key: "zrqy",
            width: 80,
        },
        {
            title: "设备型号",
            dataIndex: "sbxh",
            key: "sbxh",
            width: 120,
        },
        {
            title: "危险源类型",
            dataIndex: "wxlylx",
            key: "wxlylx",
            width: 110,
        },
        {
            title: "责任人",
            dataIndex: "zrr",
            key: "zrr",
            width: 80,
        },
        {
            title: "电话",
            dataIndex: "lxfs",
            key: "lxfs",
            width: 120,
        },
        {
            title: "巡检频率",
            dataIndex: "xjpl",
            key: "xjpl",
            width: 120,
        },
        {
            title: "最近巡检",
            dataIndex: "zjxj",
            key: "zjxj",
            width: 120,
        },
        {
            title: "状态",
            dataIndex: "zt",
            key: "zt",
            width: 90,
            render: (text) => {
                const statusMap = {
                    '正常': { color: '#44BB5F', bg: '#D8F7DE' },
                    '待巡检': { color: '#FFC405', bg: '#FFF6DA' },
                    '需处理': { color: '#FF2526', bg: '#FCEAEA' }
                };
                const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
                return (
                    <span style={{ 
                        color: status.color, 
                        backgroundColor: status.bg,
                        padding: '2px 8px',
                        borderRadius: '4px',
                        fontSize: '12px'
                    }}>
                        {text}
                    </span>
                );
            }
        },
        {
            title: "操作",
            dataIndex: "cz",
            key: "cz",
            width: 120,
            render: (text, record) => {
                const handleView = (record) => {
                    console.log('查看记录:', record);
                };
                
                const handleEdit = (record) => {
                    console.log('编辑记录:', record);
                };

                return (
                    <div>
                        <Button 
                            type="link" 
                            onClick={() => handleView(record)}
                            style={{ color: '#2E4CD4' }}
                        >
                            查看
                        </Button>
                        <Button 
                            type="link" 
                            onClick={() => handleEdit(record)}
                            style={{ color: '#2E4CD4' }}
                        >
                            编辑
                        </Button>
                    </div>
                );
            }
        }
    ];

    // 12条写死数据
    const tableData = [
        {
            key: '1',
            id: '01',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '正常'
        },
        {
            key: '2',
            id: '02',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '待巡检'
        },
        {
            key: '3',
            id: '03',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '需处理'
        },
        {
            key: '4',
            id: '04',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '正常'
        },
        {
            key: '5',
            id: '05',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '待巡检'
        },
        {
            key: '6',
            id: '06',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '需处理'
        },
        {
            key: '7',
            id: '07',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '正常'
        },
        {
            key: '8',
            id: '08',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '待巡检'
        },
        {
            key: '9',
            id: '09',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '需处理'
        },
        {
            key: '10',
            id: '10',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '正常'
        },
        {
            key: '11',
            id: '11',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '待巡检'
        },
        {
            key: '12',
            id: '12',
            zrqy: '储罐区A',
            sbxh: '130910180007',
            wxlylx: '易燃易爆品存储',
            zrr: '陈安心',
            lxfs: '152****7754',
            xjpl: '每日两次',
            zjxj: '2025-06-08 13:34',
            zt: '需处理'
        }
    ];

    // 雷达图配置方法
    const getRadarChartOption = () => {
        return {
            radar: {
                indicator: [
                    { name: '{a|问题处理率} {b|85%}', max: 100, nameLocation: 'start', nameGap: -60 },
                    { name: '{a|隐患整改率} {b|15%}', max: 100, nameGap: 20 },
                    { name: '{a|履职频次} {b|92%}', max: 100, nameGap: 20 }
                ],
                center: ['50%', '60%'],
                radius: 48,
                splitNumber: 4,
                shape: 'polygon',
                axisName: {
                    rich: {
                        a: {
                            color: '#333',
                            fontSize: 12,
                            fontWeight: 400,
                        },
                        b: {
                            color: '#2E4CD4',
                            fontSize: 12,
                            fontWeight: 400,
                        }
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#BFCBFF']
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['#fff']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#E6EAF5'
                    }
                }
            },
            series: [{
                type: 'radar',
                data: [
                    {
                        value: [85, 15, 92],
                        areaStyle: {
                            color: '#499BFF'
                        },
                        lineStyle: {
                            color: '#1269FF',
                            width: 2
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#2E4CD4',
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    }
                ]
            }]
        }
    };

    return (
        <div className={styles.containerR}>
            <div className={styles.containerOne}>
                <div className={styles.containerOneLeft}>
                    {/* 第一块：蓝色块 + 标题 履职时间轴 */}
                    <div className={styles.leftTopSection}>
                        <div className={styles.titleLeft}>
                            <div className={styles.titleIcon}></div>
                            <div>履职时间轴</div>
                        </div>

                        {/* 时间轴图片 */}
                        <div style={{ marginTop: '15px' }}>
                            <img src={timer_shaft} alt="时间轴" style={{ width: '100%', height: 'auto' }} />
                        </div>

                    </div>
                </div>

                <div className={styles.containerOneRight}>
                    {/* 第一块：标题 + 下拉选择框 + 导出按钮 */}
                    <div className={styles.rightTopSection}>
                        <div className={styles.rightTopLeft}>
                            <div className={styles.titleLeft}>
                                <div className={styles.titleIcon}></div>
                                <div>在线考核</div>
                            </div>
                            <Select
                                style={{ width: 100, marginLeft: 15 }}
                                defaultValue="每月"
                                className={styles.rightTopSelect}
                                options={[
                                    { value: '每月', label: '每月' },
                                    { value: '每年', label: '每年' },
                                ]}
                                optionRender={(option) => (
                                    <div className={styles.customOption}>
                                        <span className={styles.optionIcon}>📅</span>
                                        <span className={styles.optionText}>{option.label}</span>
                                    </div>
                                )}
                            />
                        </div>
                        <div className={styles.rightTopRight}>
                            <Button
                                type="primary"
                                className={styles.exportBtn}
                                icon={<ExportOutlined />}
                            >
                                导出PDF考核报告
                            </Button>
                        </div>
                    </div>

                    {/* 第二块：雷达图 */}
                    <div className={styles.rightBottomSection}>
                        <div style={{
                            width: '100%',
                            height: '100%',
                            display: 'flex',
                            // backgroundColor: 'red',
                            alignItems: 'center',
                            justifyContent: 'center',
                            position: 'relative',
                            // padding: '20px'
                        }}>
                            <ReactECharts
                                option={getRadarChartOption()}
                                style={{ width: '100%', height: '100%' }}
                                opts={{ renderer: 'canvas' }}
                            />
                        </div>
                    </div>
                </div>
            </div>

            <div className={styles.containerTwo}>
                {/* 第一个大块：标题 */}
                <div className={styles.containerTwoTitle}>
                    <div className={styles.titleLeft}>
                        <div className={styles.titleIcon}></div>
                        <div>重大危险源安全包信息库</div>
                    </div>
                </div>

                {/* 第二个大块：搜索和按钮 */}
                <div className={styles.containerTwoActions}>
                    <div className={styles.searchSection}>
                        <Input.Search 
                            placeholder="搜索危险源编号..." 
                            style={{ fontSize: '12px',  width:'220px' }}
                        />
                    </div>
                    <div className={styles.buttonSection}>
                        <Button 
                            icon={<PlusOutlined />}
                            onClick={handleAddResponsible}
                            style={{ 
                                color: '#2E4CD4', 
                                backgroundColor: 'transparent', 
                                borderColor: '#DFE4F6',
                                fontSize: '12px'
                            }}
                        >
                            新增责任人
                        </Button>
                        <Button 
                            icon={<ExportOutlined />}
                            style={{ 
                                color: '#2E4CD4', 
                                backgroundColor: 'transparent', 
                                borderColor: '#DFE4F6',
                                fontSize: '12px'
                            }}
                        >
                            导出清单
                        </Button>
                    </div>
                </div>

                {/* 第三个大块：表格 */}
                <div className={styles.containerTwoTable}>
                    <StandardTable
                        columns={columns}
                        data={{
                            list: tableData,
                            pagination: {
                                currentPage: 1,
                                pageSize: 5,
                                total: tableData.length,
                                showTotal: (total, range) => `共 ${total} 条数据`,
                                showSizeChanger: false,
                                jumpText: '前往',
                            }
                        }}
                        selectedRows={[]}
                        onSelectRow={() => { }}
                        onChange={() => { }}
                    />
                </div>
            </div>

            {/* 新增责任人弹窗 */}
            <Modal
                title="新增责任人"
                open={isModalVisible}
                onCancel={handleModalCancel}
                onOk={handleModalOk}
                okText="确定"
                cancelText="取消"
                width={800}
                wrapClassName={styles.addResponsibleModal}
                okButtonProps={{
                    style: {
                        backgroundColor: '#2E4CD4',
                        borderColor: '#2E4CD4'
                    }
                }}
                cancelButtonProps={{
                    style: {
                        color: '#666',
                        borderColor: '#DFE4F6'
                    }
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                    style={{ marginTop: '20px' }}
                >
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item
                                label="责任人"
                                name="responsiblePerson"
                                rules={[{ required: true, message: '请输入姓名' }]}
                            >
                                <Input placeholder="输入姓名" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="联系方式"
                                name="contactMethod"
                                rules={[
                                    { required: true, message: '请输入手机号' },
                                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
                                ]}
                            >
                                <Input placeholder="输入手机号" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item
                                label="责任区域"
                                name="responsibleArea"
                                rules={[{ required: true, message: '请选择责任区域' }]}
                            >
                                <Select placeholder="请选择责任区域">
                                    <Select.Option value="储罐区A">储罐区A</Select.Option>
                                    <Select.Option value="储罐区B">储罐区B</Select.Option>
                                    <Select.Option value="生产区">生产区</Select.Option>
                                    <Select.Option value="仓储区">仓储区</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="巡检频率"
                                name="inspectionFrequency"
                                rules={[{ required: true, message: '请选择巡检频率' }]}
                            >
                                <Select placeholder="请选择巡检频率">
                                    <Select.Option value="每日一次">每日一次</Select.Option>
                                    <Select.Option value="每日两次">每日两次</Select.Option>
                                    <Select.Option value="每周一次">每周一次</Select.Option>
                                    <Select.Option value="每月一次">每月一次</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item
                                label="设备型号"
                                name="deviceModel"
                                rules={[{ required: true, message: '请输入型号' }]}
                            >
                                <Input placeholder="输入型号" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="危险源类型"
                                name="hazardSourceType"
                                rules={[{ required: true, message: '请选择危险源类型' }]}
                            >
                                <Select placeholder="请选择危险源类型">
                                    <Select.Option value="易燃易爆品存储">易燃易爆品存储</Select.Option>
                                    <Select.Option value="有毒有害物质">有毒有害物质</Select.Option>
                                    <Select.Option value="高温高压设备">高温高压设备</Select.Option>
                                    <Select.Option value="其他">其他</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </div>
    );
};
export default ResponsibilityImplementation;  
