<template>
  <div class="ui-chart-hinge">
    <div class="ui-chart-hinge__value">{{ value }}</div>
    <div
      class="ui-chart-higne__main"
      v-if="$slots.legend || $slots.addon"
    >
      <div
        class="ui-chart-hinge__legend"
        v-if="$slots.legend"
      >
        <slot name="legend" />
      </div>
      <div
        class="ui-chart-hinge__addon"
        v-if="$slots.addon"
      >
        <slot name="addon" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UiChartHinge',
  props: {
    value: {
      type: [Number, String]
    }
  }
}
</script>
<style lang="less">
.ui-chart-hinge{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.ui-chart-hinge__value,
.ui-chart-higne__main{
  flex: 1;
}
.ui-chart-higne__main{
  margin-left: 12px;
}
.ui-chart-hinge__value {
  line-height: 1.5em;
  font-size: 48px;
  margin-top: 24px;
}
.ui-chart-hinge__legend{
  height: 64px;
  margin-bottom: 3px;
}
.ui-chart-hinge__addon{
  height: 24px;
  line-height: 24px;
}
</style>
