<template>
  <div class="lj-define-header flx-justify-between" :class="size">
    <div class="header-l" :class="{ simple: simple, small: size == 'small' }">
      <slot name="title" :textSize="textSize">
        <span :class="textSize">{{ title }}</span>
      </slot>
      <slot name="label" :textSize="textSizeLabel">
        <span v-if="label" :class="textSizeLabel" class="ml-4 text-disable">{{ label }}</span>
      </slot>
    </div>
    <div class="header-r">
      <slot name="toolButton"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup name="LjHeader">
import { computed } from "vue";

interface ljHeaderProps {
  /**
   * @argument string 标题
   */
  title?: string;
  /**
   * @argument string 副标题
   */
  label?: string;
  /**
   * @argument string 字体大小，'small' | 'default' | 'large'
   */
  size?: "small" | "default" | "large";

  /**
   * @argument boolean 仅有文字
   */
  simple?: boolean;
}

const props = withDefaults(defineProps<ljHeaderProps>(), {
  title: "",
  label: "",
  size: "default",
  simple: false
});

const textSize = computed(() => {
  let cls = "";
  switch (props.size) {
    case "small":
      cls = "text-body-b";
      break;
    case "large":
      cls = "text-h3-m";
      break;
    default:
      cls = "text-h5-b";
      break;
  }
  return cls;
});

const textSizeLabel = computed(() => {
  let cls = "";
  switch (props.size) {
    case "small":
      cls = "text-f-c";
      break;
    case "large":
      cls = "text-h5-r";
      break;
    default:
      cls = "text-body-r";
      break;
  }
  return cls;
});
</script>

<style lang="scss" scoped>
// 表格 header 样式
.lj-define-header {
  &.small {
    padding-bottom: $space-a1;
  }
  &.default {
    padding-bottom: $space-b1;
  }
  &.large {
    padding-bottom: $space-b2;
  }
  .header-l {
    position: relative;
    // height: 42px;
    &:not(.simple) {
      padding-left: 28px;
    }
    &:not(.simple)::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 2px;
      width: 12px;
      height: 12px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: $color-primary-500;
      z-index: 2;
    }
    &:not(.simple)::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 11px;
      width: 12px;
      height: 12px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: $color-primary-900;
      z-index: 1;
    }
    &.small::before,
    &.small::after {
      width: 10px;
      height: 10px;
    }

    &.small::before {
      left: 4px;
    }
  }
  // .header-r {
  // }
  .el-button {
    margin-bottom: 15px;
  }
}
</style>
