<template>
  <div
    class="flex-row"
    style="align-items: center; height: 30px; margin-top: 10px"
  >
    <div :class="'top-t ' + topTClass"></div>
    <div :class="'top-title ' + topTitleClass">{{ title }}</div>
    <div class="buttons">
      <slot name="buttons" />
    </div>
  </div>
</template>


<script>
const topTMap = {
  small: ["top-t-small", "top-title-small"],
  middle: ['top-t-middle', 'top-title-middle'],
  large: ["top-t-large", "top-title-large"],
};
export default {
  props: {
    title: {
      type: String,
      default: "-",
    },
    size: {
      type: String,
      default: "small",
    },
  },
  computed: {
    topTClass() {
      return topTMap[this.size][0];
    },
    topTitleClass() {
      return topTMap[this.size][1];
    }
  },
};
</script>

<style lang="less" scoped>
.top-t {
  border-radius: 3px;
}
.top-t-small {
  width: 3px;
  height: 8px;
}

.top-t-middle {
  width: 3px;
  height: 12px;
}

.top-t-large {
  width: 3px;
  height: 16px;
}

.top-title {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
}
.top-title-small {
  font-size: 12px;
  margin-left: 10px;
}

.top-title-middle {
  font-size: 14px;
  margin-left: 10px;
}

.top-title-large {
  font-size: 16px;
  margin-left: 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.buttons {
  position: absolute;
  right: 2.5vw;
}
</style>
