import * as React from 'react';
import { useLocation } from 'react-router-dom';
import { observer } from 'mobx-react';
import './style.less';
import {
    Button, Input, Form, Divider, Splitter, Select, InputNumber, InputNumberProps,
    Radio, Switch, Row, Col, Slider, Space, RadioChangeEvent,
    Spin, message, Typography, Tooltip,
    Cascader
} from 'antd';
import { PlusCircleOutlined, MinusCircleOutlined, ArrowLeftOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { apis } from '@/apis';
import router from '@/router';
import LocalStorage from '@/LocalStorage';
import Chat from '@/components/chat';

const { TextArea } = Input;
const FormItem = Form.Item;
const { Option } = Select;
const MAX_COUNT = 5;
const Index = 1;
interface QuestionAnswerInfoProps {
  AuditAppId?: string | number,
  isComponent?: boolean
}
const QuestionAnswerInfo: React.FC<QuestionAnswerInfoProps> = ({AuditAppId,isComponent=false}) => {

    const [form] = Form.useForm();

    // top_p
    const [topPValue, setTopPValue] = React.useState(0.1);

    const TopPDecimalStep: React.FC = () => {

        const onChange: InputNumberProps['onChange'] = (value) => {
            if (Number.isNaN(value)) {
                return;
            }
            setTopPValue(value as number);
        };

        return (
            <Row>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={1}
                        onChange={onChange}
                        // value={typeof topPValue === 'number' ? topPValue : 0}
                        value={topPValue}
                        step={0.1}
                    />
                </Col>
                <Col span={4}>
                    <InputNumber
                        min={0}
                        max={1}
                        className='form-input-number-small'
                        step={0.01}
                        value={topPValue}
                        onChange={onChange}
                    />
                </Col>
            </Row>
        );
    };
    const [tempValue, setTempValue] = React.useState(0.01);
    // temperature
    const TempDecimalStep: React.FC = () => {
        const onChange: InputNumberProps['onChange'] = (value) => {
            if (Number.isNaN(value)) {
                return;
            }
            setTempValue(value as number);
        };

        return (
            <Row>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={1}
                        onChange={onChange}
                        // value={typeof tempValue === 'number' ? tempValue : 0}
                        value={tempValue}
                        step={0.01}
                    />
                </Col>
                <Col span={4}>
                    <InputNumber
                        min={0}
                        max={1}
                        className='form-input-number-small'
                        step={0.01}
                        value={tempValue}
                        onChange={onChange}
                    />
                </Col>
            </Row>
        );
    };

    type ModelList = {
        label: string,
        value: string,
    }[];

    type KnowledgeList = {
        label: string,
        value: string,
    }[];

    type AppTypeList = {
        label: string,
        value: string,
        children: {
            label: string,
            value: string,
        }[],
    }[];

    const [step, setStep] = React.useState(1);
    const [pageLoading, setPageLoading] = React.useState(false);
    const [modelList, setModelList] = React.useState<ModelList>([]);
    const [knowledgeList, setKnowledgeList] = React.useState<KnowledgeList>([]);
    const [isVisible, setIsVisible] = React.useState(false);
    const [isVisibleCus, setIsVisibleCus] = React.useState(false);
    const [isVisibleSlice, setIsVisibleSlice] = React.useState(false);
    const [isVisibleRerank, setIsVisibleRerank] = React.useState(false);
    const [isDeepThinkVisible, setIsDeepThinkVisible] = React.useState(false);
    const [name, setName] = React.useState('');
    const [appTypeList, setAppTypeList] = React.useState<AppTypeList>([]);
    const [appVisibleList, setAppVisibleList] = React.useState<AppTypeList>([]); // 是否公开 
    const [updateFlag, setUpdateFlag] = React.useState<boolean>();
    const [createFlag, setCreateFlag] = React.useState<boolean>();
    const [appProjectList, setAppProjectList] = React.useState<AppTypeList>([]);
    const [isAppPro, setIsAppPro] = React.useState<boolean>(false);
    const [appId, setAppId] = React.useState<string>('');

    const style: React.CSSProperties = {
        display: 'flex',
        flexDirection: 'column',
        gap: 8,
        width: 230,
    };

    const location = useLocation();

    const init = async (id: string) => {
        await Promise.all([
            api.fetchKnowlegde(),
            api.fetchAppType(),
            // api.fetchModelList(),
            api.fetchAppProType(),
            api.fetchAppVisible(id)
        ])
        if (id) {
            await api.fetchDetail(id);
        }
    }

    React.useEffect(() => {
        console.log('isComponent',isComponent)
        const id = location?.state?.id||AuditAppId;
        init(id);
        const uFlag = LocalStorage.getStatusFlag('deepseek:application:update');
        setUpdateFlag(uFlag);
        const cFlag = LocalStorage.getStatusFlag('deepseek:application:create');
        setCreateFlag(cFlag);
    }, []);

    // 定义一个状态来存储输入框数组
    const [inputs, setInputs] = React.useState([{ id: 1, value: '' }]);

    // 添加新输入框的函数
    const addInput = () => {
        const newId = inputs.length + 1; // 生成新的唯一ID
        setInputs([...inputs, { id: newId, value: '' }]);
    };

    // 删除输入框（按id删除+最少数量限制）
    const delInput = (id: number) => {
        if (inputs.length <= 1) {
            message.warning("至少保留1个预设问题");
            return;
        }
        setInputs(inputs.filter(input => input.id !== id));
    };

    // 处理输入变更的函数
    const handleChange = (id: number, value: string) => {
        setInputs(inputs.map(input => (input.id === id ? { ...input, value } : input)));
    };

    const handleAppChange = (typeId: number) => {
        if (typeId === 41) { // 根据实际值进行判断
            setIsAppPro(true);
        } else {
            setIsAppPro(false);
        }
    };


    // const onChange: InputNumberProps['onChange'] = (value) => {
    //     console.log('changed', value);
    // };

    const onChangeShow = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };

    const onChangeModel = (checked: boolean) => {
        setIsVisibleRerank(!isVisibleRerank);
    };

    const onChangeCount = (value: string) => {
        if (value === 'fixed') {
            setIsVisibleSlice(!isVisibleSlice);
        } else {
            setIsVisibleSlice(false);
        }
    };

    // 召回方式
    const onChangeRecallMethod = (e: RadioChangeEvent) => {

    };

    // 获取应用详情
    const api = {
        fetchDetail: async (app_id: string) => {
            setPageLoading(true);
            try {
                const res = await apis.fetchTakaiApplicationDetail(app_id);
                const sd = res.data.questionlist.map((item: any, index: number) => {
                    return {
                        "id": index + 1,
                        "value": item.question,
                    }
                });

                const info = res.data.detail;

                setAppId(info.appId);

                setTopPValue(info.topP as number);
                setTempValue(info.temperature as number);
                setName(info.name);

                interface Item2 {
                    index_type_id: number,
                    knowledge_id: string
                }

                interface Item {
                    show_recall_result: boolean,
                    recall_method: string,
                    rerank_status: boolean,
                    slice_config_type: string,
                    slice_count: number,
                    recall_slice_splicing_method: string,
                    param_desc: string,
                    rerank_model_name: string,
                    rerank_index_type_list: [Item2],
                    recall_index_type_list: [Item2]
                }

                const data_info: Item = JSON.parse(info.knowledgeInfo);

                if (data_info.param_desc === 'custom') {

                    setIsVisibleCus(!isVisibleCus);    //自定义回答风格
                }
                if (data_info.rerank_status === true) {
                    setIsVisibleRerank(!isVisibleRerank) //模型
                }
                //召回切片数量
                if (data_info.slice_config_type === 'fixed') {
                    setIsVisibleSlice(!isVisibleSlice);
                } else {
                    setIsVisibleSlice(false);
                }

                if (info.typeId === 41) {
                    setIsAppPro(true);
                } else {
                    setIsAppPro(false);
                }

                if (info.model === 'Qwen3-30B') {
                    setIsDeepThinkVisible(true);
                } else {
                    setIsDeepThinkVisible(false);
                }

                console.log(info.knowledgeIds, 'info.knowledgeIds')
                form.setFieldsValue({
                    id: info.id,
                    name: info.name,  //应用名称
                    desc: info.desc,  //应用描述
                    prompt: info.prompt, //应用提示语
                    top_p: info.topP as number, //topP
                    temperature: info.temperature as number, //温度
                    knowledge_ids: info.knowledgeIds,
                    model: info.model,
                    isDeepThink: info.isDeepThink,
                    icon_color: info.icon_color,
                    icon_type: info.icon_type,
                    questionList: sd, //问题列表
                    max_token: info.maxToken, //应用最大token
                    updateDate: info.updateDate, // 更新时间
                    appProId: info.appProId,// 项目
                    typeId: info.typeId, //应用类型
                    visible: info.visible||'0', //是否公开
                    param_desc: data_info.param_desc, //回答风格
                    show_recall_result: data_info.show_recall_result, //是否展示召回结果
                    recall_method: data_info.recall_method, //召回方式
                    rerank_status: data_info.rerank_status, //开启rerank
                    rerank_model_name: data_info.rerank_model_name, //模型名称
                    slice_config_type: data_info.slice_config_type, // 召回切片数量
                    slice_count: data_info.slice_count, // 切片数量
                    recall_slice_splicing_method: data_info.recall_slice_splicing_method, // 切片内容
                    // rerank_status = 1 rerank_index_type_list
                    // recall_method = 'embedding' || 'mixed'  recall_index_type_list
                    //recall_index_type_list: info.recall_index_type_list, //知识库id
                    //rerank_index_type_list: info.rerank_index_type_list, //知识库id
                })
                if (sd.length > 0) {
                    setInputs(sd);
                }
            } catch (error) {
                console.error(error);
            } finally {
                setPageLoading(false);
            }
        },

        //获取知识库列表
        fetchKnowlegde: async () => {
            try {
                const res = await apis.fetchTakaiKnowledgeList();
                const list = res.data.map((item: any) => {
                    return {
                        label: item.name,
                        value: item.knowledgeId,
                    }
                });
                console.log(list, 'list')


                setKnowledgeList(list);
            } catch (error: any) {
                console.error(error);
            }
        },

        // 获取应用类型
        fetchAppType: async () => {
            try {
                const res = await apis.fetchTakaiAppTypeList('app_type');
                const list = res.data.map((item: any) => {
                    return {
                        label: item.dictLabel,
                        value: item.dictCode,
                    }
                });
                setAppTypeList(list);
            } catch (error: any) {
                console.error(error);
            }
        },
        // 获取是否公开类型
        fetchAppVisible: async (id:string) => {
            try {
                const res = await apis.fetchTakaiAppTypeList('app_visible');
                console.log('res.data',res.data)
                const list = res.data.map((item: any) => {
                    return {
                        label: item.dictLabel,
                        value: item.dictValue,
                    }
                });
                setAppVisibleList(list);
                if(!id){
                    form.setFieldsValue({
                        visible: list[0].value
                    });
                }
            } catch (error: any) {
                console.error(error);
            }
        },

        // 获取模型列表
        fetchModelList: async () => {
            try {
                const res = await apis.fetchModelList();
                const list = res.data.data.map((item: any) => {
                    return {
                        label: item.modelName,
                        value: item.modelCode,
                    }
                });
                setModelList(list);
            } catch (error: any) {
                console.error(error);
            }
        },

        // 项目级应用下的类型
        fetchAppProType: async () => {
            try {
                const res = await apis.fetchTakaiAppTypeList('projectTree');
                const list: AppTypeList = res.data;
                setAppProjectList(list);
            } catch (error: any) {
                console.error(error);
            }
        },
    }

    const handleRedioClick = (value: string) => {
        setIsVisibleCus(false);
        if (value === 'strict') {
            setTopPValue(0.5);
            setTempValue(0.01);
        } else if (value === 'moderate') {
            setTopPValue(0.7);
            setTempValue(0.50);
        } else if (value === 'flexib') {
            setTopPValue(0.9);
            setTempValue(0.90);
        }
    }

    return (
        <div className='questionAnswerInfo'>
            <Spin spinning={pageLoading}>
                <Form
                    variant={'underlined'}
                    form={form}
                    layout='vertical'
                    initialValues={{
                        isDeepThink: false,
                        max_token: 1024
                    }}
                >
                    <div style={{ display: step === 1 ? 'block' : 'none' }} className='questionAnswerInfo-content'>
                        <FormItem
                            label='问答应用名称'
                            name='name'
                            rules={[{ required: true, message: '问答应用名称不能为空' }]}
                        >
                            <Input placeholder="请输入问答应用名称" disabled={true} className='form-input-large' />
                        </FormItem>
                        <FormItem
                            label='应用类型'
                            name='typeId'
                        >
                            <Select
                                className='questionAnswerInfo-content-title'
                                placeholder='请选择问答应用类型'
                                onChange={handleAppChange}
                                allowClear={true}
                                disabled={true}
                            >
                                {
                                    appTypeList.map((item, index) => {
                                        return <Option value={item.value} key={index}>
                                            {item.label}
                                        </Option>
                                    })
                                }
                            </Select>
                        </FormItem>
                        <FormItem
                            label='是否公开'
                            name='visible'
                        >
                            <Select
                                className='questionAnswerInfo-content-title'
                                placeholder='请选择是否公开'
                                allowClear={true}
                                disabled={true}
                            >
                                {
                                    appVisibleList.map((item, index) => {
                                        return <Option value={item.value} key={index}>
                                            {item.label}
                                        </Option>
                                    })
                                }
                            </Select>
                        </FormItem>
                        {
                            isAppPro &&
                            <>
                                <FormItem
                                    label='项目'
                                    name='appProId'
                                    rules={[{ required: true, message: '项目不能为空' }]}
                                >
                                    <Cascader
                                        disabled={true}
                                        options={appProjectList}
                                        placeholder="请选择项目"
                                        showSearch
                                        className="questionAnswerInfo-content-title"
                                    />
                                </FormItem>
                            </>
                        }

                        <FormItem
                            label='问答应用描述'
                            name='desc'
                            rules={[{ required: true, message: '问答应用描述不能为空' }]}
                        >
                            <TextArea
                                disabled={true}
                                showCount
                                maxLength={500}
                                placeholder="请输入当前应用的描述"
                                className='form-textarea-large'
                            />
                        </FormItem>

                        <div className='preset-questions'>
                            <h4>添加预设问题</h4>
                            <div>
                                {
                                    inputs.map(input => (
                                        <div key={input.id} className='question-item'>
                                            <label>问题 {input.id}</label>
                                            <Input
                                                disabled={true}
                                                className='question-input'
                                                type="text"
                                                value={input.value}
                                                onChange={e => handleChange(input.id, e.target.value)}
                                            />
                                            {/* <div className='question-actions'>
                                                <PlusCircleOutlined className='question-icon' onClick={addInput} />
                                                <MinusCircleOutlined className='question-icon' onClick={() => delInput(input.id)} />
                                            </div> */}
                                        </div>
                                    ))}
                            </div>
                        </div>

                        <div style={{ display: 'flex', gap: '12px', marginTop: '24px', paddingTop: '24px', borderTop: '1px solid #f0f0f0' }}>
                            <Button
                                type='primary'
                                disabled={false}
                                onClick={() => {
                                    form.validateFields(['name', 'desc', 'appProId']).then(async (values) => {
                                        setStep(2);
                                        setInputs(inputs);
                                    }).catch((error) => {
                                        console.error(error);
                                    });
                                }}
                            >
                                下一步
                            </Button>
                        </div>
                    </div>

                    <div style={{ display: step === 2 ? 'block' : 'none' }} className='questionAnswerInfo-content'>
                        <div className='flex-between padding-bottom-16'>
                            <div>
                                <Button
                                    className='btn-back'
                                    disabled={false}
                                    icon={<ArrowLeftOutlined />}
                                    onClick={() => {
                                        setStep(1);
                                    }}
                                >
                                    上一步
                                </Button>
                            </div>
                        </div>
                        <div className='section-title'>
                            Prompt编写与参数配置
                            <Tooltip
                                title="Prompt用于对大模型的回复做出一些列指令和约束。这段Prompt不会被用户看到。"
                                placement="right"
                                overlayStyle={{ fontSize: '12px' }}
                            >
                                <InfoCircleOutlined style={{ marginLeft: '8px', color: '#999', fontSize: '14px' }} />
                            </Tooltip>
                        </div>
                        <Splitter style={{ border: '1px solid #f0f0f0', borderRadius: '6px', height: 550 }}>
                            <Splitter.Panel defaultSize="45%">
                                <div className='prompt'>
                                    <div className='prompt-info'>
                                        <div className='prompt-info-text'>
                                            <Typography.Paragraph style={{ fontSize: '12px', lineHeight: '1.6', color: '#999', margin: 0 }}>
                                                编写Prompt过程中可以引入2项变量：
                                                <span className='variable-highlight'>{'{{知识}}'}</span>
                                                代表知识库中检索到的知识内容，
                                                <span className='variable-highlight'>{'{{用户}}'}</span>
                                                代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。
                                                <br />
                                                插入：
                                                <span className='variable-highlight'>{'{{知识}}'}</span>，
                                                插入：
                                                <span className='variable-highlight'>{'{{用户}}'}</span>。
                                            </Typography.Paragraph>
                                        </div>
                                    </div>
                                    <Divider style={{ margin: '0' }} />
                                    <div className='prompt-editor-area'>
                                        <FormItem name='prompt'
                                            initialValue={
                                                `你是一位知识检索助手，你必须并且只能从我发送的众多知识片段中寻找能够解决用户输入问题的最优答案，并且在执行任务的过程中严格执行规定的要求。 \n
知识片段如下:
{{知识}}

规定要求：
- 找到答案就仅使用知识片段中的原文回答用户的提问；- 找不到答案就用自身知识并且告诉用户该信息不是来自文档；
- 所引用的文本片段中所包含的示意图占位符必须进行返回，占位符格式参考：【示意图序号_编号】
- 严禁输出任何知识片段中不存在的示意图占位符；
- 输出的内容必须删除其中包含的任何图注、序号等信息。例如：“进入登录页面（图1.1）”需要从文字中删除图序，回复效果为：“进入登录页面”；“如图所示1.1”，回复效果为：“如图所示”；

格式规范:
- 文档中会出现包含表格的情况，表格是以图片标识符的形式呈现，表格中缺失数据时候返回空单元格；
- 如果需要用到表格中的数据，以代码块语法输出表格中的数据；
- 避免使用代码块语法回复信息；
- 回复的开头语不要输出诸如：“我想”，“我认为”，“think”等相关语义的文本。

严格执行规定要求，不要复述问题，直接开始回答。

用户输入问题:
{{用户}}`
                                            }
                                            rules={[{ required: true, message: '提示词不能为空' }]}>
                                            <TextArea
                                                disabled={true}
                                                placeholder="提示词"
                                                rows={50}
                                            />
                                        </FormItem>
                                    </div>
                                </div>
                            </Splitter.Panel>
                            <Splitter.Panel defaultSize="25%">
                                <div className='flex-center-container'>
                                    <div className='half-width'>
                                        <div className='flex-center-top'>
                                            欢迎使用 {name}
                                        </div>
                                        <div className='flex-center padding-top-20'>
                                            <FormItem
                                                label='引用知识库'
                                                name='knowledge_ids'
                                                rules={[{ required: true, message: '知识库不能为空' }]}>
                                                <Select
                                                    disabled={true}
                                                    mode='multiple'
                                                    maxCount={MAX_COUNT}
                                                    showSearch={true}
                                                    // suffixIcon={suffix}
                                                    // className='questionAnswerInfo-content-title'
                                                    placeholder='请选择知识库'
                                                >
                                                    {
                                                        knowledgeList.map((item, index) => {
                                                            return <Option value={item.value} key={index}>
                                                                {item.label}
                                                            </Option>
                                                        })
                                                    }
                                                </Select>
                                            </FormItem>
                                        </div>
                                        <div className='flex-center'>
                                            <FormItem
                                                label='调用模型'
                                                name="model"
                                                rules={[{ required: true, message: '模型不能为空' }]}>
                                                <Select
                                                    disabled={true}
                                                    placeholder='请选择模型'
                                                    allowClear={true}
                                                    className='questionAnswerInfo-content-title'
                                                    onChange={(value) => {
                                                        if (value === 'Qwen3-30B') {
                                                            setIsDeepThinkVisible(true);
                                                        } else {
                                                            setIsDeepThinkVisible(false);
                                                        }
                                                    }}
                                                >
                                                    <Option value='Qwen3-30B'>Qwen3-30B</Option>
                                                    <Option value='Qwen2-72B'>Qwen2-72B</Option>
                                                </Select>

                                            </FormItem>
                                        </div>
                                        <div className='flex-center' style={{
                                            display: isDeepThinkVisible ? 'flex' : 'none'
                                        }}>
                                            <FormItem
                                                label='深度思考'
                                                name='isDeepThink'
                                                rules={[{ required: true, message: '请选择是否深度思考' }]}>
                                                <Radio.Group buttonStyle="solid" className='form-control-width' disabled={true}>
                                                    <Radio.Button value='Y'>是</Radio.Button>
                                                    <Radio.Button value='N'>否</Radio.Button>
                                                </Radio.Group>
                                            </FormItem>
                                        </div>
                                        <div className='flex-center'>
                                            <FormItem
                                                label='max token'
                                                name='max_token'
                                                rules={[{ required: true, message: 'max token不能为空' }]}>
                                                <InputNumber disabled={true}
                                                    className='questionAnswerInfo-content-title'
                                                />
                                            </FormItem>
                                        </div>

                                        {
                                            !isVisible &&
                                            <div className='flex-center'>
                                                <a onClick={() => {
                                                    setIsVisible(!isVisible);
                                                }} className='link-more-settings'>
                                                    更多设置
                                                </a>
                                            </div>

                                        }

                                        {/* {isVisible && */}
                                        <div style={{ display: isVisible ? 'block' : 'none', paddingTop: '20px' }}>
                                            {isVisibleCus &&
                                                <Space style={{ width: '100%' }} direction="vertical">
                                                    <div className='flex-center'>
                                                        <FormItem
                                                            label='Top-p'
                                                            name='topP'
                                                            className='form-control-width'
                                                        >
                                                            <TopPDecimalStep />
                                                        </FormItem>
                                                    </div>
                                                    <div className='flex-center'>
                                                        <FormItem
                                                            label='Temperature'
                                                            name='temperature'
                                                            className='form-control-width'
                                                        >
                                                            <TempDecimalStep />
                                                        </FormItem>
                                                    </div>
                                                </Space>
                                            }

                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <FormItem
                                                    label='回答风格'
                                                    name='param_desc'
                                                    rules={[{ required: true, message: '回答风格不能为空' }]}>
                                                    <Radio.Group buttonStyle="solid" disabled={true}
                                                        className='form-control-width'>
                                                        <Radio.Button onClick={() => {
                                                            handleRedioClick('strict')
                                                        }} value='strict'>严谨</Radio.Button>
                                                        <Radio.Button onClick={() => {
                                                            handleRedioClick('moderate')
                                                        }} value='moderate'>适中</Radio.Button>
                                                        <Radio.Button onClick={() => {
                                                            handleRedioClick('flexib')
                                                        }} value='flexib'>发散</Radio.Button>
                                                        <Radio.Button value='custom'
                                                            onClick={() => {
                                                                setIsVisibleCus(!isVisibleCus);
                                                                setTopPValue(0.1);
                                                                setTempValue(0.01);
                                                            }}
                                                        >自定义
                                                        </Radio.Button>
                                                    </Radio.Group>
                                                </FormItem>
                                            </div>
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <FormItem
                                                    label='展示引用知识'
                                                    name='show_recall_result'
                                                    className='form-control-width'>
                                                    <Switch onChange={onChangeShow} disabled={true} />
                                                </FormItem>
                                            </div>
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <FormItem
                                                    label='召回方式'
                                                    name='recall_method'
                                                    rules={[{ required: true, message: '召回方式不能为空' }]}>

                                                    <Radio.Group
                                                        style={style}
                                                        onChange={onChangeRecallMethod}
                                                        disabled={true}
                                                        options={[
                                                            { value: 'embedding', label: '向量化检索' },
                                                            { value: 'keyword', label: '关键词检索' },
                                                            { value: 'mixed', label: '混合检索' },
                                                        ]}
                                                    />
                                                </FormItem>
                                            </div>
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <div className='section-title'>重排方式</div>
                                            </div>
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <FormItem
                                                    label='Rerank模型'
                                                    name='rerank_status'
                                                    valuePropName='checked'
                                                    className='form-control-width'
                                                >
                                                    <Switch onChange={onChangeModel} disabled={true} />
                                                </FormItem>
                                            </div>
                                            {isVisibleRerank &&
                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'center',
                                                    alignItems: 'center'
                                                }}>
                                                    <FormItem
                                                        label='模型选择'
                                                        name='rerank_model_name'
                                                    >
                                                        <Select
                                                            disabled={true}
                                                            className='questionAnswerInfo-content-title'
                                                            placeholder='请选择模型'
                                                        // defaultValue={'rerank'}
                                                        >
                                                            <Option value='rerank'>默认rerank模型</Option>
                                                        </Select>
                                                    </FormItem>
                                                </div>
                                            }
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <FormItem
                                                    label='召回切片数量'
                                                    name='slice_config_type'
                                                    rules={[{ required: true, message: '召回方式不能为空' }]}>
                                                    <Select
                                                        disabled={true}
                                                        className='questionAnswerInfo-content-title'
                                                        placeholder='请选择'
                                                        onChange={onChangeCount}>
                                                        <Option value="fixed">手动设置</Option>
                                                        <Option value="customized">自动设置</Option>
                                                    </Select>
                                                </FormItem>
                                            </div>

                                            {isVisibleSlice &&
                                                <div style={{
                                                    display: 'flex',
                                                    justifyContent: 'center',
                                                    alignItems: 'center'
                                                }}>
                                                    <FormItem
                                                        label='召回切片数'
                                                        name='slice_count'
                                                        rules={[{ required: true, message: '切片数不能为空' }]}>
                                                        <InputNumber max={1024} changeOnWheel disabled={true}
                                                            className='questionAnswerInfo-content-title' />
                                                    </FormItem>
                                                </div>
                                            }
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <FormItem
                                                    label='召回切片拼接方式'
                                                    name='recall_slice_splicing_method'
                                                >
                                                    <TextArea
                                                        disabled={true}
                                                        rows={4}
                                                        className='form-textarea-large'
                                                        placeholder="请输入内容"
                                                    />
                                                </FormItem>
                                            </div>
                                        </div>
                                        {/* } */}
                                    </div>
                                </div>
                            </Splitter.Panel>
                            <Splitter.Panel defaultSize="30%">
                                <Chat appId={appId} />
                            </Splitter.Panel>
                        </Splitter>
                    </div>
                </Form>
            </Spin>
        </div >
    );
};

export default observer(QuestionAnswerInfo);
