ai-course/app/backend/src/pages/exam/papers/compenents/random-paper.tsx

import { useEffect, useState } from 'react';
import styles from './paper.module.less';
import { message, Button, Table, InputNumber, Spin, Modal, Select } from 'antd';
import { paper, question } from '../../../../api';
import type { ColumnsType } from 'antd/es/table';
import { PlusOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import { BackBartment, SelectQuestion } from '../../../../compenents';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
const { confirm } = Modal;

// 难度选项
const levelOptions = [
  { value: null, label: '不限' },
  { value: 1, label: '简单' },
  { value: 2, label: '中等' },
  { value: 3, label: '困难' },
];

interface DataType {
  id: React.Key;
  admin_id: number;
  category_id: number;
  created_at: string;
  deleted: number;
  name: string;
  q1: number;
  q2: number;
  q3: number;
  q4: number;
  q5: number;
  q6: number;
  sort: number;
  updated_at: string;
}

interface PropInterface {
  type: string;
}

export const RendomPaper: React.FC<PropInterface> = ({ type }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const result = new URLSearchParams(useLocation().search);
  const [spinInit, setSpinInit] = useState(false);
  const [init, setInit] = useState(false);
  const [loading, setLoading] = useState(false);
  const [score, setScore] = useState(0);
  const [passScore, setPassScore] = useState(0);
  const [addQuestion, setAddQuestion] = useState(false);
  const [list, setList] = useState<DataType[]>([]);
  const [questions, setQuestions] = useState([]);
  const [title, setTitle] = useState(String(result.get('title')));
  const [cateId, setCateId] = useState(Number(result.get('cid')));
  const [id, setId] = useState(Number(result.get('id')));
  const [q1, setQ1] = useState(0);
  const [q2, setQ2] = useState(0);
  const [q3, setQ3] = useState(0);
  const [q4, setQ4] = useState(0);
  const [q5, setQ5] = useState(0);
  const [q6, setQ6] = useState(0);
  const [q1Score, setQ1Score] = useState(0);
  const [q2Score, setQ2Score] = useState(0);
  const [q3Score, setQ3Score] = useState(0);
  const [q4Score, setQ4Score] = useState(0);
  const [q5Score, setQ5Score] = useState(0);
  const [q6Score, setQ6Score] = useState(0);
  const [choice, setChoice] = useState({
    number: 0,
    score: 0,
    level: null as number | null,
    knowledge_codes: '' as string,
  });
  const [select, setSelect] = useState({
    number: 0,
    score: 0,
    missed_score: 0,
    level: null as number | null,
    knowledge_codes: '' as string,
  });
  const [input, setInput] = useState({
    number: 0,
    score: 0,
    level: null as number | null,
    knowledge_codes: '' as string,
  });
  const [judge, setJudge] = useState({
    number: 0,
    score: 0,
    level: null as number | null,
    knowledge_codes: '' as string,
  });
  const [qa, setQa] = useState({
    number: 0,
    score: 0,
    level: null as number | null,
    knowledge_codes: '' as string,
  });
  const [cap, setCap] = useState({
    number: 0,
    score: 0,
    missed_score: 0,
    level: null as number | null,
    knowledge_codes: '' as string,
  });
  // 各题型的知识点选项
  const [knowledgeOptions, setKnowledgeOptions] = useState<Record<number, any[]>>({
    1: [],
    2: [],
    3: [],
    4: [],
    5: [],
    6: [],
  });

  useEffect(() => {
    setCateId(Number(result.get('cid')));
    setTitle(String(result.get('title')));
    setId(Number(result.get('id')));
  }, [result.get('cid'), result.get('title'), result.get('id')]);

  // 根据题库、题型、难度加载知识点列表
  const loadKnowledgeCodes = async (type: number, level: number | null) => {
    if (questions.length === 0) return;
    try {
      const res: any = await question.getKnowledgeCodes(questions.join(','), type, level);
      const items = res.data || [];
      // 后端返回 [{code: "xxx", name: "yyy"}, ...]
      const options = items.map((item: { code: string; name: string }) => ({
        value: item.code,
        label: item.name,
      }));
      setKnowledgeOptions((prev) => ({ ...prev, [type]: options }));
    } catch (e) {
      console.error('加载知识点失败', e);
    }
  };

  useEffect(() => {
    if (id === 0) {
      return;
    }
    if (id > 0) {
      setSpinInit(true);
      getDetail();
    }
  }, [id]);

  useEffect(() => {
    getQuestionList();
  }, [questions]);

  useEffect(() => {
    if (list.length > 0) {
      let num1 = 0;
      let num2 = 0;
      let num3 = 0;
      let num4 = 0;
      let num5 = 0;
      let num6 = 0;
      list.map((item: any) => {
        num1 += Number(item.q1);
        num2 += Number(item.q2);
        num3 += Number(item.q3);
        num4 += Number(item.q4);
        num5 += Number(item.q5);
        num6 += Number(item.q6);
      });
      setQ1(num1);
      setQ2(num2);
      setQ3(num3);
      setQ4(num4);
      setQ5(num5);
      setQ6(num6);
    }
  }, [list]);

  useEffect(() => {
    if (choice.number > 0 && choice.score > 0) {
      const value = choice.number * choice.score;
      setQ1Score(value);
    } else {
      setQ1Score(0);
    }
    if (select.number > 0 && select.score > 0) {
      const value = select.number * select.score;
      setQ2Score(value);
    } else {
      setQ2Score(0);
    }
    if (input.number > 0 && input.score > 0) {
      const value = input.number * input.score;
      setQ3Score(value);
    } else {
      setQ3Score(0);
    }
    if (judge.number > 0 && judge.score > 0) {
      const value = judge.number * judge.score;
      setQ4Score(value);
    } else {
      setQ4Score(0);
    }
    if (qa.number > 0 && qa.score > 0) {
      const value = qa.number * qa.score;
      setQ5Score(value);
    } else {
      setQ5Score(0);
    }
    if (cap.number > 0 && cap.score > 0) {
      const value = cap.number * cap.score;
      setQ6Score(value);
    } else {
      setQ6Score(0);
    }
  }, [choice, select, input, judge, qa, cap]);

  useEffect(() => {
    const value = q1Score + q2Score + q3Score + q4Score + q5Score + q6Score;
    setScore(value);
  }, [q1Score, q2Score, q3Score, q4Score, q5Score, q6Score]);

  const getDetail = () => {
    paper.detail(id).then((res: any) => {
      setPassScore(res.data.result.pass_score);
      const data = JSON.parse(res.data.result.extra);
      const arr = data.d.random_rules.source.category_ids;
      if (arr.length > 0) {
        setQuestions(arr);
      }
      const score = data.d.random_rules.score;
      if (score[1]) {
        setChoice({
          number: score[1].number,
          score: score[1].score,
          level: score[1].level || null,
          knowledge_codes: score[1].knowledge_codes || '',
        });
      }
      if (score[2]) {
        setSelect({
          number: score[2].number,
          score: score[2].score,
          missed_score: score[2].missed_score,
          level: score[2].level || null,
          knowledge_codes: score[2].knowledge_codes || '',
        });
      }
      if (score[3]) {
        setInput({
          number: score[3].number,
          score: score[3].score,
          level: score[3].level || null,
          knowledge_codes: score[3].knowledge_codes || '',
        });
      }
      if (score[4]) {
        setJudge({
          number: score[4].number,
          score: score[4].score,
          level: score[4].level || null,
          knowledge_codes: score[4].knowledge_codes || '',
        });
      }
      if (score[5]) {
        setQa({
          number: score[5].number,
          score: score[5].score,
          level: score[5].level || null,
          knowledge_codes: score[5].knowledge_codes || '',
        });
      }
      if (score[6]) {
        setCap({
          number: score[6].number,
          score: score[6].score,
          missed_score: 0,
          level: score[6].level || null,
          knowledge_codes: score[6].knowledge_codes || '',
        });
      }
      setSpinInit(false);
      setInit(false);

      // 预加载各题型的知识点选项（用于回显）
      if (arr.length > 0) {
        const categoryIds = arr.join(',');
        [1, 2, 3, 4, 5, 6].forEach((type) => {
          const typeScore = score[type];
          if (typeScore && typeScore.knowledge_codes) {
            question
              .getKnowledgeCodes(categoryIds, type, typeScore.level || null)
              .then((res: any) => {
                const items = res.data || [];
                const options = items.map((item: { code: string; name: string }) => ({
                  value: item.code,
                  label: item.name,
                }));
                setKnowledgeOptions((prev) => ({ ...prev, [type]: options }));
              })
              .catch(() => {});
          }
        });
      }
    });
  };

  const getQuestionList = () => {
    if (init) {
      return;
    }
    if (questions.length === 0) {
      return;
    }
    setInit(true);
    paper
      .checkQuestionList(questions.join(','))
      .then((res: any) => {
        setList(res.data.result);
        setInit(false);
      })
      .catch((e) => {
        setInit(false);
      });
  };

  const columns: ColumnsType<DataType> = [
    {
      title: t('exam.question.columns.title1'),
      render: (_, record: any) => (
        <div className="d-flex ">
          <i
            className="iconfont c-file icon-icon-file"
            style={{
              fontSize: 16,
              color: '#ffa816',
            }}
          />
          <span className="ml-8">{record.name}</span>
        </div>
      ),
    },
    {
      title: t('exam.question.choice.label'),
      width: 120,
      render: (_, record: any) => <span>{record.q1}</span>,
    },
    {
      title: t('exam.question.select.label'),
      width: 120,
      render: (_, record: any) => <span>{record.q2}</span>,
    },
    {
      title: t('exam.question.input.label'),
      width: 120,
      render: (_, record: any) => <span>{record.q3}</span>,
    },
    {
      title: t('exam.question.judge.label'),
      width: 120,
      render: (_, record: any) => <span>{record.q4}</span>,
    },
    {
      title: t('exam.question.qa.label'),
      width: 120,
      render: (_, record: any) => <span>{record.q5}</span>,
    },
    {
      title: t('exam.question.cap.label'),
      width: 120,
      render: (_, record: any) => <span>{record.q6}</span>,
    },
    {
      title: t('exam.question.columns.title4'),
      key: 'action',
      fixed: 'right',
      width: 120,
      render: (_, record) => (
        <Button type="link" className="b-link c-red" onClick={() => delQuestion(Number(record.id))}>
          {t('commen.del')}
        </Button>
      ),
    },
  ];

  const delQuestion = (qid: number) => {
    confirm({
      title: t('commen.confirmError'),
      icon: <ExclamationCircleFilled />,
      content: t('exam.paper.compose.delText2'),
      centered: true,
      okText: t('commen.okText'),
      cancelText: t('commen.cancelText'),
      onOk() {
        const arr = [...questions];
        const arr2 = [...list];
        const key = arr.findIndex((i: any) => i === qid);
        if (key >= 0) {
          arr.splice(key, 1);
          arr2.splice(key, 1);
        }
        setQuestions(arr);
        setList(arr2);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  const selectQuestionData = (arr: any, data: any) => {
    setQuestions(arr);
    setAddQuestion(false);
  };

  const submitHandle = () => {
    if (loading) {
      return;
    }
    if (questions.length === 0) {
      message.error(t('exam.paper.compose.errorText7'));
      return;
    }
    if (
      choice.number === 0 &&
      select.number === 0 &&
      input.number === 0 &&
      judge.number === 0 &&
      qa.number === 0 &&
      cap.number === 0
    ) {
      message.error(t('exam.paper.compose.errorText8'));
      return;
    }
    if (choice.number > 0 && q1Score === 0) {
      message.error(t('exam.paper.compose.errorText9'));
      return;
    }
    if (select.number > 0 && q2Score === 0) {
      message.error(t('exam.paper.compose.errorText10'));
      return;
    }
    if (input.number > 0 && q3Score === 0) {
      message.error(t('exam.paper.compose.errorText11'));
      return;
    }
    if (judge.number > 0 && q4Score === 0) {
      message.error(t('exam.paper.compose.errorText12'));
      return;
    }
    if (qa.number > 0 && q5Score === 0) {
      message.error(t('exam.paper.compose.errorText13'));
      return;
    }
    if (cap.number > 0 && q6Score === 0) {
      message.error(t('exam.paper.compose.errorText14'));
      return;
    }
    if (score === 0) {
      message.error(t('exam.paper.compose.errorText15'));
      return;
    }
    if (passScore === 0) {
      message.error(t('exam.paper.compose.errorText3'));
      return;
    }
    const obj: any = {};
    if (q1Score > 0) {
      obj[1] = choice;
    }
    if (q2Score > 0) {
      obj[2] = select;
    }
    if (q3Score > 0) {
      obj[3] = input;
    }
    if (q4Score > 0) {
      obj[4] = judge;
    }
    if (q5Score > 0) {
      obj[5] = qa;
    }
    if (q6Score > 0) {
      obj[6] = cap;
    }

    const params = {
      v: 'v1',
      d: {
        random_rules: {
          source: {
            category_ids: questions,
          },
          score: obj,
        },
      },
    };
    const extra = JSON.stringify(params);
    setLoading(true);
    paper.store(cateId, title, score, passScore, 1, extra).then((res: any) => {
      setLoading(false);
      message.success(t('commen.saveSuccess'));
      navigate(-1);
    });
  };

  const submitUpdateHandle = () => {
    if (loading) {
      return;
    }
    if (questions.length === 0) {
      message.error(t('exam.paper.compose.errorText7'));
      return;
    }
    if (
      choice.number === 0 &&
      select.number === 0 &&
      input.number === 0 &&
      judge.number === 0 &&
      qa.number === 0 &&
      cap.number === 0
    ) {
      message.error(t('exam.paper.compose.errorText8'));
      return;
    }
    if (choice.number > 0 && q1Score === 0) {
      message.error(t('exam.paper.compose.errorText9'));
      return;
    }
    if (select.number > 0 && q2Score === 0) {
      message.error(t('exam.paper.compose.errorText10'));
      return;
    }
    if (input.number > 0 && q3Score === 0) {
      message.error(t('exam.paper.compose.errorText11'));
      return;
    }
    if (judge.number > 0 && q4Score === 0) {
      message.error(t('exam.paper.compose.errorText12'));
      return;
    }
    if (qa.number > 0 && q5Score === 0) {
      message.error(t('exam.paper.compose.errorText13'));
      return;
    }
    if (cap.number > 0 && q6Score === 0) {
      message.error(t('exam.paper.compose.errorText14'));
      return;
    }
    if (score === 0) {
      message.error(t('exam.paper.compose.errorText15'));
      return;
    }
    if (passScore === 0) {
      message.error(t('exam.paper.compose.errorText3'));
      return;
    }
    const obj: any = {};
    if (q1Score > 0) {
      obj[1] = choice;
    }
    if (q2Score > 0) {
      obj[2] = select;
    }
    if (q3Score > 0) {
      obj[3] = input;
    }
    if (q4Score > 0) {
      obj[4] = judge;
    }
    if (q5Score > 0) {
      obj[5] = qa;
    }
    if (q6Score > 0) {
      obj[6] = cap;
    }

    const params = {
      v: 'v1',
      d: {
        random_rules: {
          source: {
            category_ids: questions,
          },
          score: obj,
        },
      },
    };
    const extra = JSON.stringify(params);
    setLoading(true);
    paper.questionUpdate(id, cateId, title, score, passScore, 1, extra).then((res: any) => {
      setLoading(false);
      message.success(t('commen.saveSuccess'));
      navigate(-1);
    });
  };

  return (
    <div className="float-left" style={{ height: '100%', backgroundColor: '#F6F6F6' }}>
      <div className={styles['paper-header']}>
        <div className="d-flex">
          <BackBartment title={title}></BackBartment>
        </div>
        <div className="d-flex">
          <div className={styles['total-score']}>
            {t('exam.paper.compose.score')}
            {score}
          </div>
          <Button
            type="primary"
            className="ml-24"
            loading={loading}
            onClick={() => {
              if (type === 'create') {
                submitHandle();
                return;
              }
              submitUpdateHandle();
            }}
          >
            {t('exam.paper.compose.save')}
          </Button>
        </div>
      </div>
      <div className={styles['random-paper-content']}>
        <div className="float-left">
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setAddQuestion(true)}>
            {t('exam.paper.compose.addQuestions')}
          </Button>
        </div>
        {spinInit && (
          <div className="float-left text-center mt-30">
            <Spin></Spin>
          </div>
        )}
        {!spinInit && list.length > 0 ? (
          <>
            <div className="float-left mt-24">
              <Table
                columns={columns}
                dataSource={list}
                loading={init}
                pagination={false}
                rowKey={(record) => record.id}
              />
            </div>
            <div className="float-left mt-50">
              {q1 > 0 && (
                <div className={styles['config-item']}>
                  <div className="d-flex">
                    <div className={styles['label']}>
                      <span className="c-red">*</span>
                      {t('exam.question.choice.label')}({t('exam.paper.compose.text1')}
                      {q1}
                      {t('exam.paper.compose.text2')})：
                    </div>
                    <div className="d-flex ml-30">
                      {t('exam.paper.compose.text3')}
                      <InputNumber
                        max={q1}
                        min={0}
                        defaultValue={choice.number}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...choice };
                          obj.number = Number(value);
                          setChoice(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text2')}
                    </div>
                    <div className="d-flex ml-30">
                      <InputNumber
                        min={0}
                        defaultValue={choice.score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...choice };
                          obj.score = Number(value);
                          setChoice(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text4')}
                    </div>
                    <div className="d-flex ml-30">
                      难度
                      <Select
                        style={{ width: 100, marginLeft: 8 }}
                        size="large"
                        options={levelOptions}
                        value={choice.level}
                        onChange={(value) => {
                          const obj = { ...choice };
                          obj.level = value;
                          obj.knowledge_codes = '';
                          setChoice(obj);
                          loadKnowledgeCodes(1, value);
                        }}
                        allowClear
                        placeholder="不限"
                      />
                    </div>
                    <div className="d-flex ml-30">
                      知识点
                      <Select
                        style={{ width: 200, marginLeft: 8 }}
                        size="large"
                        mode="multiple"
                        options={knowledgeOptions[1]}
                        value={choice.knowledge_codes ? choice.knowledge_codes.split(',') : []}
                        onChange={(values: string[]) => {
                          const obj = { ...choice };
                          obj.knowledge_codes = values.join(',');
                          setChoice(obj);
                        }}
                        maxTagCount="responsive"
                        placeholder="不限"
                        onFocus={() => loadKnowledgeCodes(1, choice.level)}
                      />
                    </div>
                  </div>
                  <div className="d-flex">
                    {t('exam.paper.compose.text1')}
                    {q1Score}
                    {t('exam.paper.compose.text5')}
                  </div>
                </div>
              )}
              {q2 > 0 && (
                <div className={styles['config-item']}>
                  <div className="d-flex" style={{ flexWrap: 'wrap', gap: '8px 0' }}>
                    <div className={styles['label']}>
                      <span className="c-red">*</span>
                      {t('exam.question.select.label')}({t('exam.paper.compose.text1')}
                      {q2}
                      {t('exam.paper.compose.text2')})：
                    </div>
                    <div className="d-flex ml-30">
                      {t('exam.paper.compose.text3')}
                      <InputNumber
                        max={q2}
                        min={0}
                        defaultValue={select.number}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...select };
                          obj.number = Number(value);
                          setSelect(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text2')}
                    </div>
                    <div className="d-flex ml-30">
                      <InputNumber
                        min={0}
                        defaultValue={select.score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...select };
                          obj.score = Number(value);
                          setSelect(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text4')}
                    </div>
                    <div className="d-flex ml-30">
                      <span className="c-red">*</span>
                      {t('exam.paper.compose.text6')}
                      <InputNumber
                        min={0}
                        max={select.score}
                        defaultValue={select.missed_score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...select };
                          obj.missed_score = Number(value);
                          setSelect(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text5')}
                    </div>
                    <div className="d-flex ml-30">
                      难度
                      <Select
                        style={{ width: 100, marginLeft: 8 }}
                        size="large"
                        options={levelOptions}
                        value={select.level}
                        onChange={(value) => {
                          const obj = { ...select };
                          obj.level = value;
                          obj.knowledge_codes = '';
                          setSelect(obj);
                          loadKnowledgeCodes(2, value);
                        }}
                        allowClear
                        placeholder="不限"
                      />
                    </div>
                    <div className="d-flex ml-30">
                      知识点
                      <Select
                        style={{ width: 200, marginLeft: 8 }}
                        size="large"
                        mode="multiple"
                        options={knowledgeOptions[2]}
                        value={select.knowledge_codes ? select.knowledge_codes.split(',') : []}
                        onChange={(values: string[]) => {
                          const obj = { ...select };
                          obj.knowledge_codes = values.join(',');
                          setSelect(obj);
                        }}
                        maxTagCount="responsive"
                        placeholder="不限"
                        onFocus={() => loadKnowledgeCodes(2, select.level)}
                      />
                    </div>
                  </div>
                  <div className="d-flex">
                    {t('exam.paper.compose.text1')}
                    {q2Score}
                    {t('exam.paper.compose.text5')}
                  </div>
                </div>
              )}
              {q3 > 0 && (
                <div className={styles['config-item']}>
                  <div className="d-flex" style={{ flexWrap: 'wrap', gap: '8px 0' }}>
                    <div className={styles['label']}>
                      <span className="c-red">*</span>
                      {t('exam.question.input.label')}({t('exam.paper.compose.text1')}
                      {q3}
                      {t('exam.paper.compose.text2')})：
                    </div>
                    <div className="d-flex ml-30">
                      {t('exam.paper.compose.text3')}
                      <InputNumber
                        max={q3}
                        min={0}
                        defaultValue={input.number}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...input };
                          obj.number = Number(value);
                          setInput(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text2')}
                    </div>
                    <div className="d-flex ml-30">
                      <InputNumber
                        min={0}
                        defaultValue={input.score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...input };
                          obj.score = Number(value);
                          setInput(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text4')}
                    </div>
                    <div className="d-flex ml-30">
                      难度
                      <Select
                        style={{ width: 100, marginLeft: 8 }}
                        size="large"
                        options={levelOptions}
                        value={input.level}
                        onChange={(value) => {
                          const obj = { ...input };
                          obj.level = value;
                          obj.knowledge_codes = '';
                          setInput(obj);
                          loadKnowledgeCodes(3, value);
                        }}
                        allowClear
                        placeholder="不限"
                      />
                    </div>
                    <div className="d-flex ml-30">
                      知识点
                      <Select
                        style={{ width: 200, marginLeft: 8 }}
                        size="large"
                        mode="multiple"
                        options={knowledgeOptions[3]}
                        value={input.knowledge_codes ? input.knowledge_codes.split(',') : []}
                        onChange={(values: string[]) => {
                          const obj = { ...input };
                          obj.knowledge_codes = values.join(',');
                          setInput(obj);
                        }}
                        maxTagCount="responsive"
                        placeholder="不限"
                        onFocus={() => loadKnowledgeCodes(3, input.level)}
                      />
                    </div>
                  </div>
                  <div className="d-flex">
                    {t('exam.paper.compose.text1')}
                    {q3Score}
                    {t('exam.paper.compose.text5')}
                  </div>
                </div>
              )}
              {q4 > 0 && (
                <div className={styles['config-item']}>
                  <div className="d-flex" style={{ flexWrap: 'wrap', gap: '8px 0' }}>
                    <div className={styles['label']}>
                      <span className="c-red">*</span>
                      {t('exam.question.judge.label')}({t('exam.paper.compose.text1')}
                      {q4}
                      {t('exam.paper.compose.text2')})：
                    </div>
                    <div className="d-flex ml-30">
                      {t('exam.paper.compose.text3')}
                      <InputNumber
                        max={q4}
                        min={0}
                        defaultValue={judge.number}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...judge };
                          obj.number = Number(value);
                          setJudge(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text2')}
                    </div>
                    <div className="d-flex ml-30">
                      <InputNumber
                        min={0}
                        defaultValue={judge.score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...judge };
                          obj.score = Number(value);
                          setJudge(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text4')}
                    </div>
                    <div className="d-flex ml-30">
                      难度
                      <Select
                        style={{ width: 100, marginLeft: 8 }}
                        size="large"
                        options={levelOptions}
                        value={judge.level}
                        onChange={(value) => {
                          const obj = { ...judge };
                          obj.level = value;
                          obj.knowledge_codes = '';
                          setJudge(obj);
                          loadKnowledgeCodes(4, value);
                        }}
                        allowClear
                        placeholder="不限"
                      />
                    </div>
                    <div className="d-flex ml-30">
                      知识点
                      <Select
                        style={{ width: 200, marginLeft: 8 }}
                        size="large"
                        mode="multiple"
                        options={knowledgeOptions[4]}
                        value={judge.knowledge_codes ? judge.knowledge_codes.split(',') : []}
                        onChange={(values: string[]) => {
                          const obj = { ...judge };
                          obj.knowledge_codes = values.join(',');
                          setJudge(obj);
                        }}
                        maxTagCount="responsive"
                        placeholder="不限"
                        onFocus={() => loadKnowledgeCodes(4, judge.level)}
                      />
                    </div>
                  </div>
                  <div className="d-flex">
                    {t('exam.paper.compose.text1')}
                    {q4Score}
                    {t('exam.paper.compose.text5')}
                  </div>
                </div>
              )}
              {q5 > 0 && (
                <div className={styles['config-item']}>
                  <div className="d-flex" style={{ flexWrap: 'wrap', gap: '8px 0' }}>
                    <div className={styles['label']}>
                      <span className="c-red">*</span>
                      {t('exam.question.qa.label')}({t('exam.paper.compose.text1')}
                      {q5}
                      {t('exam.paper.compose.text2')})：
                    </div>
                    <div className="d-flex ml-30">
                      {t('exam.paper.compose.text3')}
                      <InputNumber
                        max={q5}
                        min={0}
                        defaultValue={qa.number}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...qa };
                          obj.number = Number(value);
                          setQa(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text2')}
                    </div>
                    <div className="d-flex ml-30">
                      <InputNumber
                        min={0}
                        defaultValue={qa.score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...qa };
                          obj.score = Number(value);
                          setQa(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text4')}
                    </div>
                    <div className="d-flex ml-30">
                      难度
                      <Select
                        style={{ width: 100, marginLeft: 8 }}
                        size="large"
                        options={levelOptions}
                        value={qa.level}
                        onChange={(value) => {
                          const obj = { ...qa };
                          obj.level = value;
                          obj.knowledge_codes = '';
                          setQa(obj);
                          loadKnowledgeCodes(5, value);
                        }}
                        allowClear
                        placeholder="不限"
                      />
                    </div>
                    <div className="d-flex ml-30">
                      知识点
                      <Select
                        style={{ width: 200, marginLeft: 8 }}
                        size="large"
                        mode="multiple"
                        options={knowledgeOptions[5]}
                        value={qa.knowledge_codes ? qa.knowledge_codes.split(',') : []}
                        onChange={(values: string[]) => {
                          const obj = { ...qa };
                          obj.knowledge_codes = values.join(',');
                          setQa(obj);
                        }}
                        maxTagCount="responsive"
                        placeholder="不限"
                        onFocus={() => loadKnowledgeCodes(5, qa.level)}
                      />
                    </div>
                  </div>
                  <div className="d-flex">
                    {t('exam.paper.compose.text1')}
                    {q5Score}
                    {t('exam.paper.compose.text5')}
                  </div>
                </div>
              )}
              {q6 > 0 && (
                <div className={styles['config-item']}>
                  <div className="d-flex" style={{ flexWrap: 'wrap', gap: '8px 0' }}>
                    <div className={styles['label']}>
                      <span className="c-red">*</span>
                      {t('exam.question.cap.label')}({t('exam.paper.compose.text1')}
                      {q6}
                      {t('exam.paper.compose.text2')})：
                    </div>
                    <div className="d-flex ml-30">
                      {t('exam.paper.compose.text3')}
                      <InputNumber
                        max={q6}
                        min={0}
                        defaultValue={cap.number}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...cap };
                          obj.number = Number(value);
                          setCap(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text2')}
                    </div>
                    <div className="d-flex ml-30">
                      <InputNumber
                        min={0}
                        defaultValue={cap.score}
                        placeholder={t('commen.inputNumber')}
                        onChange={(value) => {
                          const obj = { ...cap };
                          obj.score = Number(value);
                          setCap(obj);
                        }}
                        precision={0}
                        size="large"
                        className={styles['input']}
                      ></InputNumber>
                      {t('exam.paper.compose.text4')}
                    </div>
                    <div className="d-flex ml-30">
                      难度
                      <Select
                        style={{ width: 100, marginLeft: 8 }}
                        size="large"
                        options={levelOptions}
                        value={cap.level}
                        onChange={(value) => {
                          const obj = { ...cap };
                          obj.level = value;
                          obj.knowledge_codes = '';
                          setCap(obj);
                          loadKnowledgeCodes(6, value);
                        }}
                        allowClear
                        placeholder="不限"
                      />
                    </div>
                    <div className="d-flex ml-30">
                      知识点
                      <Select
                        style={{ width: 200, marginLeft: 8 }}
                        size="large"
                        mode="multiple"
                        options={knowledgeOptions[6]}
                        value={cap.knowledge_codes ? cap.knowledge_codes.split(',') : []}
                        onChange={(values: string[]) => {
                          const obj = { ...cap };
                          obj.knowledge_codes = values.join(',');
                          setCap(obj);
                        }}
                        maxTagCount="responsive"
                        placeholder="不限"
                        onFocus={() => loadKnowledgeCodes(6, cap.level)}
                      />
                    </div>
                  </div>
                  <div className="d-flex">
                    {t('exam.paper.compose.text1')}
                    {q6Score}
                    {t('exam.paper.compose.text5')}
                  </div>
                </div>
              )}
            </div>
            <div className={styles['line']}></div>
            <div className="float-left mt-24 mb-24">
              <div className={styles['config-item']}>
                <div className="d-flex">
                  <div className={styles['title']}>
                    <span className="c-red">*</span>
                    {t('exam.paper.compose.text7')}
                  </div>
                  <InputNumber
                    max={score}
                    min={0}
                    defaultValue={passScore}
                    placeholder={t('commen.inputNumber')}
                    onChange={(value) => {
                      setPassScore(Number(value));
                    }}
                    precision={0}
                    size="large"
                    className={styles['input']}
                  ></InputNumber>
                  {t('exam.paper.compose.text5')}
                </div>
                <div className="d-flex">
                  {t('exam.paper.compose.score')}
                  {score}
                  {t('exam.paper.compose.text5')}
                </div>
              </div>
            </div>
          </>
        ) : null}
      </div>
      <SelectQuestion
        defaultKeys={questions}
        open={addQuestion}
        onCancel={() => {
          setAddQuestion(false);
        }}
        onSelected={(arr: any, videos: any) => {
          selectQuestionData(arr, videos);
        }}
      ></SelectQuestion>
    </div>
  );
};