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

const PhysChem = () => {
    const [form, setForm] = useState({
        densityP15: '0.735',
        octane: '92',
        flashPoint: '-38',
        initBoilingPoint: '35',
        ninetyBoilingPoint: '180',
        aromaticContent: '8',
        kinematicViscosity: '2.5',
        rvp: '60',
        tenBoilingPoint: '55',
    });

    const [filters, setFilters] = useState({
        listCategory: undefined,
        listStatus: undefined,
    });

    const onSave = () => {
        message.success('已保存理化性质');
    };

    const onCancel = () => {
        message.info('已取消更改');
    };

    const onQuery = () => {
        message.success('已按条件查询列表');
    };

    const onReset = () => {
        setFilters({ listCategory: undefined, listStatus: undefined });
        message.info('筛选已重置');
    };

    const columns = useMemo(() => {
        return [
            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
            {
                title: '状态',
                dataIndex: 'enabled',
                key: 'enabled',
                width: 90,
                render: (val, record) => (
                    <Switch
                        size="small"
                        checked={val}
                        onChange={(checked) => {
                            record.enabled = checked;
                            message.success(`已${checked ? '启用' : '停用'}`);
                        }}
                    />
                ),
            },
            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 180,
                render: (_, record) => (
                    <Space size={12}>
                        <Button type="link" size="small">查看详情</Button>
                        <Button type="link" size="small">修改</Button>
                        <Button type="link" size="small" danger>删除</Button>
                    </Space>
                ),
            },
        ];
    }, []);

    const tableData = [
        {
            key: '1',
            name: '92#汽油P001',
            category: '汽油',
            density: '0.852 kg/L',
            flashPoint: '-43',
            viscosity: '0.55',
            sulfur: '10',
            enabled: true,
            updatedAt: '2025-10-25 22:30:16',
        },
        {
            key: '2',
            name: '95#汽油P001',
            category: '汽油',
            density: '0.725 kg/L',
            flashPoint: '-43',
            viscosity: '0.55',
            sulfur: '10',
            enabled: false,
            updatedAt: '2025-10-25 10:28:14',
        },
        {
            key: '3',
            name: '0#柴油油P003',
            category: '柴油',
            density: '0.832 kg/L',
            flashPoint: '65',
            viscosity: '3.0',
            sulfur: '10',
            enabled: true,
            updatedAt: '2025-10-23 20:58:24',
        },
        {
            key: '4',
            name: '航空煤油P004',
            category: '航空煤油',
            density: '0.852 kg/L',
            flashPoint: '48',
            viscosity: '1.25',
            sulfur: '8',
            enabled: false,
            updatedAt: '2025-10-23 04:59:13',
        },
        {
            key: '5',
            name: '测流油P005',
            category: '测流油',
            density: '0.876 kg/L',
            flashPoint: '32',
            viscosity: '2.00',
            sulfur: '300',
            enabled: false,
            updatedAt: '2025-10-22 03:03:13',
        },
    ];

    return (
        <div className={styles.container}>
            <Card className={styles.section}>
                <div className={styles.blockTitle}>理化性质</div>
                <div className={styles.panel}>
                    <div className={styles.formGrid}>
                        <div className={styles.formItem}>
                            <div className={styles.label}>标准密度(p15)<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.densityP15}
                                onChange={(e) => setForm({ ...form, densityP15: e.target.value })}
                                addonAfter="kg/L"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>辛烷值<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.octane}
                                onChange={(e) => setForm({ ...form, octane: e.target.value })}
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>闪点<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.flashPoint}
                                onChange={(e) => setForm({ ...form, flashPoint: e.target.value })}
                                addonAfter="℃"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>初馏点<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.initBoilingPoint}
                                onChange={(e) => setForm({ ...form, initBoilingPoint: e.target.value })}
                                addonAfter="℃"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>90%馏出温度<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.ninetyBoilingPoint}
                                onChange={(e) => setForm({ ...form, ninetyBoilingPoint: e.target.value })}
                                addonAfter="℃"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>芳烃含量<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.aromaticContent}
                                onChange={(e) => setForm({ ...form, aromaticContent: e.target.value })}
                                addonAfter="ppm"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>运动粘度:</div>
                            <Input
                                value={form.kinematicViscosity}
                                onChange={(e) => setForm({ ...form, kinematicViscosity: e.target.value })}
                                addonAfter="cSt"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>蒸汽压(RVP):</div>
                            <Input
                                value={form.rvp}
                                onChange={(e) => setForm({ ...form, rvp: e.target.value })}
                                addonAfter="kPa"
                                placeholder=""
                            />
                        </div>
                        <div className={styles.formItem}>
                            <div className={styles.label}>10%馏出温度<span className={styles.required}>*</span>:</div>
                            <Input
                                value={form.tenBoilingPoint}
                                onChange={(e) => setForm({ ...form, tenBoilingPoint: e.target.value })}
                                addonAfter="℃"
                                placeholder=""
                            />
                        </div>
                    </div>
                    <div className={styles.actionsRight}>
                        <Space>
                            <Button type="primary" onClick={onSave}>保存</Button>
                            <Button onClick={onCancel}>取消</Button>
                        </Space>
                    </div>
                </div>
            </Card>

            <Card className={styles.section}>
                <div className={styles.listHeader}>
                    <div className={styles.blockTitle}>油品列表</div>
                    <Space>
                        <Button type="primary" icon={<PlusOutlined />}>新增油品</Button>
                        <Button icon={<ExportOutlined />}>批量导出</Button>
                    </Space>
                </div>
                <div className={styles.filterRow}>
                    <div className={styles.filterItem}>
                        <div className={styles.filterLabel}>油品分类:</div>
                        <Select
                            value={filters.listCategory}
                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
                            placeholder="全部"
                            style={{ width: 140 }}
                            options={[
                                { label: '全部', value: undefined },
                                { label: '汽油', value: '汽油' },
                                { label: '柴油', value: '柴油' },
                            ]}
                            allowClear
                        />
                    </div>
                    <div className={styles.filterItem}>
                        <div className={styles.filterLabel}>油品状态:</div>
                        <Select
                            value={filters.listStatus}
                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
                            placeholder="全部"
                            style={{ width: 140 }}
                            options={[
                                { label: '全部', value: undefined },
                                { label: '启用', value: '启用' },
                                { label: '停用', value: '停用' },
                            ]}
                            allowClear
                        />
                    </div>
                    <Space>
                        <Button type="primary" icon={<SearchOutlined />} onClick={onQuery}>查询</Button>
                        <Button icon={<ReloadOutlined />} onClick={onReset}>重置</Button>
                    </Space>
                </div>
                <StandardTable
                    rowKey="key"
                    columns={columns}
                    data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
                    // use default small size from StandardTable
                />
            </Card>
        </div>
    );
};

export default PhysChem;


