import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Drawer, Row, Col, Input, Button, List, Typography, Select, Spin, Image, message, Table, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { fetchReviseHistoryList } from '@/apis';
import { observer } from 'mobx-react';
import {InfoCircleOutlined} from "@ant-design/icons";

interface RevisionHistoryProps {
    historyDrawerOpen: boolean;
    onClose: () => void;
    onEdit?: (record: any) => void;
    // title: string;
    record: any;
}

const RevisionHistory: React.FC<RevisionHistoryProps> = (props) => {
    const { historyDrawerOpen, onClose, onEdit, record } = props;
    const [kbName, setKbName] = useState<string>('');
    const [docName, setDocName] = useState<string>('');
    const [refDocName, setRefDocName] = useState<string>('');
    const [loading, setLoading] = useState<boolean>(false);
    const [data, setData] = useState<any[]>([]);
    // const [pageNum, setPage] = useState<number>(1);
    const pageNum = useRef<number>(1);
    const [pageSize, setSize] = useState<number>(10);
    const [total, setTotal] = useState<number>(0);
// 1. 创建一个查询触发器
    const [searchTrigger, setSearchTrigger] = useState(0);
    const onFetchReviseHistoryList = async () => {
        setLoading(true);
        try {
            const params = {
                pageNum: pageNum.current,
                pageSize: pageSize,
                knowledgeId: record.knowledgeId,
                knowledgeName: kbName,
                documentName: docName,
                refDocumentName: refDocName,
            };
            const response: any = await fetchReviseHistoryList(params);
            if (response && response.rows) {
                setData(response.rows);
                setTotal(response.total || 0);
            } else {
                message.error('获取修订历史失败');
            }
        } catch (error) {
            message.error('获取修订历史异常');
        } finally {
            setLoading(false);
        }
    }
    useEffect(() => {
        // 避免组件首次挂载时就执行查询
        if (searchTrigger > 0) {
            onFetchReviseHistoryList();
        }
    }, [searchTrigger, kbName, docName, refDocName]);

    useEffect(() => {
        if (historyDrawerOpen) {
            onFetchReviseHistoryList();
        }
    }, [historyDrawerOpen]);

    const handleSearch = () => {
        pageNum.current = 1;
        setSearchTrigger(prev => prev + 1);
    }
    const onSet = () => {
        setKbName('');
        setDocName('');
        setRefDocName('');
        pageNum.current = 1;
        setSearchTrigger(prev => prev + 1);
    }
    // 表格列定义
const columns: ColumnsType<any> = [
    {
        title: (
            <span>
                受影响文档名称
                <Tooltip
                    title={
                        // 说明文本：支持换行、自定义样式，可根据需求修改
                        <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>
                            <b>知识库中的知识文档名称</b>
                        </div>
                    }
                    placement="right" // 提示框显示在图标右侧
                >
                  <InfoCircleOutlined
                      style={{
                          marginLeft: 6, // 与标题的间距
                          color: '#1890ff', // Ant Design 主色，适配风格
                          fontSize: 14 // 图标大小适配标题
                      }}
                  />
                </Tooltip>
              </span>
        ),
        dataIndex: 'documentName', width: 160, ellipsis: {
            showTitle: false,
        },
        render: (text) => (
            <Tooltip placement="topLeft" title={(
                <div style={{ maxWidth: 480, maxHeight: 320, overflow: 'auto', whiteSpace: 'normal' }}>
                    {text}
                </div>
            )}>
                {text}
            </Tooltip>
        ),
    },
    {
        title: (
            <span>
                所在知识库
                <Tooltip
                    title={
                        // 说明文本：支持换行、自定义样式，可根据需求修改
                        <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>
                            <b>知识文档所在知识库名称</b>
                        </div>
                    }
                    placement="right" // 提示框显示在图标右侧
                    // arrowPointAtCenter // 箭头指向图标中心，更美观
                >
                  <InfoCircleOutlined
                      style={{
                          marginLeft: 6, // 与标题的间距
                          color: '#1890ff', // Ant Design 主色，适配风格
                          fontSize: 14 // 图标大小适配标题
                      }}
                  />
                </Tooltip>
              </span>
        )
        , dataIndex: 'knowledgeName', width: 180, ellipsis: {
            showTitle: false,
        },
        render: (text) => (
            <Tooltip placement="topLeft" title={(
                <div style={{ maxWidth: 480, maxHeight: 320, overflow: 'auto', whiteSpace: 'normal' }}>
                    {text}
                </div>
            )}>
                {text}
            </Tooltip>
        ),
    },
    {
        title: (
            <span>
                受影响规范条文原文
                <Tooltip
                    title={
                        // 说明文本：支持换行、自定义样式，可根据需求修改
                        <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>
                            <b>切片原文</b>
                        </div>
                    }
                    placement="right" // 提示框显示在图标右侧
                >
                  <InfoCircleOutlined
                      style={{
                          marginLeft: 6, // 与标题的间距
                          color: '#1890ff', // Ant Design 主色，适配风格
                          fontSize: 14 // 图标大小适配标题
                      }}
                  />
                </Tooltip>
              </span>
        )
        , dataIndex: 'sliceText', width: 180,
        ellipsis: {
            showTitle: false,
        },
        render: (text) => (
            <Tooltip placement="topLeft" title={(
                <div style={{ maxWidth: 480, maxHeight: 320, overflow: 'auto', whiteSpace: 'normal' }}>
                    {text}
                </div>
            )}>
                {text}
            </Tooltip>
        ),
    },
    {
        title: (
            <span>
                新标准规范文档
                <Tooltip
                    title={
                        // 说明文本：支持换行、自定义样式，可根据需求修改
                        <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>
                            <b>引用的新标准规范文档名称</b>
                        </div>
                    }
                    placement="right" // 提示框显示在图标右侧
                    // arrowPointAtCenter // 箭头指向图标中心，更美观
                >
                  <InfoCircleOutlined
                      style={{
                          marginLeft: 6, // 与标题的间距
                          color: '#1890ff', // Ant Design 主色，适配风格
                          fontSize: 14 // 图标大小适配标题
                      }}
                  />
                </Tooltip>
              </span>
        )
        , dataIndex: 'refDocumentName', width: 180, ellipsis: {
            showTitle: false,
        },
        render: (text) => (
            <Tooltip placement="topLeft" title={(
                <div style={{ maxWidth: 480, maxHeight: 320, overflow: 'auto', whiteSpace: 'normal' }}>
                    {text}
                </div>
            )}>
                {text}
            </Tooltip>
        ),
    },
    {
        title: (
            <span>
                修订后的受影响规范条文
                <Tooltip
                    title={
                        // 说明文本：支持换行、自定义样式，可根据需求修改
                        <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>
                            <b>根据新标准规范文档修订后的切片内容</b>
                        </div>
                    }
                    placement="right" // 提示框显示在图标右侧
                    // arrowPointAtCenter // 箭头指向图标中心，更美观
                >
                  <InfoCircleOutlined
                      style={{
                          marginLeft: 6, // 与标题的间距
                          color: '#1890ff', // Ant Design 主色，适配风格
                          fontSize: 14 // 图标大小适配标题
                      }}
                  />
                </Tooltip>
              </span>
        )
        , dataIndex: 'revisionSliceText', width: 230,
        ellipsis: {
            showTitle: false,
        },
        render: (text,record) => (
            <Tooltip placement="topLeft" title={(
                <div style={{ maxWidth: 480, maxHeight: 320, overflow: 'auto', whiteSpace: 'normal' }}>
                    {text}
                </div>
            )}>
                {text}
            </Tooltip>
        ),
    },

    {
        title: '修订时间', dataIndex: 'createTime', width: 120, align: 'center'
    },
    {
        title: '修订状态', dataIndex: 'revisionStatus', width: 120, align: 'center', render: (text: any, record: any) => (
            <p>{text === '1' ? '已修订' : '废弃'}</p>
        )
    },
    {
        title: '操作', dataIndex: 'revisionStatus', width: 120, align: 'center', render: (text: any, record: any) => (
            <p 
                className='text-primary cursor-pointer'
                onClick={() => {
                    onEdit?.(record);
                }}
            >
                重新修订
            </p>
        )
    }
];
    return (
        <Drawer
            title="修订记录"
            placement="left"
            width={'60%'}
            onClose={() => { onClose() }}
            open={historyDrawerOpen}
        >
            <div style={{ marginBottom: 12 }}>
                <Row gutter={12} align="middle">
                    <Col span={6}>
                        <Input placeholder="知识库名称" value={kbName} onChange={(e) =>{
                            setKbName(e.target.value)
                            setSearchTrigger(0)
                        }} />
                    </Col>
                    <Col span={6}>
                        <Input placeholder="受影响文档名称" value={docName} onChange={(e) => {
                            setDocName(e.target.value)
                            setSearchTrigger(0)
                        }} />
                    </Col>
                    <Col span={6}>
                        <Input placeholder="新标准规范文档名称" value={refDocName} onChange={(e) => {
                            setRefDocName(e.target.value)
                            setSearchTrigger(0)
                        }} />
                    </Col>
                    <Col>
                        <Button className='mr-2' onClick={onSet}>重置</Button>
                        <Button type="primary" onClick={handleSearch}>搜索</Button>
                    </Col>
                </Row>
            </div>
            <div>
                <Table
                    columns={columns}
                    dataSource={data}
                    loading={loading}
                    rowKey="createTime"
                    pagination={{
                        current: pageNum.current,
                        pageSize: pageSize,
                        total: total,
                        onChange: (p, ps) => {
                            console.log('onChange', p, ps);
                            pageNum.current = p;
                            setSize(ps || pageSize);
                            onFetchReviseHistoryList();
                        }
                    }}
                />
            </div>
        </Drawer>)
}


export default observer(RevisionHistory);
