/*
 * @Author: yuananting
 * @Date: 2021-02-25 13:46:35
 * @LastEditors: yuananting
 * @LastEditTime: 2021-03-09 11:19:01
 * @Description: 助学工具-题库-题目管理-新增题目
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { Component } from "react";
import { Tabs, Button, Tooltip } from "antd";
import Breadcrumbs from "@/components/Breadcrumbs";
import ShowTips from "@/components/ShowTips";
import "./AddNewQuestion.less";
import NewQuestionTab from "./components/NewQuestionTab";
import { defineQuestionData } from "./components/model";

const { TabPane } = Tabs;
class AddNewQuestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "THE_RADIO",
      singleContent: defineQuestionData("THE_RADIO"), // 单选题内容
      multipleContent: defineQuestionData("MULTI_SELECT"), // 多选题内容
      judgeContent: defineQuestionData("JUDGE"), // 多选题内容
      completionContent: defineQuestionData("COMPLETION"), // 填空题内容
      indefiniteContent: defineQuestionData("INDEFINITE_SELECT"), // 不定项选择题内容
    };
  }

  componentDidMount() {}

  saveCurrentQuestion = () => {
    switch (this.state.activeKey) {
      case "THE_RADIO":
        console.log(this.singleRef)
        this.singleRef.checkInput();
        break;
      case "MULTI_SELECT":
        this.multipleRef.checkInput();
        break;
      case "JUDGE":
        this.judgeRef.checkInput();
        break;
      case "COMPLETION":
        this.CompletionRef.checkInput();
        break;
      case "INDEFINITE_SELECT":
        this.indefiniteRef.checkInput();
        break;
    }
  };

  render() {
    const {
      activeKey,
      singleContent,
      multipleContent,
      judgeContent,
      completionContent,
      indefiniteContent,
    } = this.state;
    return (
      <div className="page add-new-question">
        <Breadcrumbs navList="新增题目" goBack={() => RCHistory.goBack()} />
        <div className="box">
          <div className="show-tips">
            <ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
          </div>
          <Tabs
            style={{ marginTop: 32 }}
            activeKey={activeKey}
            onChange={(activeKey) => {
              this.setState({ activeKey });
            }}
          >
            <TabPane
              tab={<span className="icon iconfont">&#xe7fa; 单选题</span>}
              key="THE_RADIO"
            >
              <NewQuestionTab
                questionTypeKey="THE_RADIO"
                onRef={(ref) => {
                  this.singleRef = ref;
                }}
                questionContent={singleContent}
                onSetState={(newContent) => {
                  Object.assign(singleContent, newContent);
                }}
              />
            </TabPane>
            <TabPane
              tab={<span className="icon iconfont">&#xe7fb; 多选题</span>}
              key="MULTI_SELECT"
            >
              <NewQuestionTab
                questionTypeKey="MULTI_SELECT"
                onRef={(ref) => {
                  this.multipleRef = ref;
                }}
                questionContent={multipleContent}
                onSetState={(newContent) => {
                  Object.assign(multipleContent, newContent);
                }}
              />
            </TabPane>
            <TabPane
              tab={<span className="icon iconfont">&#xe7fc; 判断题</span>}
              key="JUDGE"
            >
              <NewQuestionTab
                questionTypeKey="JUDGE"
                onRef={(ref) => {
                  this.judgeRef = ref;
                }}
                questionContent={judgeContent}
                onSetState={(newContent) => {
                  Object.assign(judgeContent, newContent);
                }}
              />
            </TabPane>
            <TabPane
              tab={<span className="icon iconfont">&#xe7fd; 填空题</span>}
              key="COMPLETION"
            >
              <NewQuestionTab
                questionTypeKey="COMPLETION"
                onRef={(ref) => {
                  this.CompletionRef = ref;
                }}
                questionContent={completionContent}
                onSetState={(newContent) => {
                  Object.assign(completionContent, newContent);
                }}
              />
            </TabPane>
            <TabPane
              tab={
                <span className="icon iconfont">
                  &#xe7fe; 不定项选择题{" "}
                  <Tooltip title="至少有一项正确，至多不限的选择题，多项选择题的一种特殊形式">
                    <span style={{ color: "#BFBFBF" }}>&#xe7c4;</span>
                  </Tooltip>
                </span>
              }
              key="INDEFINITE_SELECT"
            >
              <NewQuestionTab
                questionTypeKey="INDEFINITE_SELECT"
                onRef={(ref) => {
                  this.indefiniteRef = ref;
                }}
                questionContent={indefiniteContent}
                onSetState={(newContent) => {
                  Object.assign(indefiniteContent, newContent);
                }}
              />
            </TabPane>
          </Tabs>
        </div>
        <div className="footer">
          <Button>取消</Button>
          <Button>保存并继续添加</Button>
          <Button
            type="primary"
            onClick={() => {
              this.saveCurrentQuestion();
            }}
          >
            保存
          </Button>
        </div>
      </div>
    );
  }
}

export default AddNewQuestion;
