/*
 * @Description: 
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-11-27 09:49:30
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-09 19:21:55
 */
import '../index.scss';
import React from 'react';
import { Tag } from 'antd';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import QuillEditor from '../../../quillEditor';
import CONST from '../../../../../constants';
const {tagBackground, diffText} = CONST;

const TaskDescription = (props) => {

  const { hack = {} } = props;
  const {language, difficult, time_limit, username, description} = hack;
  return (
    <div className={'task_description_area'}>
      <div className={'desc_area_header'}>
        <p className={'header_flex'}>
          <span className={'flex_label'}>编程语言:</span>
          <span className={'flex_value'}>{language}</span>
        </p>
        <p className={'header_flex'}>
          <span className={'flex_label'}>难度:</span>
          <Tag color={tagBackground[+difficult]}>{diffText[+difficult]}</Tag>
        </p>
        <p className={'header_flex'}>
          <span className={'flex_label'}>程序运行时间限制:</span>
          <span className={'flex_value'}>{time_limit}秒</span>
        </p>
        <p className={'header_flex'}>
          <span className={'flex_label'}>出题者:</span>
          <Link to="/" style={{ color: '#5091FF'}}>{username}</Link>
        </p>
      </div>
      <div className="task_desc_area">
        <QuillEditor 
          htmlCtx={description}
          readOnly={true}
        />
      </div>
      {/* <QuillEditor 
        htmlCtx={description}
        readOnly={true}
        options={[]}
        style={{ backgroundColor: 'gold' }}
      /> */}
      {/* <div dangerouslySetInnerHTML={{__html: description}}></div> */}
    </div>
  )
}

const mapStateToProps = (state) => {
  const { hack } = state.ojForUserReducer;
  return {
    hack
  }
}

export default connect(
  mapStateToProps
)(TaskDescription);