import React, { useState } from 'react';
import router from 'umi/router';

import styles from './index.less';
import { Button } from 'antd-mobile';
import Option from './option';
const Index = ({ type = 0, analysis, title, total, no, rightAnswer, optionList = [] }) => {
  const [isShowAnswer, setIsShowAnswer] = useState(false);
  const [options, setOptions] = useState(optionList);

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

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


  const handleSelect = (id, isSelected) => {
    options.forEach(item => {
      if(type===0){
        item.isSelected = false;
      }
      if (id === item.id) item.isSelected = isSelected;
      
    });
    setOptions([...options]);
  };

  /**
   * 渲染选项
   */
  const renderOption = () => {
    return options.map((item, index) => {
      return <Option {...item} isShowAnswer={isShowAnswer} onSelect={handleSelect} />;
    });
  };

  return (
    <div className={styles.root}>
      <div className={styles.content}>
        <div className={styles.title}>
          {no}/{total}、{title}
        </div>
        <div className={styles.options}>{renderOption()}</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;