<template>
  <view class="view-item" :class="classBind">
    <view class="view-item__label"><slot name="title">{{ title || '' }}</slot></view>
    <view class="view-item__value" :class="align">
      <slot v-if="$slots.default || $slots.$default"></slot>
      <text v-else>{{ value || '' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'view-item',
  props: {
    title: String,
    value: [String, Number],
    align: {
      type: String,
      default: 'left'
    }
  },
  computed: {
    classBind: function() {
      if (this.$options && this.$options.propsData && this.$options.propsData.className) {
        return this.$options.propsData.className;
      }
      return '';
    },
  }
}
</script>

<style lang="scss">
.view-item__value {
  padding-right: $padding-sm;
  &.left {
    justify-content: flex-start;
  }
  &.right {
    justify-content: flex-end;
  }
}
</style>
