<template>
  <RenderAside v-bind="prop" />
</template>

<script lang="tsx" setup name="LjFoldLayoutAside">
import { ref, useSlots } from "vue";
// import { ArrowLeft, ArrowRight, Right } from "@element-plus/icons-vue";
import { useDesign } from "@/hooks/useDesign";
import { computed } from "vue";

export interface LjFoldLayoutAside {
  /**
   * @argument string 按钮类型
   */
  buttonType?: "button" | "bar";
  /**
   * @argument string 侧栏最小宽度，支持px、%, 默认：px
   */
  minWidth?: string | number;
  /**
   * @argument string 侧栏最大宽度，支持px、%, 默认：px
   */
  maxWidth?: string | number;
  /**
   * @argument number 侧栏宽度，仅支持%
   */
  width?: number;
  /**
   * @argument string 侧栏自动隐藏距离，支持px、%, 默认：px
   */
  autoHideWidth?: string | number;
  styleAttr?: string;
}

const prop = withDefaults(defineProps<LjFoldLayoutAside>(), {
  buttonType: "bar",
  minWidth: "unset",
  maxWidth: "unset",
  width: 300,
  autoHideWidth: "40%",
  styleAttr: "width"
});

const unit = ref("px");

const { prefixCls } = useDesign("fold-layout");

const slots = useSlots();

const getNumber = (value: number | string) => {
  let matches = value.toString().match(/\d+/);
  return matches ? Number(matches[0]) : 0;
};

const isCollapsed = computed(() => {
  return prop.width == getNumber(prop.minWidth);
});

const asideStyle = computed(() => {
  if (prop.styleAttr === "width") {
    return { width: prop.width + unit.value, minWidth: prop.minWidth, maxWidth: prop.maxWidth };
  } else {
    return { height: prop.width + unit.value, minHeight: prop.minWidth, maxHeight: prop.maxWidth };
  }
});

const RenderAside = () => {
  let _width = isNaN(Number(prop.width)) ? getNumber(prop.width) : Number(prop.width);
  return (
    <>
      {
        <aside
          class={`${prefixCls}-aside ${isCollapsed.value ? "is-collapsed" : ""}`}
          style={asideStyle.value}
          v-show={_width > 0}
        >
          {slots.default && slots.default?.()}
        </aside>
      }
    </>
  );
};
</script>
