<template>
  <div class="component-contaier" :style="getContainetStyle" v-bind="$attrs">
    <div class="component-background" :style="getBackgroundStyle"></div>
    <div class="component-content" :style="getContentStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import { transformStyle } from "@shalu/utils";
import { pick } from "lodash";

export default defineComponent({
  name: "DContainer",
  props: {
    style: Object as PropType<Record<string, any>>,
    props: Object as PropType<Record<string, any>>,
  },
  setup(props) {
    const getContainetStyle = computed(() => {
      return {
        width: props.props?.width + "px",
        height: props.props?.height + "px",
        transform: `rotateX(${props.props?.rotateX || 0}deg) rotateY(${
          props.props?.rotateY || 0
        }deg) rotateZ(${props.props?.rotateZ || 0}deg)`,
        opacity: props.props?.opacity / 100,
        ...transformStyle(
          pick(props.style, [
            "boxShadow",
            "webkitBoxReflect",
          ])
        ),
      };
    });
    const getContentStyle = computed(() => {
      return {
        paddingLeft: props.props?.paddingLeft + "px",
        paddingRight: props.props?.paddingRight + "px",
        paddingTop: props.props?.paddingTop + "px",
        paddingBottom: props.props?.paddingBottom + "px",
        overflow: "hidden",
      };
    });

    const getBackgroundStyle = computed(() => {
      const { style = {} } = props;
      const otherStyle = transformStyle(
        pick(style, ["background", "backdropFilter", "borderRadius",
            "borderStyle",
            "borderColor",
            "borderWidth",])
      );
      return {
        position: "absolute",
        boxSizing: "border-box",
        left: 0,
        top: 0,
        opacity: style.opacity / 100,
        width: props.props?.width + "px",
        height: props.props?.height + "px",
        ...otherStyle,
      };
    });

    return {
      getContentStyle,
      getBackgroundStyle,
      getContainetStyle,
    } as any;
  },
});
</script>

<style lang="less" scoped>
.conponent-contaier {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}
</style>
