<template>
  <el-table-column :label="config.label"
                   :prop="config.key"
                   :sortable="config.sortable"
                   :filters="config.filters"
                   :filter-multiple="config.filterMultiple"
                   :filter-method="config.filterMethod"
                   :sort-orders="config.sortOrders"
                   :sort-method="config.sortMethod"
                   :fixed="config.fixed"
                   :min-width="config.minWidth"
                   :width="config.width"
                   :resizable="config.resizable"
                   :show-overflow-tooltip="config.showOverflowTooltip"
                   :header-align="config.headerAlign"
                   :class-name="config.className"
                   :label-class-name="config.labelClassName"
                   :align="config.align || ((config.type === 'operation') ? 'center' : 'left')">
    <template slot-scope="scope">
      <column-content v-if="!$scopedSlots.default" :scope="scope" :config="config"></column-content>
      <slot :row="scope.row" :$index="scope.$index" :column="scope.column"></slot>
    </template>
    <slot v-if="$slots.default"></slot>
  </el-table-column>
</template>
<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';
  import ColumnContent from './column-content';

  interface ColumnConfig {
    type?: string,
    label: string,
    key: string,
    align?: string,
    width?: string,
    minWidth?: string,
    headerAlign?: string,
    className?: string,
    labelClassName?: string,
    showOverflowTooltip?: boolean,
    resizable?: boolean,
    sortable?: boolean,
    sortOrders?: any,
    sortMethod?: Function,
    filters?: any,
    filterMultiple?: boolean,
    filterMethod?: Function,
    fixed?: string | boolean,
    inputType?: string,
    imgWidth?: string | number,
    imgHeight?: string | number,
    tagType?: string,
    radiusable?: boolean,
    isInput?: boolean,
    list?: any
  }

  @Component({
    components: { ColumnContent }
  })
  export default class MuTableColumn extends Vue {
    @Prop({ default: () => [] }) private config: ColumnConfig;
    defaultConfig: any = {
      type: 'text',
      align: 'left',
      resizable: true,
      sortOrders: ['ascending', 'descending', null]
    };

    mounted() {
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) this.config[key] = this.defaultConfig[key];
      });
    }

  }
</script>
