<template>
  <!-- 多级表头情况 -->
  <el-table-column v-if="item.children instanceof Array && item.children.length" :label="item.label" :prop="item.prop" :width="item.width"
    :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
    :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false" :show-overflow-tooltip="item.showOverflowTooltip">
    <template v-for="(child,index) of item.children">
      <table-list-column :key="child.uid ? child.uid : index" :item="child">
        <template v-for="(index, name) in $slots" :slot="name">
          <slot :name="name" />
        </template>
        <template v-for="(index, name) in $scopedSlots" :slot="name" slot-scope="{row,$index}">
          <slot :name="name" :data="child" :row="row" :index="$index"></slot>
        </template>
      </table-list-column>
    </template>
  </el-table-column>
  <!-- 复选框列 -->
  <el-table-column v-else-if="item.type === 'selection'" type="selection" :width="item.width ? item.width : '38px'" :fixed="item.fixed"
    :align="item.align?item.align:'left'" :show-overflow-tooltip="item.showOverflowTooltip">
  </el-table-column>
  <!-- 序号列 -->
  <el-table-column v-else-if="item.type === 'index'" type="index" :label="item.label ? item.label : '序号'"
    :width="flexWidth(tableData.length,item.width,hasQueryParams)" :min-width="item.minWidth" :align="item.align?item.align:'left'"
    :fixed="item.fixed" :resizable="false">
    <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
  </el-table-column>
  <!-- 正常列 -->
  <el-table-column v-else :label="item.label" :prop="item.prop" :width="item.width ? item.width : 'auto'" :min-width="item.minWidth"
    :align="item.align?item.align:'left'" :fixed="item.fixed" :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false"
    :resizable="false" :show-overflow-tooltip="item.showOverflowTooltip">
    <!-- 自定义表头 -->
    <template v-if="item.slotHeader" slot="header">
      <slot :name="item.slotName"></slot>
    </template>
    <!-- 非自定义表头 -->
    <template slot-scope="scope">
      <!-- 有自定义插槽 -->
      <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item">
        <!-- 默认取值 -->
        {{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}
      </slot>
      <!-- 操作栏 不需要设置slot-->
      <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
      <!-- 没有插槽 -->
      <span v-else>
        {{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}
      </span>
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: "TableListColumn",
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    queryParams: {
      type: Object,
      default: () => ({})
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    queryParams: {
      handler(newValue) {
        const _temp = newValue ? newValue : {};
        const keys = Object.keys(_temp);
        if (keys.length) {
          this.hasQueryParams = true;
        } else {
          this.hasQueryParams = false;
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      hasQueryParams: this.hasQueryParams
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    flexWidth(len = 0, width = 50, hasQueryParams) {
      if (hasQueryParams) {
        let currentMax = this.queryParams.pageNum * this.queryParams.pageSize - this.queryParams.pageSize + len;
        if (currentMax.toString().length > 3) {
          width = width + (currentMax.toString().length - 3) * 10;
        }
      }
      return width + 'px';
    },
    pagingHandler(hasQueryParams, queryParams, scope) {
      // 有分页参数
      if (hasQueryParams) {
        return queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1;
      }
      // 不分页
      return scope.$index + 1;
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
