<template>
  <view
    class="ml-col"
    :class="[className || '', span && !width ? `span-${span}` : '', wrap ? `normal-wrap` : '', align ? `align-${align}` : '', verticalAlign ? `vertical-${verticalAlign}` : '', {'is-light': light, 'is-flex': verticalAlign || flex, 'is-shrink': shrink, 'is-fixed': width || shrink, 'is-important': important, 'is-ellipsis': ellipsis}]"
    :style="styles"
    @tap="tapEvent">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'MlCol',
  options: {
    virtualHost: true
  },
  props: {
    span: [String, Number],
    important: Boolean,
    light: Boolean,
    flex: Boolean,
    wrap: Boolean,
    shrink: Boolean,
    align: String,
    ellipsis: Boolean,
    verticalAlign: String,
    width: String,
    className: String
  },
  inject: {
    row: {
      from: 'mlRow',
      default: null
    }
  },
  computed: {
    styles () {
      const wSys = this.width ? `width: ${this.width};` : ''
      let pdSys = ''
      if (this.row && this.row.gutter) {
        pdSys = `padding-left: ${this.row.gutter}; padding-right: ${this.row.gutter}`
      }
      return `${wSys}${pdSys}`
    }
  },
  methods: {
    tapEvent () {
      this.$emit('tap', {})
      this.$emit('click', {})
    }
  }
}
</script>

<style lang="scss">
.ml-col {
  $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
          37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
  // &.is-light {
  //   color: rgba(0, 0, 0, 0.45);
  // }
  &.is-important {
    color: $ml-font-color;
    padding-bottom: 10rpx;
    font-size: $ml-base-font-size;
  }
  &.is-shrink {
    flex-shrink: 0;
  }
  &.is-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.normal-wrap,
  &.is-important {
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: keep-all;
  }
  &.is-flex {
    display: flex;
    flex-direction: row;
    &.align-left {
      justify-content: left;
    }
    &.align-center {
      justify-content: center;
    }
    &.align-right {
      justify-content: right;
    }
    &.vertical-center {
      align-items: center;
    }
  }
  &.align-left {
    text-align: left;
  }
  &.align-center {
    text-align: center;
  }
  &.align-right {
    text-align: right;
  }
  &:not(.is-fixed) {
    flex-grow: 1;
  }
  @for $index from 0 to length($spans) {
    &.span-#{$index + 1} {
      width: nth($spans, $index + 1);
    }
  }
}
</style>
