import { Component, Vue } from 'vue-property-decorator';
import { pick, omit, omitBy } from 'lodash';
import { transformStyle, isPx, pxToRem } from '@/service/utils.service';

@Component({ name: 'TransformStyleMixin' })
export default class TransformStyleMixin extends Vue {
  transformStyle(styleObj, element) {
    // console.log('transformStyle', styleObj, element);
    let style = {
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    };
    if (!styleObj) { return style; }
    for (const key of Object.keys(styleObj)) {
      if (typeof styleObj[key] === 'number') {
        if (key === 'height') { styleObj[key] = Math.ceil(styleObj[key]); }
        style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
      } else {
        style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
      }
      if (key === 'backgroundImage' && style.backgroundImage) {
        style.backgroundImage = `url(${style.backgroundImage})`;
        // style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
      }

    }
    if (element !== 'container') {
      style = omit(style, ['position', 'top', 'left']);
    }
    style = omitBy(style, v => !v);
    return style;
  }
}