import React, { useMemo, useState } from 'react';
import { Select, Space, Button, Switch, message, Input, Modal, InputNumber } from 'antd';
import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './OilProductionPlan.less';

const OilProductionPlan = () => {
    const [searchKeyword, setSearchKeyword] = useState('');
    // 列表筛选与数据（演示数据，可替换为接口）
    const [filters, setFilters] = useState({
        listCategory: undefined,
        listStatus: undefined,
    });

    const columns = useMemo(() => {
        return [
            { title: '计划编号', dataIndex: 'planNo', key: 'planNo', width: 100 },
            { title: '计划名称', dataIndex: 'planName', key: 'planName', width: 220 },
            { title: '计划类型', dataIndex: 'planType', key: 'planType', width: 100 },
            { title: '计划时间', dataIndex: 'planTime', key: 'planTime', width: 160 },
            { title: '数量（吨）', dataIndex: 'qty', key: 'qty', width: 100 },
            { title: '来源/目标', dataIndex: 'sourceTarget', key: 'sourceTarget', width: 220 },
            { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
            { title: '进度', dataIndex: 'progress', key: 'progress', width: 100 },
            { title: '创建人', dataIndex: 'creator', key: 'creator', width: 100 },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 140,
                render: (_, record) => (
                    <Space size={12}>
                        <Button
                            type="link"
                            size="small"
                            className={styles.primaryActionBtn}
                            onClick={() => handlePrimaryAction(record)}
                        >
                            {record.actionText}
                        </Button>
                    </Space>
                ),
            },
        ];
    }, []);

    const [tableData, setTableData] = useState([
        {
            key: 'RPO01',
            planNo: 'RPO01',
            planName: '5月的92#汽油管道收油计划',
            planType: '管道收油',
            planTime: '2024-05-01 14:00',
            qty: 600,
            sourceTarget: '来源: 炼油厂 目标: 1号储罐',
            status: '执行中',
            progress: '45%',
            creator: '郑双',
            actionText: '更新进度',
        },
        {
            key: 'RPO02',
            planNo: 'RPO02',
            planName: '5月的95#汽油管道收油计划',
            planType: '管道收油',
            planTime: '2024-05-01 14:00',
            qty: 500,
            sourceTarget: '来源: 炼油厂 目标: 2号储罐',
            status: '执行中',
            progress: '40%',
            creator: '钱亮丽',
            actionText: '跟踪进度',
        },
        {
            key: 'RPO03',
            planNo: 'RPO03',
            planName: '5月的0#柴油铁路收油计划',
            planType: '铁路收油',
            planTime: '2024-05-01 15:00',
            qty: 300,
            sourceTarget: '来源: 炼油厂 目标: 3号储罐',
            status: '执行中',
            progress: '0%',
            creator: '郑璞',
            actionText: '开始执行',
        },
        {
            key: 'RPO04',
            planNo: 'RPO04',
            planName: '5月的航煤管道公路收油计划',
            planType: '公路收油',
            planTime: '2024-05-01 12:00',
            qty: 200,
            sourceTarget: '来源: 炼油厂 目标: 4号储罐',
            status: '待执行',
            progress: '50%',
            creator: '孙莲艳',
            actionText: '开始执行',
        },
        {
            key: 'RPO05',
            planNo: 'RPO05',
            planName: '4月的92#汽油管道收油计划',
            planType: '管道收油',
            planTime: '2024-05-01 11:00',
            qty: 100,
            sourceTarget: '来源: 炼油厂 目标: 5号储罐',
            status: '审核中',
            progress: '90%',
            creator: '李莉娜',
            actionText: '更新进度',
        },
        {
            key: 'RPO06',
            planNo: 'RPO06',
            planName: '4月的95#汽油管道收油计划',
            planType: '管道收油',
            planTime: '2024-05-01 10:00',
            qty: 150,
            sourceTarget: '来源: 炼油厂 目标: 6号储罐',
            status: '已完成',
            progress: '30%',
            creator: '李钰',
            actionText: '查看详情',
        },
    ]);

    const [progressState, setProgressState] = useState({ open: false, value: 0, recordKey: null });

    const handlePrimaryAction = (record) => {
        const action = record.actionText;
        if (action === '更新进度') {
            const current = parseInt(String(record.progress).replace('%', ''), 10) || 0;
            setProgressState({ open: true, value: current, recordKey: record.key });
        } else if (action === '跟踪进度') {
            message.info(`当前进度：${record.progress}`);
        } else if (action === '开始执行') {
            Modal.confirm({
                title: '确认开始执行？',
                onOk: () => {
                    setTableData((prev) => prev.map((item) =>
                        item.key === record.key
                            ? { ...item, status: '执行中', progress: item.progress || '0%', actionText: '更新进度' }
                            : item
                    ));
                    message.success('已开始执行');
                },
            });
        } else if (action === '查看详情') {
            Modal.info({
                title: '计划详情',
                content: (
                    <div>
                        <div>计划编号：{record.planNo}</div>
                        <div>计划名称：{record.planName}</div>
                        <div>计划类型：{record.planType}</div>
                        <div>计划时间：{record.planTime}</div>
                        <div>数量（吨）：{record.qty}</div>
                        <div>来源/目标：{record.sourceTarget}</div>
                        <div>状态：{record.status}</div>
                        <div>进度：{record.progress}</div>
                        <div>创建人：{record.creator}</div>
                    </div>
                ),
            });
        }
    };


    return (
        <div className={styles.container}>
            <div className={styles.searchSection}>
                <div className={styles.sectionHeader}>
                    <span className={styles.sectionBar} />
                    <span className={styles.sectionTitle}>查询条件</span>
                </div>
                <div className={styles.filterContent}>
                    <div className={styles.filterItem}>
                        <Input.Search
                            placeholder="搜索关键词"
                            allowClear
                            value={searchKeyword}
                            onChange={(e) => setSearchKeyword(e.target.value)}
                            onSearch={(val) => setSearchKeyword(val)}
                            style={{ minWidth: 150 }}
                        />
                    </div>
                    <div className={styles.filterItem}>
                        <span className={styles.filterLabel}>状态:</span>
                        <Select
                            value={filters.listStatus}
                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
                            placeholder="全部"
                            options={[
                                { label: '全部', value: undefined },
                                { label: '启用', value: '启用' },
                                { label: '停用', value: '停用' },
                            ]}
                            allowClear
                        />
                    </div>
                    <Space className={styles.filterButtons}>
                        <Button
                            type="primary"
                            icon={<SearchOutlined />}
                            className={styles.queryBtn}
                        >
                            查询
                        </Button>
                        <Button
                            icon={<ReloadOutlined />}
                            className={styles.resetBtn}
                        >
                            重置
                        </Button>
                    </Space>
                </div>
            </div>
            <div className={styles.searchSection}>
                <div className={styles.sectionHeader}>
                    <span className={styles.sectionBar} />
                    <span className={styles.sectionTitle}>收油生产计划列表</span>
                    <Space className={styles.headerActions}>
                        <Button
                            type="primary"
                            icon={<PlusOutlined />}
                            className={styles.addBtn}
                        >
                            新增计划
                        </Button>
                    </Space>
                </div>

                <div className={styles.tableWrapper}>
                    <StandardTable
                        rowKey="key"
                        columns={columns}
                        data={{
                            list: tableData,
                            pagination: {
                                total: tableData.length,
                                pageSize: 10,
                                current: 1,
                                showTotal: (total) => `共 ${total} 条`,
                            },
                        }}
                        // selectionType="checkbox"
                    />
                </div>
                <Modal
                    title="更新进度"
                    open={progressState.open}
                    onOk={() => {
                        setTableData((prev) => prev.map((item) =>
                            item.key === progressState.recordKey
                                ? { ...item, progress: `${progressState.value}%` }
                                : item
                        ));
                        setProgressState({ open: false, value: 0, recordKey: null });
                        message.success('进度已更新');
                    }}
                    onCancel={() => setProgressState({ open: false, value: 0, recordKey: null })}
                >
                    <Space>
                        <span>当前进度（%）：</span>
                        <InputNumber
                            min={0}
                            max={100}
                            value={progressState.value}
                            onChange={(v) => setProgressState((s) => ({ ...s, value: Number(v) || 0 }))}
                        />
                    </Space>
                </Modal>
            </div>
        </div>
    );
};

export default OilProductionPlan;


