function replacePx(val) {
  return +(val || '').replace('px', '');
}

function transValToRem(str) {
  return str.split(' ').map((val) => `${(replacePx(val) / 50)}rem`).join(' ');
}

/*
* 传入tabbar信息：高度，hasTabBar
* */
function addTabbarInfo(componentList, hasTabBar, height) {
  return componentList.map(item => {
    item.componentData.tabbarInfo = {
      hasTabBar,
      height,
    };
    return item;
  });
}


/*
* 页面背景颜色显示
* */
function getWrapperStyle(extInto) {
  const {
    backgroundColor,
  } = extInto || {};
  return `background-color:${backgroundColor || '#f1f1f1'}`;
}

/*
* 增加组件的margin和padding 逻辑
* */
function getMarginStyle(componentData) {
  const styles = [];
  const {
    componentExtInfo,
  } = componentData;
  const {
    padding,
    // customZIndex,
    wrapperModes = 'margin\npadding\ncardMode',
    margin = '0 0 12px 0',
  } = componentExtInfo;

  const parseWrapperModes = wrapperModes.split('\n');

  if (margin && parseWrapperModes.indexOf('margin') > -1) {
    styles.push(
      `margin:${transValToRem(margin)}`,
    );
  }

  if (padding && parseWrapperModes.indexOf('padding') > -1) {
    styles.push(
      `padding:${transValToRem(padding)}`,
    );
  }

  // if (customZIndex) {
  //   styles.push('position:relative');
  //   styles.push(`z-index:${customZIndex}`);
  // }

  return styles.join(';');
}

export default {
  getMarginStyle,
  getWrapperStyle,
  addTabbarInfo,
};
