<template>
  <div class="ui-input">
    <img v-if="icon" :src="icon" class="icon" alt="">
    <div :style="valueStyle" class="value">{{ value }}</div>
  </div>
</template>

<script>
export default {
  filters: {
    filterValue(value) {
      return value.toFixed(2)
    },
  },
  props: {
    icon: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    bg: { // value背景图
      type: String,
      default: '',
    },
    bgHeight: {
      type: Number,
      default: 20,
    },
    lineHeight: {
      type: Number,
      default: 20,
    },
    textAlign: {
      type: String,
      default: 'right',
    },
    marginLeft: {
      type: Number,
      default: -14
    },
  },
  data() {
    return {}
  },
  computed: {
    valueStyle() {
      const { bg, bgHeight, lineHeight, textAlign, icon, marginLeft, } = this
      console.log('bgHeight', bgHeight)
      const style = {}
      style.backgroundImage = `url(${bg})`
      style.height = `${bgHeight}px`
      style.lineHeight = `${lineHeight}px`
      style.textAlign = textAlign
      if (!icon) {
        style.marginLeft = '0px'
      }
      if (marginLeft) {
        style.marginLeft = `${marginLeft}px`
      }
      return style
    },
  },
}
</script>

<style lang="scss" scoped>
.ui-input {
  display: flex;
  align-items: center;
  width: 100%;
  .icon {
    width: 40px;
    position: relative;
    z-index: 1;
  }
  .value {
    text-align: right;
    flex: 1;
    background-size: 100% 100%;
    padding: 4px 12px;
    margin-left: -14px;
  }
}
</style>
