<template>
  <div class="ui-input">
    <img :src="icon" class="icon" alt="">
    <div :style="valueStyle" class="value">{{ value | filterValue }}</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: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    valueStyle() {
      const { bg } = this
      const style = {}
      style.backgroundImage = `url(${bg})`
      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>
