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 './MixingProductionPlan.less';

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

    const columns = useMemo(() => {
        return [
            { title: '计划编号', dataIndex: 'planNo', key: 'planNo', width: 90 },
            { title: '油品名称', dataIndex: 'planName', key: 'planName', width: 100 },
            { title: '计划类型', dataIndex: 'planType', key: 'planType', width: 120 },
            { title: '来源油品', dataIndex: 'sourceOil', key: 'sourceOil', width: 220 },
            { title: '目标油品', dataIndex: 'targetOil', key: 'targetOil', width: 160 },
            { title: '来源罐', dataIndex: 'sourceTank', key: 'sourceTank', width: 90 },
            { title: '目标罐', dataIndex: 'targetTank', key: 'targetTank', width: 90 },
            { title: '调和配方', dataIndex: 'formula', key: 'formula', width: 260 },
            { title: '计划时间', dataIndex: 'planTime', key: 'planTime', width: 160 },
            { title: '状态', dataIndex: 'status', key: 'status', width: 90 },
            { title: '进度', dataIndex: 'progress', key: 'progress', width: 90 },
            { title: '创建人', dataIndex: 'creator', key: 'creator', width: 90 },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 100,
                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: 'BP001',
            planNo: 'BP001',
            planName: '92#汽油',
            planType: '油品调和',
            sourceOil: 'MTBE、重整汽油、催化汽油',
            targetOil: '92# 3000立方米',
            sourceTank: 'T-103',
            targetTank: 'T-203',
            qty: 600,
            planTime: '2024-05-01 14:00',
            status: '执行中',
            progress: '45%',
            creator: '郑双',
            actionText: '更新进度',
            formula: 'MTBEA%、重整对油B5%、精化对油30%'
        },
        {
            key: 'BP002',
            planNo: 'BP002',
            planName: '95#汽油',
            planType: '油品调和',
            sourceOil: 'MTBE、重整汽油、催化汽油',
            targetOil: '95#',
            sourceTank: 'T-102',
            targetTank: 'T-202',
            qty: 500,
            planTime: '2024-05-01 14:00',
            status: '执行中',
            progress: '40%',
            creator: '钱添西',
            actionText: '跟踪进度',
            formula: 'MTBEA%、重整对油B18%、精化对油60%'
        },
        {
            key: 'BP003',
            planNo: 'BP003',
            planName: '92#汽油',
            planType: '油品调和',
            sourceOil: 'MTBE、重整汽油、催化汽油',
            targetOil: '92#',
            sourceTank: 'T-101',
            targetTank: 'T-201',
            qty: 300,
            planTime: '2024-05-01 15:00',
            status: '待执行',
            progress: '0%',
            creator: '郑璞',
            actionText: '开始执行',
            formula: 'MTBEA%、重整对油B2%、精化对油40%'
        },
        {
            key: 'BP004',
            planNo: 'BP004',
            planName: '95#汽油',
            planType: '油品调和',
            sourceOil: 'MTBE、重整汽油、催化汽油',
            targetOil: '95#',
            sourceTank: 'T-104',
            targetTank: 'T-204',
            qty: 200,
            planTime: '2024-05-01 12:00',
            status: '待审核',
            progress: '50%',
            creator: '孙建操',
            actionText: '开始执行',
            formula: 'MTBEA%、重整对油B14%、精化对油40%'
        },
        {
            key: 'BP005',
            planNo: 'BP005',
            planName: '92#汽油',
            planType: '油品调和',
            sourceOil: 'MTBE、重整汽油、催化汽油',
            targetOil: '92#',
            sourceTank: 'T-105',
            targetTank: 'T-205',
            qty: 100,
            planTime: '2024-05-01 11:00',
            status: '审核中',
            progress: '90%',
            creator: '李莉娜',
            actionText: '更新进度',
            formula: 'MTBEA%、重整对油B18%、精化对油30%'
        },
        {
            key: 'BP006',
            planNo: 'BP006',
            planName: '95#汽油',
            planType: '油品调和',
            sourceOil: 'MTBE、重整汽油、催化汽油',
            targetOil: '95#',
            sourceTank: 'T-106',
            targetTank: 'T-206',
            qty: 150,
            planTime: '2024-05-01 10:00',
            status: '已完成',
            progress: '30%',
            creator: '李钰',
            actionText: '查看详情',
            formula: 'MTBEA%、重整对油B18%、精化对油20%'
        },
    ]);

    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.sourceOil}</div>
                        <div>目标油品：{record.targetOil}</div>
                        <div>来源罐：{record.sourceTank}</div>
                        <div>目标罐：{record.targetTank}</div>
                        <div>调和配方：{record.formula}</div>
                        <div>计划时间：{record.planTime}</div>
                        <div>数量（吨）：{record.qty}</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 MixingProductionPlan;


