<template>
  <div
    class="ui-chart-compare"
    :class="{'is-reduce': reduce, 'is-increase': increase}"
  >
    <span class="ui-chart-compare__value" v-if="hasValue">{{ value }}</span>
    <span class="ui-chart-compare__compare" v-if="hasCompare">{{ compare }}</span>
    <span class="ui-chart-compare__label">{{ label }}</span>
  </div>
</template>
<script>
export default {
  name: 'UiChartCompare',
  props: {
    label: {
      type: String
    },
    value: {
      type: [String, Number]
    },
    compare: {
      type: [String, Number]
    }
  },
  computed: {
    increase() {
      if (!this.compare) {
        return
      }
      return this.compare > 0
    },
    reduce() {
      if (!this.compare) {
        return
      }
      return this.compare < 0
    },
    hasValue() {
      return this.value !== undefined && this.value !== null && this.value !== ''
    },
    hasCompare() {
      return this.compare !== undefined && this.compare !== null && this.compare !== ''
    }
  }
}
</script>
<style lang="less">
.ui-chart-compare{
  height: 24px;
  line-height: 24px;
  &.is-reduce{
    .ui-chart-compare__compare{
      color: #F91B22;
    }
  }
  &.is-increase{
    .ui-chart-compare__compare{
      color: #4FC502;
      &:before {
        content: '+';
        display: inline-block;
      }
    }
  }
}
.ui-chart-compare__label{
  display: inline-block;
  position: relative;
  padding-left: 7px;
  margin-left: 6px;
  font-size: 12px;
  color: #606C80;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 1px;
    background-color: #D5D8DC;
  }
}
.ui-chart-compare__compare{
  font-weight: bold;
  font-size: 12px;
}
.ui-chart-compare__value{
  font-size: 16px;
  font-weight: bold;
  margin-right: 24px;
}
</style>
