/*
* 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';

/* placeholder begin src */
import EmptyData from '../index';
/* placeholder end src */

import './index.scss';

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

<EmptyData style={{ width: '200px' }} type="small" />
`;
  const codeMedium = `
import { EmptyData } from '@ewtd/ewt';

<EmptyData style={{ width: '200px' }} type="medium" />
`;
  const codeLarge = `
import { EmptyData } from '@ewtd/ewt';

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

  return (
    <Demo>
      <h2>EmptyData 组件</h2>
      <p>空数据组件，数据为空时使用。</p>
      <h3>代码演示</h3>
      <Code sourceCode={codeSmall} buttonText="小尺寸">
        <EmptyData style={{ width: '200px' }} type="small" />
      </Code>
      <Code sourceCode={codeMedium} buttonText="默认尺寸(中)">
        <EmptyData style={{ width: '200px' }} />
      </Code>
      <Code sourceCode={codeLarge} buttonText="大尺寸">
        <EmptyData style={{ width: '200px' }} type="large" />
      </Code>
      <h3>API</h3>
      <table>
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>是否必须</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>type</td>
            <td>
              背景图片类型 (
              <Code mode="inline">small</Code>
              {' '}
              <Code mode="inline">medium</Code>
              {' '}
              <Code mode="inline">large</Code>
              )
            </td>
            <td>string</td>
            <td>否</td>
            <td><Code mode="inline">medium</Code></td>
          </tr>
          <tr>
            <td>children</td>
            <td>描述文案</td>
            <td>any</td>
            <td>否</td>
            <td>暂无数据</td>
          </tr>
          <tr>
            <td>icon</td>
            <td>自定义图片</td>
            <td>string</td>
            <td>否</td>
            <td>http://web.ewt360.com/common/eui/images/empty.png</td>
          </tr>
          <tr>
            <td>lang</td>
            <td>
              语言包类型 (
              <Code mode="inline">zh-cn</Code>
              {' '}
              <Code mode="inline">en</Code>
              )
            </td>
            <td>string</td>
            <td>否</td>
            <td><Code mode="inline">zh-cn</Code></td>
          </tr>
          <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</td>
          </tr>
        </tbody>
      </table>
    </Demo>
  );
};

export default DemoComponent;