<template>
  <mu-table-column :config="config">
    <template v-for="(item, index) in config.columns" v-if="config.columns">
      <mu-column-item :config="item" :key="index" v-if="item.type !=='slot'"></mu-column-item>
      <slot :name="item.name" v-else></slot>
    </template>
  </mu-table-column>
</template>
<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';

  interface TableConfig {
    type: string,
    label: string,
    key: string,
    align?: string,
    width?: string,
    minWidth?: string,
    showOverflowTooltip?: boolean,
    resizable?: boolean,
    sortable?: boolean,
    fixed?: string | boolean,
    inputType?: string,
    imgWidth?: string | number,
    imgHeight?: string | number,
    tagType?: string,
    radiusable?: boolean,
    list?: any,
    isInput?: boolean,
    columns?: any
  }

  @Component({
    name: 'muColumnItem'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config: TableConfig;
  }
</script>
