import React, { useState } from 'react';
import router from 'umi/router';
import { Button, InputItem, TextareaItem } from 'antd-mobile';

import styles from './index.less';
const Index = ({ type = 3, no, total, title, analysis, rightAnswer }) => {
  const [isShowAnswer, setIsShowAnswer] = useState(false);

  const showAnswer = () => {
    setIsShowAnswer(true);
  };

  const goSubmitAnalysis = () => {
    router.push('/exam/question/submit/analysis/0');
  };

  return (
    <div className={styles.root}>
      <div className={styles.content}>
        <div className={styles.title}>
          {no}/{total}、{title}
        </div>
        <div className={styles.paper}>
          {type === 3 && (
            <div className={styles.input}>
              <InputItem placeholder="请输入" />
            </div>
          )}
          {(type === 4 || type === 6 || type === 8 || type === 9) && (
            <div className={styles.textarea}>
              <TextareaItem rows={6} placeholder="请输入" />
            </div>
          )}
        </div>
        {isShowAnswer && (
          <div className={styles.answer}>
            <div className={styles.rightAnswer}>正确答案为：{rightAnswer}</div>
            <div className={styles.analysis}>
              <span>题型解析</span>：{analysis}
            </div>
            <div className={styles.goAnalysis} onClick={goSubmitAnalysis}>
              我要解析
            </div>
          </div>
        )}
        {!isShowAnswer && (
          <div className={styles.submit}>
            <Button type="primary" onClick={showAnswer}>
              查看答案
            </Button>
          </div>
        )}
      </div>
      <div className={styles.action}>
        <div className={styles.pre}>上一题</div>
        <div className={styles.input}>
          跳转到
          <input type="text" />题
        </div>
        <div className={styles.next}>下一题</div>
      </div>
    </div>
  );
};
export default Index;