import * as React from 'react';
import { observer } from 'mobx-react';
import { useParams } from 'react-router-dom';
import { Form, Input, Button, message } from 'antd';
import { apis } from '@/apis';
import router from '@/router';
import { ArrowLeftOutlined } from '@ant-design/icons';

const { TextArea } = Input;

const FormItem = Form.Item;

interface TakaiSliceDetailRequest {
    knowledgeId: string,
    sliceId: string,
    sliceText: string,
}
const SliceDetail: React.FC = () => {

    const [form] = Form.useForm();

    const params = useParams();

    const [listLoading, setListLoading] = React.useState(false);

    const appApi = {
        fetchList: async () => {
            setListLoading(true);
            try {
                if (!params.sliceId || !params.knowledgeId) {
                    throw new Error('参数错误');
                }
                const res = await apis.fetchTakaiSliceDetail(params.sliceId, params.knowledgeId);
                const info = res.data.data;
                form.setFieldsValue({
                    slice_id: info.slice_id,
                    slice_text: info.slice_text,
                    document_id: info.document_id,
                })
                console.log(res, 'info');
            } catch (error) {
                console.error(error);
            } finally {
                setListLoading(false);
            }
        }
    };

    const init = async () => {
        if (params.sliceId) {
            await appApi.fetchList();
        }
    }

    React.useEffect(() => {
        init();
    }, [])

    return (
        <div>
            <div className='questionAnswerList'>
                <div style={{ overflow: 'hidden' }}>
                    <Form
                        style={{ paddingTop: '20px', height: '100%' }}
                        form={form}
                        layout='vertical'
                    >
                        <FormItem
                            name="slice_text"
                            rules={[{ required: true, message: '切片内容不能为空' }]}>
                            <TextArea
                                style={{
                                    width: '50%',
                                    height: '200px',
                                    overflow: 'auto',
                                    resize: 'both',
                                    boxSizing: 'border-box',

                                }}
                                placeholder=""
                                autoSize={{ minRows: 20, maxRows: 5000 }}
                            />
                        </FormItem>
                        <Button type='primary' icon={<ArrowLeftOutlined />} onClick={() => {
                            router.navigate(-1);
                        }}>返回</Button>
                        <Button
                            style={{ marginLeft: '10px' }}
                            type='primary'
                            onClick={() => {
                                form.validateFields().then(async (values) => {
                                    // 验证参数是否存在
                                    if (!params.knowledgeId || !params.sliceId) {
                                        message.error('知识库ID或切片ID无效');
                                        return;
                                    }
                                    const data = values;
                                    const info = {
                                        knowledgeId: params.knowledgeId,
                                        sliceId: params.sliceId === null ? '' : params.sliceId,
                                        sliceText: values.slice_text,
                                        documentId: params.documentId,
                                    };
                                    console.log(params.sliceId, 'params.sliceId');
                                    let res = null;
                                    if (params.sliceId && params.sliceId !== 'null') {
                                        console.log('11111111');
                                        // 编辑应用
                                        res = await apis.modifyTakaiSliceInfo(info);
                                    } else {
                                        console.log('2222222');
                                        res = await apis.addTakaiSlice(info);
                                    }
                                    if (res.code === 200 && res.data === 1) {
                                        if(params.sliceId && params.sliceId !== 'null'){
                                            message.success('修改成功');
                                        }else{
                                            message.success('新增成功');
                                        }
                                    }else{
                                        if(params.sliceId && params.sliceId !== 'null'){
                                            message.error('修改失败');
                                        }else{
                                            message.error('新增失败');
                                        }
                                    }
                                    const pageInfo = {
                                        knowledge_id: params.knowledgeId,
                                        document_id: params.documentId,
                                        text: '',
                                        pageNum: 1,
                                        pageSize: 10,
                                    }
                                    // 刷新列表
                                    await router.navigate({ pathname: '/deepseek/knowledgeLib/slice/' + params.documentId + '/' + params.knowledgeId + '/' + params.embeddingId });

                                }).catch((error) => {
                                    console.error(error);
                                });
                            }}
                        >保存</Button>
                    </Form>
                </div>
            </div>
        </div>
    )
};

export default observer(SliceDetail);