<template>
  <view class="render-dict" :class="ddClassBind">
    <slot>{{ valueText }}</slot>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import MIX_DD_CLASS from '@/mixins/ddclass';

export default {
  mixins: [MIX_DD_CLASS],
  props: {
    dict: String,
    value: String,
    filter: Function,
  },
  computed: {
    ...mapGetters(['dictValue']),
    valueText: function() {
      if (this.filter) {
        return this.filter(this.dictValue(this.dict, this.value));
      }
      return this.dictValue(this.dict, this.value);
    },
  }
};
</script>

<style lang="scss">
.render-dict {
  display: inline-flex;
  align-items: center;
}
</style>