<template>
  <view class="ml-row" :class="[className || '', status ? `ss-${status}` : '', {'is-vertical': vertical}]" @tap="tapEvent">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'MlRow',
  options: {
    virtualHost: true
  },
  props: {
    gutter: [String, Number],
    vertical: Boolean,
    status: String,
    className: String
  },
  provide () {
    return {
      mlRow: this
    }
  },
  methods: {
    tapEvent () {
      this.$emit('tap', {})
      this.$emit('click', {})
    }
  }
}
</script>

<style lang="scss">
.ml-row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 100%;
  &.is-vertical {
    flex-direction: column;
  }
  &.ss-primary {
    color: $ml-theme-primary-color;
  }
  &.ss-success {
    color: $ml-theme-success-color;
  }
  &.ss-info {
    color: #909399;
  }
  &.ss-warning {
    color: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: $ml-theme-error-color;
  }
  &.ss-gray {
    color: $ml-gray-color;
  }
  &.ss-blue {
    color: $ml-blue-color;
  }
  &.ss-green {
    color: $ml-green-color;
  }
  &.ss-pink {
    color: $ml-pink-color;
  }
  &.ss-red {
    color: $ml-red-color;
  }
  &.ss-orange {
    color: $ml-orange-color;
  }
  &.ss-purple {
    color: $ml-purple-color;
  }
}
</style>
