<template>
</template>

<script>
import pageModel from "../model/page"

const styleList = ['background', 'border', 'backgroundColor', 'backgroundImage', 'backgroundSize', 'borderWidth', 'borderStyle', 'borderColor',
  'color', 'fontSize', 'fontWeight', 'fontFamily', 'borderRadius', 'gap', 'backgroundShadow', 'justifyContent', 'alignItems', 'fontShadow',
  'padding', 'margin', 'opacity', 'backgroundShow', 'borderShow', 'textShow', 'rotate']

const classList = ['animation', 'animationDuration', 'animationInfinite', 'animationDelay', 'animationDirection', 'animationCurve', 'animationShow']

const fields = new Set(['id', 'name', 'version', 'x', 'y', 'position', 'height', 'width', 'key', 'widgetIcon', 'animation']);
const unitFields = new Set(['borderRadius', 'borderWidth', 'fontSize', 'gap']);

const colorList=new Set(['background','borderColor', 'color'])

const updateStyle = function (ctx, originStyle) {
  let res = originStyle ? originStyle : {};
  let props = ctx.props;
  if (props && Object.keys(props)?.length > 0) {
    Object.keys(props).forEach(key => {
      if (!fields.has(key)) {
        if (unitFields.has(key)) {
          res[key] = props[key] + 'px'
        } else if (key === 'rotate') {
          res[key] = props[key] + 'deg';
        } else {
          res[key] = props[key]
        }
      }
    })
  }
  if (props.backgroundShow !== undefined && !props.backgroundShow) {
    res['backgroundColor'] = 'transparent'
  }
  if (props.borderShow !== undefined && !props.borderShow) {
    res['border'] = 'none'
  }
  if (props.textShow !== undefined && !props.textShow) {
    res['color'] = '#fff'
    res['fontSize'] = '12px'
  }


  return res;
}

const computedStyle = function (ctx, originStyle) {
  let res = originStyle ? originStyle : {};
  let props = ctx.props;
  if (props) {
    for (let key of styleList) {
      let v = props[key];
      if (v === undefined) {
        continue;
      }

      if (key === 'rotate') {
        v += 'deg';
      } else if (unitFields.has(key)) {
        v += 'px'
      }

      if(colorList.has(key) && v && v.indexOf('&&')===-1){
        res[key] = v
      }else{
        res[key] = v
      }

    }
    if (props.backgroundShow !== undefined && !props.backgroundShow) {
      res['backgroundColor'] = 'transparent'
    }
    if (props.borderShow !== undefined && !props.borderShow) {
      res['border'] = 'none'
    }
    if (props.textShow !== undefined && !props.textShow) {
      res['color'] = '#fff'
      res['fontSize'] = '12px'
    }

  }

  return res;
}

const updateClass = function (ctx) {
  let name = '';
  let props = ctx.props;
  if (props?.animation !== '' && (props.animationShow === undefined || props.animationShow)) {
    name += props['animation'];
    if (props['animationDuration'] && props['animationDuration'] !== 1) {
      name += " duration-" + props['animationDuration'] * 1;
    }

    if (props['animationCurve'] !== undefined && props['animationCurve']) {//曲线
      name += ' ' + props['animationCurve'];
    }

    if (props['animationInfinite'] !== undefined && props['animationInfinite']) {
      name += " infinite";
    }

    if (props['animationDelay']) {
      name += " delay-" + props['animationDelay'] * 1000;
    }
  }
  return name;
}

const computedClass = function (ctx) {
  let name = '';
  let props = ctx.props;
  if (props?.animation && (props.animationShow === undefined || props.animationShow)) {
    name += props['animation'];
    if (props['animationDuration'] && props['animationDuration'] !== 1) {
      name += " duration-" + props['animationDuration'] * 1;
    }

    if (props['animationCurve']) {//曲线
      name += ' ' + props['animationCurve'];
    }

    if (props['animationInfinite']) {
      name += " infinite";
    }

    if (props['animationDelay']) {
      name += " delay-" + props['animationDelay'] * 1000;
    }
  }
  return name;
}

const updateSelectionPropValue = function (field, value) {
  pageModel.updateSelectionPropValue(field, value)
}
const updatePropValue = function (field, value) {
  pageModel.updatePropValue(field, value)
}

const setPropValue = function (property, componentKey, field, value) {
  pageModel.setPropValue(property, componentKey, field, value)
}

const styleChanged = function (componentType, changes) {
  let result = false;
  if (styleList?.length > 0 && changes && Object.keys(changes)?.length>0) {
    Object.keys(changes).forEach(p => {
      if (styleList.indexOf(p) >-1) {
        result = true
        return true;
      }
    })
  }
  return result
}

const classChanged = function (componentType, changes) {
  let result = false;
  if (classList?.length > 0 && changes) {
    classList.some(p => {
      if (changes[p] !== undefined) {
        result = true
        return true;
      }
      return false
    })
  }
  return result
}

export default {
  name: "utils/style",
  setup() {
    return {}
  },
  updateStyle,
  updateSelectionPropValue,
  updatePropValue,
  setPropValue,
  updateClass,
  styleChanged,
  classChanged,
  computedStyle,
  computedClass,
}
</script>

