/*
 * @Description: 显示tab中的内容 
 * @Author: tangjiang 
 * @Date: 2019-11-18 10:43:03 
 * @Last Modified by: tangjiang
 * @Last Modified time: 2019-11-18 11:35:12
 */
import './index.scss';
import React, { PureComponent } from 'react';
import { Icon } from 'antd';

const tabCtx = (ctx, props) => (<p {...props}>{ctx}</p>);
const loadingCtx = (<span className={'ctx_loading'}><Icon className={'ctx_icon'} type="loading"/>加载中...</span>);
const loadedCtx = (<span className={'ctx_loaded'}><Icon className={'ctx_icon'} type="loading"/>加载完成</span>);
const maps = {
  // default: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_default pos_${position}`}>{ctx}</p>),
  // loading: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_loading pos_${position}`}>{ctx}</p>),
  // loaded: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_loaded pos_${position}`}>{ctx}</p>),
  // final: (ctx, position) => (<p className={`tab_ctx_area tab_ctx_final pos_${position}`}>{ctx}</p>)
  default: (ctx, position) => tabCtx(ctx, { className: `tab_ctx_area tab_ctx_default pos_${position}` }),
  loading: (ctx, position) => tabCtx(loadingCtx, { className: `tab_ctx_area tab_ctx_loading pos_${position}` }),
  loaded: (ctx, position) => tabCtx(loadedCtx, { className: `tab_ctx_area tab_ctx_loaded pos_${position}` }),
  final: (ctx, position) => tabCtx(ctx, { className: `tab_ctx_area tab_ctx_final pos_${position}` })
}

export default class InitTabCtx extends PureComponent {

render () {
    /**
     * @param state 当前状态  default: 显示提示信息 init: 加载初始内容  loading: 加载中  loaded: 加载完成 final: 显示最终内容
     * @param position: start | cetner | end
     * @returns
     */
    const { state, ctx, position = 'start' } = this.props;
    return(
      <React.Fragment>
        { maps[state](ctx, position) }
      </React.Fragment>
    )
  }
}