<template>
  <el-row :gutter="currentConfig.gutter" :type="currentConfig.type" :justify="currentConfig.justify"
          :align="currentConfig.align">
    <slot></slot>
  </el-row>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  interface RowConfig {
    gutter?: number, // 栅格间隔
    type?: string, // 布局模式，可选 flex，现代浏览器下有效
    justify?: string, // flex 布局下的水平排列方式
    align?: string // flex 布局下的垂直排列方式
  }

  @Component({
    name: 'mcRow'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config!: RowConfig;
    defaultConfig: RowConfig = {
      gutter: 16,
      justify: "start",
      align: "top"
    };

    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }
  }
</script>

