<template>
  <div class="mt-cell" :style="cellStyle">
      <div class="mt-cell__title" :style="labelStyle">
        {{label}}
        <slot name ="label"></slot>
      </div>
      <div class="mt-cell__info" :style="infoStyle">
        <slot></slot>
      </div>
  </div>
</template>
<script>
export default {
  name: 'MtCell',
  componentName: 'MtCell',
  data () {
    return {
    }
  },
  props: {
    label: {
      type: String,
      default: ''
    }
  },
  computed: {
    cellStyle () {
      return this.group.labelHeight ? { lineHeight: this.group.labelHeight } : {}
    },
    infoStyle () {
      return {
        marginLeft: this.group.labelWidth ? this.group.labelWidth : ''
      }
    },
    labelStyle () {
      return {
        width: this.group.labelWidth,
        textAlign: this.group.labelPosition
      }
    },
    group () {
      let parent = this.$parent
      let parentName = parent.$options.componentName

      while (parentName !== 'MtGroup') {
        if (parentName === 'MtCell') {
          this.isNested = true
        }
        parent = parent.$parent
        parentName = parent.$options.componentName
      }
      return parent
    }
  }
}
</script>

<style lang="less">
  .mt-cell{
    overflow: hidden;
    .mt-cell__title{
      padding: 0 5px;
      box-sizing: border-box;
      float: left;
    }
    .mt-cell__info{
      display: block;
    }
  }
</style>
