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

<script>
export default {
  name: 'ZCell',
  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">
.z-cell {
  box-sizing: border-box;
  display: flex;
  font-size: 14px;
  &__title {
    color: #999999;
    padding-right: 20rpx;
  }
  &__value {
    color: #2B2A27;
    flex: auto;
    display: flex;
    &.left {
      justify-content: flex-start;
    }
    &.right {
      justify-content: flex-end;
    }
  }
}
</style>
