Skeleton.propTypes = {
  avatar: PropTypes.oneOfType([PropTypes.bool, PropTypes.Object]), // 是否显示头像占位图
  title: PropTypes.bool, // 是否显示标题占位图
  paragraph: PropTypes.oneOfType([PropTypes.bool, PropTypes.Object]), // 是否显示段落占位图
  show: PropTypes.bool, // 是否显示骨架屏，传 false 时会展示子组件内容
  active: PropTypes.bool, // 是否开启动画
  round: PropTypes.bool, // 是否将标题和段落显示为圆角风格
};

Skeleton.defaultProps = {
  avatar: false,
  title: true,
  paragraph: true,
  show: true,
  active: false,
  round: false,
};

/** @name class前缀 */
const prefixCls = 'fly-skeleton';
  
/** @name 根元素class */
const rootCls = classnames(prefixCls, className, {
[`${prefixCls}--round`]: round,
[`${prefixCls}--active`]: active,
});

/** @name 内容class */
const contentCls = classnames(`${prefixCls}--content`);
  
return (
  <>
    {show ? (
      <div className={rootCls}>
        {avatarContent()}
        <div className={contentCls}>
          {titleContent()}
          {paragraphContent()}
        </div>
      </div>
    ) : (
      children
    )}
  </>
);

/** @name 是否展示头像 */
const hasAvatar = !!avatar;

/** @name 尺寸枚举 */
const sizgClsObj = {
  large: 'lg',
  small: 'sm',
  default: null,
};

/**
 * 获取对象属性值
 * @param {void} 无
 * @return {render} 展示内容
 */
const getTypeOfObject = prop => {
  if (prop && typeof prop === 'object') {
    return prop;
  }
  return {};
};

/**
 * 头像展示
 * @param {void} 无
 * @return {render} 展示内容
 */
const avatarContent = () => {
  if (hasAvatar) {
    /** @name 头像对象数据 */
    let avatarObj = {
      active: false,
      shape: 'circle',
      size: 'default',
      ...getTypeOfObject(avatar),
    };

    /** @name 头像父容器class */
    const headCls = classnames(`${prefixCls}__header`);

    /** @name 头像class */
    const avatarCls = `${prefixCls}__avatar`;

    /** @name 尺寸class */
    const sizeCls = sizgClsObj[avatarObj.size] && classnames(`${avatarCls}--${sizgClsObj[avatarObj.size]}`);

    /** @name 形状class */
    const shapeCls = classnames(`${avatarCls}--${avatarObj.shape}`);

    /** @name 尺寸内联样式 */
    const sizeStyle =
      typeof avatarObj.size === 'number'
        ? {
            width: avatarObj.size,
            height: avatarObj.size,
            lineHeight: `${avatarObj.size}px`,
          }
        : {};

    return (
      <div className={headCls}>
        <span className={classnames(avatarCls, sizeCls, shapeCls, className)} style={{ ...sizeStyle }} />
      </div>
    );
  }
};

/** @name 是否展示标题 */
const hasTitle = !!title;

/**
 * 获取对象属性值
 * @param {void} 无
 * @return {render} 展示内容
 */
const getTypeOfObject = prop => {
  if (prop && typeof prop === 'object') {
    return prop;
  }
  return {};
};

/**
 * 标题展示
 * @param {void} 无
 * @return {render} 展示内容
 */
const titleContent = () => {
  if (hasTitle) {
    /** @name 标题class */
    const titleCls = classnames(`${prefixCls}__title`);

    /** @name 标题style */
    const titleStyle = {
      width: !hasAvatar ? '35%' : '50%',
      ...getTypeOfObject(title),
    };

    return <h3 className={titleCls} style={titleStyle} />;
  }
};

/** @name 是否展示段落 */
const hasParagraph = !!paragraph;

/**
 * 获取对象属性值
 * @param {void} 无
 * @return {render} 展示内容
 */
const getTypeOfObject = prop => {
  if (prop && typeof prop === 'object') {
    return prop;
  }
  return {};
};

/**
 * 段落-获取段落宽度
 * @param {number} index 段落的索引
 * @param {object} obj 段落的数据对象
 * @return {number} 计算之后的宽度
 */
const getParagraphWidth = (index, obj) => {
  const { width, rows = 2 } = obj;
  // =>true: 如果width的值是数组时，设置每行对应宽度
  if (Array.isArray(width)) {
    return width[index];
  }
  // =>true: 如果width的值不是数组时，设置为最后一行的宽度
  if (rows - 1 === index) {
    return width;
  }
  return undefined;
};

/**
 * 段落展示
 * @param {void} 无
 * @return {render} 展示内容
 */
const paragraphContent = () => {
  if (hasParagraph) {
    /** @name 段落class */
    const paragraphCls = classnames(`${prefixCls}__paragraph`);
    let paragraphObj = {};

    // =>true: 有标题但是没有头像，默认3行，其他是2行
    if (!hasAvatar && hasTitle) {
      paragraphObj.rows = 3;
    } else {
      paragraphObj.rows = 2;
    }

    // => true: 没有标题或者没有头像，最后一个段落的宽度是61%
    if (!hasAvatar || !hasTitle) {
      paragraphObj.width = '61%';
    }

    // =>true: paragraph传参有值时，对默认值进行覆盖
    paragraphObj = {
      ...paragraphObj,
      ...getTypeOfObject(paragraph),
    };

    /** @name 段落的行数组 */
    const rowList = [...Array(paragraphObj.rows)].map((_, index) => <li key={index} style={{ width: getParagraphWidth(index, paragraphObj) }} />);

    return <ul className={paragraphCls}>{rowList}</ul>;
  }
};