import React, { useEffect } from 'react'
import "./style.less"
import classNames from 'classnames'
import { getPixel } from './util.js'
const { Fragment } = React
export default React.memo(Page)
function Page(props) {
  let { width, height, pos, className, ...rest } = props
  width = width || ""
  height = height || ""
  pos = pos || "left"
  className = classNames({
    "ttk-float-box": true,
    [`box-${pos}`]: true,
    [className]: !!className
  })
  // let backgroundColor = '#' + (Math.random() + '').replace('.', '').substr(0, 6)
  let style = {
    // backgroundColor
  }
  if (width) {
    style.width = getPixel(width)
  }
  if (height) {
    style.height = getPixel(height)
  }

  return (
    <Fragment>
      <div className={className} {...rest} style={style}></div>
    </Fragment>
  )
}