<script setup lang="ts">
import type { ElTable } from 'element-plus'
// import { ref, nextTick, inject, computed } from 'vue'
// import Column from '/@/components/table/column/index.vue'
// import FieldRender from '/@/components/table/fieldRender/index.vue'
// import { useConfig } from '/@/stores/config'
import type { XbTableClass } from '@/utils/xbTable'
const props = withDefaults(defineProps<Props>(), {
  pagination: true,
  class: 'xb-table',
})

defineOptions({ inheritAttrs: false })

interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
  pagination?: boolean
  class?: string
}
const tableBox = ref()
const pageBox = ref()
const tableRef = ref<InstanceType<typeof ElTable>>()
const xbTable = inject('xbTable') as XbTableClass

// const onSortChange = ({ order, prop }: { order: string; prop: string }) => {
//     xbTable.onTableAction('sort-change', { prop: prop, order: order ? (order == 'ascending' ? 'asc' : 'desc') : '' })
// }

function onTableSelect(selection: anyObj[], row: anyObj) {
  xbTable.table.selection = selection
  // xbTable.onTableAction('onTableSelect', {
  //     selection,
  //     row,
  // });
}

function onTableSelectAll(selection: anyObj[]) {
  xbTable.table.selection = selection
  // xbTable.onTableAction('onTableSelectAll', {
  //     selection,
  // });
}

function onTableSizeChange(val: number) {
  xbTable.onTableAction('handlePageSize', { size: val })
}

function onTableCurrentChange(val: number) {
  xbTable.onTableAction('handlePageCurrent', { current: val })
}
function onTableSortChange(val: {
  column: any
  prop: string
  order: 'ascending' | 'descending' | null
}) {
  xbTable.onTableAction('sortChange', { type: val.order })
}

const getRef = () => {
  return tableRef.value
}

const getBox = () => {
  let tableRect = tableBox.value?.getBoundingClientRect()
  let pageRect = pageBox.value?.getBoundingClientRect()

  return {
    top: tableRect?.top || 0,
    pageHeight: pageRect?.height + 34 || 0,
  }
}

function getRowClass(row: { row: any; rowIndex: number }): string {
  let data = row.row
  let res: string[] = []
  if (xbTable.table.extend?.setRowClass) {
    res.push(xbTable.table.extend.setRowClass(row))
  } else if (data.children && data.children.length > 0) {
    res.push('row-expand-has')
  } else {
    res.push('row-expand-unhas')
  }
  return res.join(' ')
}

function calculateWidth(baseWidth: number) {
  return (baseWidth / 1920) * window.innerWidth
}

defineExpose({
  getRef,
  getBox,
})
</script>

<template>
  <div :class="props.class">
    <slot name="neck"></slot>
    <!-- @select-all="onSelectAll"
                                                        @select="onSelect" @selection-change="onSelectionChange" @sort-change="onSortChange"
                                                        @row-dblclick="xbTable.onTableDblclick" -->
    <div ref="tableBox">
      <el-table
        ref="tableRef"
        v-loading="xbTable.table.loading || false"
        v-bind="$attrs"
        class="xb-data-table"
        header-cell-class-name="table-header-cell"
        style="width: 100%"
        :default-expand-all="xbTable.table.expandAll"
        :data="xbTable.table.data"
        :row-key="xbTable.table.pk"
        :expand-row-keys="xbTable.table.expandRowKeys"
        :border="xbTable.table.border"
        :stripe="xbTable.table.stripe"
        :row-class-name="getRowClass"
        :header-cell-style="xbTable.table.headerCellStyle"
        @select="onTableSelect"
        @select-all="onTableSelectAll"
      >
        <!-- @sort-change="onTableSortChange" -->
        <!-- <slot name="columnPrepend"></slot> -->
        <!-- :key="item.render == 'switch' ? 'sw-' + item.prop + '-' + key + '-' + scope.row[item.prop!] : key"  -->
        <template v-for="(item, key) in xbTable.table.column">
          <el-table-column
            v-if="item.show !== false"
            :key="item.prop || key + '-column'"
            v-bind="item"
            :width="item.type === 'index' ? calculateWidth(100) : item.width"
            :class-name="item.type ? `el-table-column--${item.type}` : `column-${item.prop}`"
            :selectable="(row: anyObj) => (item.selectable ? item.selectable(row) : true)"
          >
            <template v-if="item.type === 'sort'">
              <Icon
                name="iconfont"
                class="icon-a-tuodong1616 sort table-row-sort"
                color="#999"
                size="12"
                width="unset"
                height="unset"
              />
            </template>
            <template v-if="item.render" #default="scope">
              <Render :render="item.render" :scope="scope"></Render>
            </template>
          </el-table-column>
        </template>
        <!-- <slot name="columnAppend"></slot> -->
      </el-table>
    </div>
    <div v-if="props.pagination" ref="pageBox" class="table-pagination">
      <el-pagination
        :current-page="xbTable.table.page!.current"
        :page-size="xbTable.table.page!.size"
        :page-sizes="xbTable.table.pageSizes"
        background
        :layout="
          xbTable.table.layout?.shrink
            ? 'prev, next, jumper'
            : 'sizes,total, ->, prev, pager, next, jumper'
        "
        :total="xbTable.table.page!.total"
        @size-change="onTableSizeChange"
        @current-change="onTableCurrentChange"
      ></el-pagination>
    </div>
    <!-- <slot name="footer"></slot> -->
  </div>
</template>

<style scoped lang="scss">
// .xb-data-table {
//     width: 100%;
// }

// .xb-data-table :deep(.el-button + .el-button) {
//     margin-left: 6px;
// }

// .xb-data-table :deep(.table-header-cell) .cell {
//     color: var(--el-text-color-primary);
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
// }

.table-pagination {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  padding: 1.08vh 15px;
}

.sort {
  cursor: grab;
}

.xb-data-table {
  :deep(.el-table-column--sort) {
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  :deep(.el-button) {
    min-width: 80px;
  }

  :deep(.cell) {
    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    .el-tag {
      margin-right: 4px;
    }
  }
}

:deep(.row-expand-unhas .el-table__expand-icon) {
  // pointer-events: none;
  opacity: 0;
  pointer-events: none;
}
</style>
