import { computed, reactive, ref } from "vue";
import { styleIf } from "../../../types/style";
function render(props: any) {
  // 外层元素定位style
  const style = reactive<styleIf>({
    top: props.y,
    left: props.x,
    right: 0,
    bottom: 0,
    zIndex: props.zIndex,
    width: props.w,
    height: props.h,
    rotate: props.rotate,
    back_height: 0,
    back_left: 0,
    back_top: 0,
    back_width: 0,
  });
  const moveing = ref(false);
  // 计算属性  计算元素位置以及宽高
  const styleHandler = computed(() => {
    return {
      top: style.top + "px",
      left: style.left + "px",
      right: style.right + "px",
      bottom: style.bottom + "px",
      zIndex: style.zIndex,
      width: style.width + "px",
      height: style.height + "px",
      transform: `rotate(${style.rotate}deg)`,
    };
  });

  // pad 放大拖拽的点
  let targetResizeIconSize = props.resizeIconSize;
  if ((<any>window).isPad) {
    targetResizeIconSize *= 1.8;
  }
  const dragElResizeIcon = computed(() => {
    return [
      {
        class: "drag-lt",
        style: {
          top: -(targetResizeIconSize / 2) + "px",
          left: -(targetResizeIconSize / 2) + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-ct",
        style: {
          top: -(targetResizeIconSize / 2) + "px",
          left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-rt",
        style: {
          top: -(targetResizeIconSize / 2) + "px",
          right: -(targetResizeIconSize / 2) + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-rc",
        style: {
          top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
          right: -(targetResizeIconSize / 2) + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-rb",
        style: {
          bottom: -(targetResizeIconSize / 2) + "px",
          right: -(targetResizeIconSize / 2) + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-bc",
        style: {
          bottom: -(targetResizeIconSize / 2) + "px",
          left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-lb",
        style: {
          bottom: -(targetResizeIconSize / 2) + "px",
          left: -(targetResizeIconSize / 2) + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
      {
        class: "drag-lc",
        style: {
          top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
          left: -(targetResizeIconSize / 2) + "px",
          width: targetResizeIconSize + "px",
          height: targetResizeIconSize + "px",
        },
      },
    ];
  });
  const guideBaseStyle = computed(() => {
    return [
      {
        top: 0,
        borderTop: "1px dashed #58B0E9",
        width: "100vw",
        left: `calc(-50vw + ${<number>style.width / 2}px)`,
      },
      {
        left: 0,
        borderLeft: "1px dashed #58B0E9",
        height: "100vh",
        top: `calc(-50vh + ${<number>style.height / 2}px)`,
      },
      {
        right: 0,
        borderRight: "1px dashed #58B0E9",
        height: "100vh",
        top: `calc(-50vh + ${<number>style.height / 2}px)`,
      },
      {
        bottom: 0,
        borderBottom: "1px dashed #58B0E9",
        width: "100vw",
        left: `calc(-50vw + ${<number>style.width / 2}px)`,
      },
    ];
  });
  return {
    style,
    moveing,
    styleHandler,
    dragElResizeIcon,
    guideBaseStyle,
  };
}

export default render;
