<template>
  <el-table-column
    :index="columnIndex" :column-key="column.columnKey"
    :prop="column.prop" :label="column.label" :width="column.minWidth ? '-' : (column.width || 140)"
    :minWidth="column.minWidth || column.width || 140" :fixed="column.fixed"
    :render-header="column.renderHeader" :sortable="column.sortable" :sort-method="column.method"
    :resizable="column.resizable" :formatter="column.formatter"
    :align="column.align" :header-align="column.headerAlign || column.align"
    :class-name="column.className" :label-class-name="column.labelClassName"
    :selectable="column.selectable" :reserve-selection="column.reserveSelection"
    :filters="column.filters" :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
    :filter-method="column.filterMethod" :filtered-value="column.filteredValue">

    <template v-if="column.children">
      <bio-column v-for="(cColumn, cColumnIndex) in column.children" :key="cColumnIndex" :column="cColumn"/>
    </template>

    <template slot="header" slot-scope="scope">
      <slot v-if="column.headerSlot" name="perSlot" soltName="head" :row="scope.column" :$index="scope.$index"></slot>

      <template v-else>
        {{ scope.column.label }}
      </template>
    </template>

    <template slot-scope="scope">
      <template v-if="column.filter">
        <span
          v-if="column.useRowForFilter"
          :class="{'only-one-line' : column.showOverflowTooltip}"
          :title="column.showOverflowTooltip ? Vue.filter(column.filter)(scope.row) : ''">
          {{ Vue.filter(column.filter)(scope.row) }}
        </span>

        <span
          v-else
          :class="{'only-one-line' : column.showOverflowTooltip}"
          :title="column.showOverflowTooltip ? Vue.filter(column.filter)(scope.row[column.prop]) : ''">
          {{ Vue.filter(column.filter)(scope.row[column.prop]) }}
        </span>
      </template>

      <slot
        v-else-if="column.slotName"
        name="perSlot"
        :soltName="column.slotName"
        :row="scope.row"
        :columnProp="column.prop"
        :$index="scope.$index"/>

      <span
        v-else-if="column.render"
        :class="{'only-one-line' : column.showOverflowTooltip}"
        :title="column.showOverflowTooltip ? column.render(scope.row) : ''">
        {{ column.render(scope.row) }}
      </span>

      <div v-else-if="column.htmlRender" v-html="column.htmlRender(scope.row)"></div>

      <pre v-else-if="column.textHtml" v-html="scope.row[column.prop]"></pre>

      <span
        v-else
        :class="{'only-one-line' : column.showOverflowTooltip}"
        :title="column.showOverflowTooltip ? scope.row[column.prop] : ''">
        {{ scope.row[column.prop] }}
      </span>
    </template>
  </el-table-column>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'bio-column',
  props: ['column', 'columnIndex'],
  data() {
    return {
      Vue
    };
  }
};
</script>
