import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaLeftTree, WeaLeftRightLayout } from 'ecCom';
import { Tag } from 'antd';
import marked from 'marked';
import '../../style/index.less';
import ReactJson from 'react-json-view';
import * as API from '../../apis/index';

function parseParms(str) {
  let pieces = str.split('&'),
data = {},
i,
parts;
  // process each query pair
  for (i = 0; i < pieces.length; i++) {
    parts = pieces[i].split('=');
    if (parts.length < 2) {
      parts.push('');
    }
    data[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
  }
  return data;
}

@inject("apiDocCheck")
@observer
class Index extends React.Component {
  componentDidMount() {
    const hashStr = window.location.hash;
    const { apiDocCheck } = this.props;
    const paramsObj = parseParms(hashStr.substring(hashStr.indexOf('?') + 1));
    // apiDocCheck.getmarkapi(paramsObj)
    apiDocCheck.getTreeData(paramsObj);
    document.title = '泛微E9后端接口文档';
  }

  onTreeSelect(key) {
    const { apiDocCheck } = this.props;
    if (key.indexOf('bt_') > -1) {

    } else {
      apiDocCheck.getmarkapi({ id: key });
      // window.location.href = '/spa/smallApp/static4engine/engine.html#/apidoc/index?id=' + key;
      // window.location.reload();
    }
  }

  render() {
    // const datas = [
    //   {
    //     childs: [{ domid: 'wf_747', haschild: false, isopen: false, key: '747', name: '内部留言' }],
    //     domid: 'type_15',
    //     haschild: true,
    //     isopen: true,
    //     key: '15',
    //     name: '日常工作',
    //   },

    //   {
    //     childs: [{ domid: 'wf_1', haschild: false, isopen: false, key: '1', name: '系统提醒工作流' }],
    //     domid: 'type_1',
    //     haschild: true,
    //     isopen: true,
    //     key: '1',
    //     name: '默认流程',
    //   },
    // ];
    // http://192.168.41.216:9990/api/ec/dev/help/getmarkdown?id=1
    //     {
    //     "code": 0,
    //     "data": "##  ##\n\n概述\n\n>\n\n请求方式\n\n>GET\n\n请求地址\n\n>/api/cowork/view/getDiscussRecordCondition\n\n请求参数说明\n\n参数名 | 类型 | 描述 \n-|-|-\n__random__|String|\n_ec_browserVersion|String|\n_ec_osVersion|String|\n_ec_ismobile|String|\n_ec_browser|String|\n_ec_os|String|\nismobile|String|\n返回值类型\n\n>json\n\n返回示例\n\n>\n\n注意事项\n\n",
    //     "msgShowType": "none",
    //     "status": true
    // }

    // let strMD = "";
    // strMD = "## 概述\n\n>\n\n请求方式\n\n>GET\n\n请求地址\n\n>/api/cowork/view/getDiscussRecordCondition\n\n请求参数说明\n\n参数名 | 类型 | 描述 \n-|-|-\n__random__|String|\n_ec_browserVersion|String|\n_ec_osVersion|String|\n_ec_ismobile|String|\n_ec_browser|String|\n_ec_os|String|\nismobile|String|\n返回值类型\n\n>json\n\n返回示例\n\n>\n\n注意事项\n\n"
    const { apiDocCheck } = this.props;
    const { testRes: strMD, data, treeData, defaultKey } = apiDocCheck;
    // /wui/engine.html#/apidoc/index?id=14656
    let isJSON = false;
    let dataReturn = data.return;
    let treeDataObj = toJS(treeData);
    try {
      if (typeof JSON.parse(dataReturn) === 'object') {
        isJSON = true;
      }
    } catch (error) {
      isJSON = false;
    }
    return (
      <div style={{ height: '100%' }}>
        <div className="clearfix" style={{ padding: 10, height: '100%' }}>
          <WeaLeftRightLayout
            leftCom={<WeaLeftTree
              datas={treeDataObj}
              itemMainKey={'domid'}
              onSelect={this.onTreeSelect.bind(this)}
              defaultExpandLevel={0}
              expandedKeys={defaultKey}
            />}
            resize={true}
            leftWidth={200}
          >
            <div className="api-container">
              <div>
                <div className="markdown-body">
                  <h2 id="api-">{data.title || 'API 标题'}</h2>
                  <h3 >概述</h3>
                  <blockquote>
                    <p>{data.info}</p>
                  </blockquote>
                  <h3 >请求方式</h3>
                  <blockquote>
                    <p>{data.methodSelect}</p>
                  </blockquote>
                  <h3 >请求地址</h3>
                  <blockquote>
                    <p>{data.url}</p>
                  </blockquote>
                  <h3>版本信息</h3>
                  <table>
                    <thead>
                      <tr>
                        <th>Ecology版本</th>
                        <th>生效 KB 版本</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{data.sysversion2}</td>
                        <td>{data.patchversion2}</td>
                      </tr>
                    </tbody>
                  </table>
                  <h3 >请求参数说明</h3>
                  <table>
                    <thead>
                      <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>必填 </th>
                        <th>描述 </th>
                        <th>示例</th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.params && data.params.map((item) => {
                        let isJSON = false;
                        let dataReturn = item.demo;
                        try {
                          if (typeof JSON.parse(dataReturn) === 'object') {
                            isJSON = true;
                          }
                        } catch (error) {
                          isJSON = false;
                        }
                        return (
                          <tr>
                            <td><strong>{item.name}</strong></td>
                            <td>{item.type}</td>
                            <td>{item.required === '1' ? '必填' : '非必填'}</td>
                            <td>{item.memo}</td>
                            <td>
                              {isJSON ? (
                                <ReactJson collapsed={0} src={JSON.parse(dataReturn)} />
                              ) : (
                                  JSON.stringify(dataReturn)
                                )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                  <h3>返回值类型</h3>
                  <blockquote>
                    <p>{data.returnType}</p>
                  </blockquote>

                  <h3>返回示例</h3>
                  {isJSON ? (
                    <ReactJson collapsed={1} src={JSON.parse(dataReturn)} />
                  ) : (
                      <blockquote>
                        <p>{JSON.stringify(dataReturn)}</p>
                      </blockquote>
                    )}

                  <h3>返回参数说明</h3>
                  <table>
                    <thead>
                      <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>描述 </th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.returnData && data.returnData.map(item => (
                          <tr>
                            <td><strong>{item.name}</strong></td>
                            <td>{item.type}</td>
                            <td>{item.memo}</td>
                          </tr>
                        ))}
                    </tbody>
                  </table>

                  <h3 >注意事项</h3>
                  <blockquote>
                    <div dangerouslySetInnerHTML={data.memo} />
                  </blockquote>
                </div>
              </div>
            </div>
          </WeaLeftRightLayout>
        </div>
      </div>
    );
  }
}

export default Index;