import React, { useRef, useEffect, useState } from 'react';
import { Card, Row, Col, Select, Progress, Button, Tag } from 'antd';
import ReactECharts from 'echarts-for-react';
import { CheckCircleOutlined } from '@ant-design/icons';
import './GeneralSolidWaste.less';
import StandardTable from '@/components/StandardTable';
import jhrkIcon from '@/assets/business_envmonitoring/jhrk_icon.svg';
import zclIcon from '@/assets/business_envmonitoring/zcl_icon.svg';
import yszIcon from '@/assets/business_envmonitoring/ysz_icon.svg';
import ljczIcon from '@/assets/business_envmonitoring/ljcz_icon.svg';
import rzsIcon from '@/assets/business_envmonitoring/rzs_icon.svg';
import viewIcon from '@/assets/business_envinformation/viewicon.svg';
import pcztBg from '@/assets/business_envmonitoring/pczt_bg.svg';
import warningBg from '@/assets/business_envmonitoring/warning_bg.svg';
const GeneralSolidWaste = () => {
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 12,
    });
    const categoryBarOption = {
        grid: { left: 40, right: 20, top: 10, bottom: 20 },
        xAxis: {
            type: 'category',
            data: ['xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类'],
            axisTick: { show: false },
            axisLine: { show: false }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#E9EBF1',
                    width: 1
                }
            }
        },
        series: [{
            type: 'bar',
            data: [20, 25, 18, 22, 30, 15, 28, 19, 24, 21, 27, 23],
            barWidth: 10,
            itemStyle: {
                color: '#9F92FF',
                barBorderRadius: [10, 10, 0, 0]
            }
        }]
    };
    // 顶部统计卡片数据
    const stats = [
        { title: '计划入库', value: '69', sub: '80', icon: jhrkIcon },
        { title: '暂存量', value: '69', sub: '80', icon: zclIcon },
        { title: '运输中', value: '69', sub: '80', icon: yszIcon },
        { title: '累计处置', value: '69', sub: '80', icon: ljczIcon },
    ];
    // 预警卡片
    const warnings = [
        { title: '资质预警', value: 8, icon: rzsIcon },
        { title: '库存预警', value: 8, icon: rzsIcon },
        { title: '处理量预警', value: 8, icon: rzsIcon },
        { title: '流程停滞预警', value: 8, icon: rzsIcon },
    ];
    // 待审批列表
    const approvalList = [
        { title: 'loia234批次入库', date: '2023-08-28', status: '待审批', type: 'orange' },
        { title: 'loia234批次运输申请', date: '2023-08-28', status: '待审批', type: 'green' },
        { title: 'loia234批次运输申请', date: '2023-08-28', status: '待审批', type: 'green' },
        { title: 'loia234批次入库申请', date: '2023-08-28', status: '待审批', type: 'orange' },
    ];
    // 表格数据
    const columns = [
        { title: '序号', dataIndex: 'key', key: 'key', width: 60 },
        { title: '产生时间', dataIndex: 'date', key: 'date' },
        { title: '废物名称', dataIndex: 'name', key: 'name' },
        { title: '废物类别', dataIndex: 'type', key: 'type' },
        { title: '产生部门', dataIndex: 'dept', key: 'dept' },
        { title: '产生量', dataIndex: 'amount', key: 'amount' },
        { title: '暂存位置', dataIndex: 'location', key: 'location' },
        {
            title: '状态', dataIndex: 'status', key: 'status', render: (text) => {
                if (text === '已处理') return <div className='gsw-table-processed'>已处理</div>;
                if (text === '未处理') return <div className='gsw-table-unprocessed'>未处理</div>;
                return <div className='gsw-table-processing'>处理中</div>;
            }
        },
        {
            title: '详情', dataIndex: 'action', render: (_, record) => (
                <div style={{ display: 'flex', alignItems: 'center'}}>
                    <img
                        src={viewIcon}
                        alt="查看"
                        style={{ width: 16, height: 16, cursor: 'pointer' }}
                    />
                </div>
            ),
        },
    ];
    const dataSource = [
        { key: 1, date: '2025-09-22', name: 'xxxxx', type: 'hto', dept: 26, amount: '10吨', location: 'xxx号暂存点', status: '已处理' },
        { key: 2, date: '2025-09-21', name: 'xxxxx', type: 'dfafaf', dept: 58, amount: '3吨', location: 'xxx号暂存点', status: '未处理' },
        { key: 3, date: '2025-10-01', name: 'dfadf', type: 'dfadf', dept: 52, amount: '5吨', location: 'xxx号暂存点', status: '处理中' },
        { key: 4, date: '2025-09-27', name: 'xxxxx', type: 'dadf', dept: 43, amount: '7吨', location: 'xxx号暂存点', status: '处理中' },
        { key: 5, date: '2025-09-19', name: 'xxxxx', type: 'dadf', dept: 43, amount: '6吨', location: 'xxx号暂存点', status: '处理中' },
    ];
    const selectOptions = [
        { label: '产生清单', value: '产生清单' },
    ];
    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const start = (current - 1) * pageSize;
        const end = start + pageSize;
        return dataSource.slice(start, end);
    };
    return (
        <div className="gsw-main">
            <div className="gsw-content" style={{ display: 'flex', gap: 10 }}>
                {/* 左侧容器：顶部统计卡片+暂存点情况+待审批 */}
                <div className="gsw-left" style={{ flex: 2, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <div className="gsw-top" style={{ marginBottom: 0 }}>
                        {stats.map((item, idx) => (
                            <div className="gsw-stat-card" key={idx}>
                                <div>
                                    <div className="gsw-stat-title">
                                        <span className="gsw-stat-title-bar" />
                                        {item.title}
                                    </div>
                                    <div className="gsw-stat-value">
                                        <span>{item.value}</span>
                                        <span className='gsw-stat-unit'>吨</span>
                                    </div>
                                    <div className="gsw-stat-sub">{item.sub} 立方米</div>
                                </div>
                                <img src={item.icon} style={{ width: '40px' }} alt="统计图标" />
                            </div>
                        ))}
                    </div>
                    <div className="gsw-chart">
                        <div className="gsw-chart-title">
                            <span className="gsw-chart-title-bar" />
                            暂存点情况
                        </div>
                        <ReactECharts option={categoryBarOption} style={{ height: 160 }} />
                    </div>
                </div>
                {/* 右侧容器：批次状态卡片 */}
                <div className="gsw-right" style={{ flex: 1.2, display: 'flex', flexDirection: 'column' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 10 }}>
                        <div className="gsw-batch-status">
                            <div className="gsw-batch-title">
                                <span className="gsw-batch-title-bar" />
                                批次状态
                            </div>
                            <div className="gsw-status">
                                <div className="gsw-status-card gsw-status-card-active">
                                    批次查询
                                </div>
                                <div className="gsw-status-card gsw-status-card-inactive">
                                    所有批次状态
                                </div>
                            </div>
                            <img src={pcztBg} alt="批次状态背景" className="gsw-batch-bg" style={{position: 'absolute', right: 0, top: 0, width: 70, pointerEvents: 'none'}} />
                        </div>
                        <div className="gsw-batch-status" style={{ padding: '20px 50px 20px 20px',   background: 'linear-gradient(-90deg, rgba(255,213,213,0.4) 0%, rgba(255,238,238,0.4) 20%, rgba(255,246,246,0.39) 80%, rgba(255,255,255,1) 100%)' }}>
                            <div className="gsw-warnings">
                                {warnings.map((w, idx) => (
                                    <div className="gsw-warning-card" key={idx}>
                                        <div>
                                            <div className="gsw-warning-title">{w.title}</div>
                                            <div className="gsw-warning-value">{w.value}</div>
                                        </div>
                                        <img src={w.icon} style={{ width: '40px' }} alt="统计图标" />
                                    </div>
                                ))}
                            </div>
                            <img src={warningBg} alt="警示背景" className="gsw-batch-bg" style={{position: 'absolute', right: 0, bottom: 0, width: 60, pointerEvents: 'none'}} />
                        </div>
                    </div>
                </div>
            </div>
            {/* 待审批和表格左右布局 */}
            <div className="gsw-bottom-row" style={{ display: 'flex', gap: 10, marginTop: 10 }}>
                <div className="gsw-approval" style={{ flex: 3.5 }}>
                    <div className="gsw-approval-title">
                        <span className="gsw-approval-title-bar" />
                        待审批
                    </div>
                    <div className="gsw-approval-list">
                        {approvalList.map((item, idx) => (
                            <div className={`gsw-approval-item gsw-approval-${item.type}`} key={idx}>
                                <div>
                                    <div className="gsw-approval-main">{item.title}</div>
                                    <div className="gsw-approval-date">提交人：张建强 | 提交时间：{item.date}</div>
                                </div>
                                <Button size="small">详情</Button>
                            </div>
                        ))}
                    </div>
                </div>
                <div className="gsw-table-section" style={{ flex: 8.5 }}>
                    <div className="gsw-table-header">
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                            <div className="gsw-table-title">
                                <span className="gsw-table-title-bar" />
                                信息台账
                            </div>
                            <Select size="small" options={selectOptions} defaultValue={'产生清单'} style={{ fontSize: 12 }} />
                        </div>
                        <Button size="small" style={{ fontSize: 12, padding: '0 12px' }}>导出</Button>
                    </div>
                    <StandardTable
                        columns={columns}
                        // dataSource={dataSource}
                        data={{
                            list: getCurrentPageData(),
                            pagination: {
                                ...pagination,
                                total: dataSource.length,
                                showTotal: (total) => `共 ${total} 条`,
                                showSizeChanger: false,
                            }
                        }}
                        size="small"
                    />
                </div>
            </div>
        </div>
    );
};

export default GeneralSolidWaste;