/*
* annotation like `placeholder begin *** and
* placeholder end ***` is required for generate ewt manual, please keep it
*/
import React from 'react';
import Code from '@/Code';
import Demo from '@/Demo';

// import { Question, Answer, Report } from '@/Words';
import Words from '@/Words';

import './index.scss';
import '../../../index.scss';

const reportData =  {
  "snapStepId": "190",
  "title": "多受任革活党1多受任革活党1",
  "classPercent": 60,
  "gradePercent": 80,
  "count": 3,
  "rightCount": 0,
  "testCount": 3,
  "canNext": false,
  "canWrongTest": true,
  "wrongTestRounds": 2,
  "finishPercent": 50,
  "masterPercent": 70
}

const DemoComponent = () => {
  const codeSmall = `
import { EmptyData } from '@ewtd/ewt';

<EmptyData style={{ width: '200px' }} type="small" />
`;

  return (
    <Demo>
      <h2>Words 组件</h2>
      <p>空数据组件，数据为空时使用。</p>
      <h3>代码演示</h3>
      <Code sourceCode={codeSmall} buttonText="小尺寸">
        <Words env="mock" platform={1} showCountDown countDownTime={20} loadingNode={(<div>加载中...</div>)} />

        {/* <Question /> */}
      </Code>
      {/* <h3>代码演示</h3>
      <Code sourceCode={codeSmall} buttonText="小尺寸">
        <Answer />
      </Code> */}
      <h3>代码演示</h3>
      <Code sourceCode={codeSmall} buttonText="小尺寸">
        <Words.Report dataSource={reportData} snapPlanId="1" snapStepId="1" />
      </Code>
      <h3>API</h3>
      <table>
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>是否必须</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>className</td>
            <td>添加自定义class</td>
            <td>string</td>
            <td>否</td>
            <td><Code mode="inline">&#39;&#39;</Code></td>
          </tr>
          <tr>
            <td>style</td>
            <td>自定义样式</td>
            <td>object</td>
            <td>否</td>
            <td><Code mode="inline">{'{}'}</Code></td>
          </tr>
          <tr>
            <td>prefixCls</td>
            <td>样式名前缀</td>
            <td>string</td>
            <td>否</td>
            <td>ewt-homework-template</td>
          </tr>
        </tbody>
      </table>
    </Demo>
  );
};

export default DemoComponent;