'use client';

// import { Avatar, Icon } from '@lobehub/ui';
import { Card, Button, List, Image, Flex, Tabs, Table, Space, Upload, Input, Select, App, Popconfirm } from "antd";
import { CloudUploadOutlined} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import { memo, useState } from 'react';
// import { useTranslation } from 'react-i18next';
// import { Flexbox } from 'react-layout-kit';
import KnowledgeCreateForm from './KnowledgeCreateForm'; //新增表单
import KnowledgeUpdateForm from './KnowledgeUpdateForm'; //编辑表单
// import request from '@/app/api/request';
import { useKnowledgeBaseStore } from '@/store/knowledgeBase';

const { Search } = Input;
const { Dragger } = Upload;

const useStyles = createStyles(({ css }) => ({
  buttonDelete: css`
    background: url(/images/delete.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonEdit: css`
    background: url(/images/edit.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonManage: css`
    background: url(/images/manage.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonStyle: css`
    font-size: 16px;
    color: #2E62FF;
    border-color: #678DFF;
    padding: 20px 30px !important;
    margin-right: 24px;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    background-color: #fff;
    &:hover {
      border-color: #678DFF !important;
      color: #2E62FF !important;
      background-color: #fff !important;
    }
  `,
  buttonStyleActive: css`
    font-size: 16px;
    color: #fff;
    padding: 20px 30px !important;
    margin-right: 24px;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    border-color: #0044FF;
    background-color: #0044FF;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  cardStyle: css`
    box-shadow: 1px 0px 12px 0px rgba(42, 77, 255, 0.19);
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    width: 100%;
    margin: 0 50px;
  `,
  checkButtonStyle: css`
    font-size: 16px;
    color: #fff;
    padding: 15px 30px !important;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    border-color: #0044FF;
    background-color: #0044FF;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  checkItem: css`
    margin-top: 15px;
  `,
  checkTitle: css`
    color: #0044FF;
    margin-right: 5px;
  `,
  dec: css`
    color: #666666;
  `,
  documentCard: css`
    width: 100%;
    padding: 30px 30px;
    border-radius: 16px;
    opacity: 1;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #E5E5E5;
    cursor: pointer;
  `,
  documentCardActive: css`
    width: 100%;
    padding: 30px 30px;
    border-radius: 16px;
    opacity: 1;
    background: rgba(0, 68, 255, 0.05);
    box-sizing: border-box;
    border: 1px solid #0044FF;
    cursor: pointer;
  `,
  formStyle: css`
     .ant-form-item-label {
       width: 100px !important;
     }
  `,
  iconImg: css`
    width: 48px;
    height: 48px;
  `,
  importButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border: none;
    padding: 18px 30px !important;
    box-sizing: border-box;
    background-color: rgba(0, 68, 255, 0.102);
    margin-left: 50px;
    &:hover {
      color: #0044FF !important;
      background-color: rgba(0, 68, 255, 0.102) !important;
    }
  `,
  importFileCard: css`
    .ant-card-body {
      height: 100%
    }
  `,
  listStyle: css`
    border: none !important;
  `,
  modalStyle: css`
    .ant-modal-body {
      padding: 20px 0;
    }
    .ant-modal-footer {
      .ant-btn:nth-child(1) {
        width: 73px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;
        background: #EBF4FF;
        box-sizing: border-box;
        border: 1px solid #B8D8FF;
        color: #177FFF;
      }
      .ant-btn:nth-child(2) {
        width: 73px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;

        background: #80B9FF;
      }
    }
  `,
  previewContainer: css`
    width: 100%;
    height: 100%;
    background: #F7F7F7;
    text-align: center;
    padding: 30% 0;
  `,
  searchStyle: css`
    .ant-input-affix-wrapper {
      border: none;
      background-color: #F3F6FF;
    }
    .ant-input-search-button {
      border: none;
      background-color: #F3F6FF;
      &:hover {
        background-color: #F3F6FF !important;
      }
      .ant-btn-icon {
        color: #0044FF !important;
      }
    }
  `,
  selectStyle: css`
    .ant-select-selector {
      border: none !important;
      background-color: #F0F3FD !important;
    }
    .ant-select-selection-item {
      color: #4A73FF
    }
    .ant-select-arrow {
      color: #2959FF
    }
    margin-bottom: 15px;
  `,
  tabStyle: css`
    .ant-tabs-tab {
      margin-right: 40px !important;
    }
    .ant-tabs-tab-btn {
      color: #648EFF
    }
    .ant-tabs-tab.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: #0044FF
      }
    }
    .ant-pagination {
      .ant-pagination-item-active {
        border-color: #0056FF !important
        a {
            color: #0056FF !important
        }
      }
    }
  `,
  tableHead: css`
    .ant-table-thead {
      .ant-table-cell {
        background-color: #F1F8FF !important
      }
    }
  `,
  testContent: css`
    width: 100%;
    height: 500px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
  `,
  title: css`
    font-size: 18px;
    font-weight: 700;
  `,
  viewButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border-color: #BECFFF;
    padding: 10px 15px !important;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0) !important;
    &:hover {
      border-color: #BECFFF !important;
      color: #0044FF !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
  `,
}));

const KnowledgeList = memo<{ mobile?: boolean }>(() => {
  const { cx, styles } = useStyles();
  const [value, setValue] = useState(1)
  const [tabValue, setTabValue] = useState(1)
  const [tabsVal, setTabsVal] = useState(1)
  const [cardValue, setCardValue] = useState(1)
  const [updateFormValues, setUpdateFormValues] = useState({})
  // const [form] = Form.useForm();
  const { message } = App.useApp();
  const createNewKnowledgeBase = useKnowledgeBaseStore((s) => s.createNewKnowledgeBase);
  // const [formValues, setFormValues] = useState();
  const [modalVisible, setModalVisible] = useState(false);
  const [updateModalVisible, setUpdateModalVisible] = useState(false);
  // const createForm = (values) => {
  //   console.log("44444")
  //     // setFormValues(values);
  //     setOpen(false);
  // };
  // const handleOk = () => {
  //   form.validateFields().then(values => {
  //         console.log("88888",values)
  //     // setFormValues(values);
  //     setOpen(false);
  //   }).catch(info => {
  //     console.error('Validation failed', info);
  //   });
  // };
  // const { t } = useTranslation('common');
  const data = [
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
  ];

  const columnsAll = [
    {
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
      title: '序号',
    },
    {
      dataIndex: 'filename',
      key: 'filename',
      title: '文件名',
    },
    {
      dataIndex: 'filetype',
      key: 'filetype',
      title: '文件类型',
    },
    {
      dataIndex: 'filesize',
      key: 'filesize',
      title: '文件大小(KB)',
    },
    {
      dataIndex: 'tokens',
      key: 'tokens',
      title: 'tokens',
    },
    {
      dataIndex: 'num',
      key: 'num',
      title: '知识库条数',
    },
    {
      dataIndex: 'status',
      key: 'status',
      title: '状态',
    },
    {
      dataIndex: 'updatetime',
      key: 'updatetime',
      title: '更新时间',
    },
    {
      align: 'center',
      key: 'action',
      render: () => (
        <Space size={50}>
          <a style={{color: '#0044FF'}}>查看</a>
          <a style={{color: '#26D308'}}>重命名</a>
          <a style={{color: '#FF0C0C'}}>删除</a>
        </Space>
      ),
      title: '操作',
      width: 300,
    },
  ];
  const columnsDocument = [
    {
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
      title: '序号',
    },
    {
      dataIndex: 'content',
      key: 'content',
      title: '内容',
    },
    {
      align: 'center',
      key: 'action',
      render: () => (
        <Space size={50}>
          <a style={{color: '#0044FF'}}>查看</a>
          <a style={{color: '#26D308'}}>编辑</a>
          <a style={{color: '#FF0C0C'}}>删除</a>
        </Space>
      ),
      title: '操作',
      width: 300,
    },
  ];
  const columnsQuestion = [
    {
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
      title: '序号',
    },
    {
      dataIndex: 'question',
      key: 'question',
      title: '问题',
    },
    {
      dataIndex: 'answer',
      key: 'answer',
      title: '回答',
    },
    {
      align: 'center',
      key: 'action',
      render: () => (
        <Space size={50}>
          <a style={{color: '#0044FF'}}>查看</a>
          <a style={{color: '#26D308'}}>编辑</a>
          <a style={{color: '#FF0C0C'}}>删除</a>
        </Space>
      ),
      title: '操作',
      width: 300,
    },
  ];
  const tableDataAll = [
    {
      filename: '测试文件',
      filesize: '1',
      filetype: '问答',
      key: '1',
      num: '2',
      status: '生效',
      tokens: '64',
      updatetime: '2024-10-31 12:12:12'
    },
    {
      filename: '测试文件',
      filesize: '1',
      filetype: '问答',
      key: '1',
      num: '2',
      status: '生效',
      tokens: '64',
      updatetime: '2024-10-31 12:12:12'
    },
    {
      filename: '测试文件',
      filesize: '1',
      filetype: '问答',
      key: '1',
      num: '2',
      status: '生效',
      tokens: '64',
      updatetime: '2024-10-31 12:12:12'
    },
  ];

  const tableDataDocument = [
    {
      content: '这是一段描述，这是一段描述这是一段描述，这是一段描述，这是一段描述，这是一段描述，',
      key: '1',
    },
    {
      content: '这是一段描述，这是一段描述这是一段描述，这是一段描述，这是一段描述，这是一段描述，',
      key: '2',
    },
  ];

  const tableDataQuestion = [
    {
      answer: '这是回答内容',
      key: '1',
      question: '这是问题内容',
    },
    {
      answer: '这是回答内容',
      key: '2',
      question: '这是问题内容',
    },
  ];

  // const handleChange = () => {

  // }

  const handleAdd = fields => {
      createNewKnowledgeBase({
                "description": fields.description,
                "name": fields.name,
          });
      // const params = {
      //   "0": {
      //       "json": {
      //           "name": fields.name,
      //           "description": fields.description
      //       }
      //    }
      // }
      // request({
      //     url: "/trpc/lambda/knowledgeBase.createKnowledgeBase?batch=1",
      //     data: params,
      //     method: "post",
      //     // headers: {
      //     //   'Cookie': 'your-cookie-value'
      //     // },
      // }).then(response => {
      //   console.log(response,"222222222")
      // }).catch(error => {
      //   console.error('Error fetching data:', error);
      // })
      message.success('添加成功');
      setModalVisible(false);
  };

  const handleModalVisible = (flag) => {
     setModalVisible(!!flag);
  };

  const handleUpdate = () => {
      // const { updateFormValues } = this.state;

      message.success('修改成功');
      setUpdateModalVisible(false);

  };

  const handleUpdateModalVisible = (flag, record) => {
      setUpdateModalVisible(!!flag);
      setUpdateFormValues(record || {});
  };

  const handleDeleteRecord = () => {

      message.success('删除成功');
  };

  const items = [
    {
      children: <Table className={styles.tableHead} columns={columnsAll} dataSource={tableDataAll}/>,
      key: '1',
      label: '全部',
    },
    {
      children: <>
        <Select
            className={styles.selectStyle}
            defaultValue="集智AI产品架构设计.pdf"
            // onChange={handleChange}
            options={[
              {
                label: '集智AI产品架构设计.pdf',
                value: '集智AI产品架构设计.pdf',
              },
            ]}
            style={{
              width: 200,
            }}
          />
        <Table className={styles.tableHead} columns={columnsDocument} dataSource={tableDataDocument}/>
      </>,
      key: '2',
      label: '文档',
    },
    {
      children: <>
        <Select
            className={styles.selectStyle}
            defaultValue="template.csv"
            // onChange={handleChange}
            options={[
              {
                label: 'template.csv',
                value: 'template.csv',
              },
            ]}
            style={{
              width: 200,
            }}
          />
        <Table className={styles.tableHead} columns={columnsQuestion} dataSource={tableDataQuestion}/>
      </>,
      key: '3',
      label: '问答',
    },
  ];

  // const onSearch = () => {

  // }

  const handleTabChange = (val) => {
    console.log(val,"5555")
    setTabsVal(val)
  }

  const operations = <>
     <Search
        allowClear
        className={styles.searchStyle}
        // onSearch={onSearch}
        placeholder="请输入"
        style={{
          width: 200,
        }}
      />
      {
        tabsVal === 1?(
          <Button className={styles.importButtonStyle} onClick={null}  shape="round" size="small" type="text" variant="solid">
              导入
          </Button>
        ):null
      }
  </>;

 const handleSwitch = (val) => {
  setValue(val)
 }

 const handleSelectTab = (val) => {
   console.log(val)
  setTabValue(val)
 }

 const handleSelectCard = (val) => {
   console.log(val,"5555")
   setCardValue(val)
 }

 const parentMethods = {
    handleAdd: handleAdd,
    handleModalVisible: handleModalVisible,
 };

 const updateMethods = {
    handleUpdate: handleUpdate,
    handleUpdateModalVisible: handleUpdateModalVisible,
 };

 const renderItem = () => {
   const props = {
     action: '#',
     beforeUpload(file) {
       console.log(file,"77777777777777777")
       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
       if (!isJpgOrPng) {
         message.error('你只能上传JPG/PNG文件!');
         return false;
       }
       const isLt2M = file.size / 1024 / 1024 < 2;
       if (!isLt2M) {
         message.error('文件大小不能超过 2MB!');
         return false;
       }
       return isJpgOrPng && isLt2M;
     },
     multiple: true,
     name: 'file',
     onChange(info) {
       console.log(info,"2928282828")
       const { status } = info.file;
       if (status !== 'uploading') {
         console.log(info.file, info.fileList);
       }
       if (status === 'done') {
         message.success(`${info.file.name} file uploaded successfully.`);
       } else if (status === 'error') {
         message.error(`${info.file.name} file upload failed.`);
       }
     },
     onDrop(e) {
       console.log('Dropped files', e.dataTransfer.files);
     },
   };
   if(tabValue === 1) {
     return (
      <Card bordered={false}>
        <Tabs className={styles.tabStyle} items={items} onChange={handleTabChange} tabBarExtraContent={operations} />
      </Card>
     )
   } else if(tabValue === 2) {
     return (
        <div style={{height: '100%'}}>
          <Flex gap={30} justify='space-between' style={{height: '100%'}}>
             <Card bordered={false} style={{height: '85%', padding: '0 30px', width: '100%'}}>
               <Flex gap={50}>
                   <div className={`${cardValue === 1 ?  styles.documentCardActive : styles.documentCard}`} onClick={()=>handleSelectCard(1)}>
                       <Flex>
                         <Image preview={false} src="/images/question.png" style={{marginTop: '9px', width: '28px'}} />
                         <div style={{marginLeft: '20px'}}>
                           <div className={styles.title}>文档</div>
                           <div className={styles.dec}>自动解析文档，使用方便</div>
                         </div>
                        </Flex>
                   </div>
                   <div className={`${cardValue === 2 ?  styles.documentCardActive : styles.documentCard}`} onClick={()=>handleSelectCard(2)}>
                     <Flex>
                       <Image preview={false} src="/images/answer.png" style={{marginTop: '9px',width: '35px'}} />
                       <div style={{marginLeft: '20px'}}>
                         <div className={styles.title}>问答</div>
                         <div className={styles.dec}>一问一答导入，准确性更佳</div>
                       </div>
                      </Flex>
                   </div>
               </Flex>
               <div style={{color: '#3D3D3D',fontSize: '20px',marginTop: '50px'}}>上传文件:</div>
               <div style={{color: '#999999',fontSize: '15px',marginBottom: '70px',marginTop: '10px' }}>
                 {
                   cardValue === 1 ? '支持txt、pdf、md、docx格式文件，单次最多上传10个文件。单个文件大小不超过15M.':(<>
                      <div>支持CSV(双列)格式文件，单次可上传10个文件，单个大小不超过15M。</div>
                      <div>
                        上传文件需和模板文件格式一直(CSV UTF-8格式)
                        <span style={{color: '#0044FF',cursor: 'pointer',marginLeft: '20px'}}>下载CSV模板</span>
                      </div>
                   </>)
                 }
               </div>
               <Dragger {...props}>
                   <p style={{margin: '50px 0'}}>
                     <CloudUploadOutlined style={{fontSize: '20px',marginRight: '15px'}}/>
                     <span style={{fontSize: '16px'}}>拖拽文件或者点击上传</span>
                   </p>
               </Dragger>
             </Card>
             <Card bordered={false} className={styles.importFileCard} style={{height: '85%', width: '100%'}}>
               <div className={styles.previewContainer}>
                  <Image preview={false} src="/images/empty.png" />
                  <div style={{paddingLeft: '30px'}}>导入后可在此预览</div>
               </div>
             </Card>
           </Flex>
        </div>
     )
   } else {
      return (
        <div style={{height: '100%'}}>
          <Flex gap={30} justify='space-between'style={{height: '100%'}}>
             <Card bordered={false} style={{height: '85%', width: '20%'}}>
               <Flex justify='space-between'>
                    <div style={{color: '#333333',fontSize: '18px',fontWeight: '500'}}>测试文本</div>
                    <Button className={styles.checkButtonStyle} onClick={null} shape="round" size="small" type="text" variant="solid">
                        检测
                    </Button>
               </Flex>
               <div className={styles.testContent}>测试文本</div>
             </Card>
             <Card bordered={false} className={styles.importFileCard} style={{height: '85%',width: '80%'}}>
               <div style={{color: '#333333',fontSize: '18px',fontWeight: '500',marginBottom: '15px'}}>检测结果</div>
               <Flex gap={20} justify='space-between'style={{marginBottom: '20px'}}>
                  <div className={styles.documentCardActive} style={{ padding: '20px' }}>
                      <Flex justify='space-between'>
                        <div>
                         <span className={styles.checkTitle}>相似度:</span>
                         <span>0.9212</span>
                        </div>
                        <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                            查看记录
                        </Button>
                       </Flex>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>问题:</span>
                       </div>
                       <div>
                        <span>什么是LinkAI</span>
                       </div>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>答案:</span>
                       </div>
                       <div>
                        <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                       </div>
                  </div>
                  <div className={styles.documentCardActive} style={{ padding: '20px' }}>
                      <Flex justify='space-between'>
                        <div>
                         <span className={styles.checkTitle}>相似度:</span>
                         <span>0.9212</span>
                        </div>
                        <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                            查看记录
                        </Button>
                       </Flex>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>问题:</span>
                       </div>
                       <div>
                        <span>什么是LinkAI</span>
                       </div>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>答案:</span>
                       </div>
                       <div>
                        <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                       </div>
                  </div>
               </Flex>
               <Flex gap={20} justify='space-between'style={{marginBottom: '20px'}}>
                  <div className={styles.documentCardActive} style={{padding: '20px'}}>
                      <Flex justify='space-between'>
                        <div>
                         <span className={styles.checkTitle}>相似度:</span>
                         <span>0.9212</span>
                        </div>
                        <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                            查看记录
                        </Button>
                       </Flex>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>问题:</span>
                       </div>
                       <div>
                        <span>什么是LinkAI</span>
                       </div>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>答案:</span>
                       </div>
                       <div>
                        <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                       </div>
                  </div>
                  <div className={styles.documentCardActive} style={{padding: '20px'}}>
                      <Flex justify='space-between'>
                        <div>
                         <span className={styles.checkTitle}>相似度:</span>
                         <span>0.9212</span>
                        </div>
                        <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                            查看记录
                        </Button>
                       </Flex>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>问题:</span>
                       </div>
                       <div>
                        <span>什么是LinkAI</span>
                       </div>
                       <div className={styles.checkItem}>
                        <span className={styles.checkTitle}>答案:</span>
                       </div>
                       <div>
                        <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                       </div>
                  </div>
               </Flex>
             </Card>
           </Flex>
        </div>
      )
   }
 }

  return (
    <>
      <div style={{display: value === 1 ? 'block': 'none'}}>
        <div style={{ fontSize: '20px', height: '70px', lineHeight: '70px', marginLeft: '60px', }}>
            我的知识库
        <Button className={styles.buttonStyle} onClick={() => setModalVisible(true)} shape="round" size="small" style={{marginLeft: '24px'}} type="link" variant="solid">
            创建知识库
        </Button>
        </div>
        <KnowledgeCreateForm {...parentMethods} open={modalVisible} />
        {updateFormValues && Object.keys(updateFormValues).length ? (
            <KnowledgeUpdateForm
                {...updateMethods}
                open={updateModalVisible}
                values={updateFormValues}
            />
        ) : null}
        <List
          dataSource={data}
          renderItem={(item) => (
            <List.Item className={styles.listStyle}>
              <Card className={styles.cardStyle}>
                <Flex justify='space-between'>
                  <div>
                    <Flex>
                      <Image className={cx(styles.iconImg)} preview={false} src="/images/zsk1.png" />
                      <div style={{marginLeft: '20px'}}>
                        <div className={styles.title}>政务助手知识库<span style={{color: '#0E46FF',fontSize: '14px',fontWeight: 'normal',marginLeft: '20px'}}>ID: 23039282</span></div>
                        <div>简介: 该知识库主要包括xxxxxx相关知识、xxxxxx相关知识、xxxxxx相关知识、xxxxxx相关知识</div>
                      </div>
                     </Flex>
                  </div>
                  <div style={{lineHeight: '53px'}}>
                    <Button onClick={()=>handleSwitch(2)}  style={{color: '#902EFF'}} type="link">
                        <span className={styles.buttonManage}></span>
                        管理
                    </Button>
                    <Button onClick={() => handleUpdateModalVisible(true, item)} style={{color: '#005EFF'}} type="link">
                        <span className={styles.buttonEdit}></span>
                        编辑
                    </Button>
                    <Popconfirm cancelText="取消" okText="确定" onConfirm={() => handleDeleteRecord(item)} title="你确定要删除吗?" >
                        <Button style={{color: '#FF0C0C'}} type="link">
                            <span className={styles.buttonDelete}></span>
                            删除
                        </Button>
                    </Popconfirm>
                  </div>
                </Flex>
              </Card>
            </List.Item>
          )}
        />
      </div>
      <div style={{display: value === 2 ? 'block': 'none',height: '100%',margin: '20px'}}>
        <Flex justify='space-between'>
          <div>
            <Button className={`${tabValue === 1 ? styles.buttonStyleActive : styles.buttonStyle}`} onClick={()=>handleSelectTab(1)} shape="round" size="small" type="text" variant="solid">
                文件管理
            </Button>
            <Button className={`${tabValue === 2 ? styles.buttonStyleActive : styles.buttonStyle}`} onClick={()=>handleSelectTab(2)} shape="round" size="small" type="text" variant="solid">
                文件导入
            </Button>
            <Button className={`${tabValue === 3 ? styles.buttonStyleActive : styles.buttonStyle}`} onClick={()=>handleSelectTab(3)} shape="round" size="small" type="text" variant="solid">
                检索测试
            </Button>
          </div>
          <Button className={styles.buttonStyle} onClick={()=>handleSwitch(1)} shape="round" size="small" type="text" variant="solid">
              返回知识库
          </Button>
        </Flex>
        <div style={{height: '100%', marginTop: '20px'}}>
          {renderItem()}
        </div>
      </div>
    </>
  );
});

export default KnowledgeList;
