<script>
export default {
  name: 'ElDataTableColumn',
  props: {
    dataKey: { default: '', type: String },
    label: { default: '', type: String },
    sortable: { default: false, type: Boolean },
    sortMethod: { type: Function },
    enableLink: { default: true, type: Boolean },
    width: { default: 'auto', type: String },
    minWidth: { default: 'auto', type: String },
    summaryValue: { type: Function },
    tooltip: { type: String, default: '' },
    dataType: {
      type: String,
      default: '',
      validator: value => !value || ['date', 'money'].includes(value)
    },
    align: {
      type: String,
      default: 'left',
      validator: value => ['left', 'center', 'right'].includes(value)
    }
  },
  render: function(h) {
    return h();
  },
  data: function() {
    return {
      sortOrder: null,
      visible: true
    };
  },
  computed: {
    dataTemplate: function() {
      return this.$scopedSlots.default;
    },

    labelTemplate: function() {
      return this.$scopedSlots.label;
    },

    computedAlign() {
      if (this.dataType === 'money') return 'right';
      return this.align;
    }
  },
  methods: {
    setVisibility: function(visible) {
      this.visible = visible;
    }
  }
};
</script>
