<template>
    <div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
        <vxe-table
            ref="tableRef"
            height="auto"
            :key="key"
            :data="tableStore.table.data"
            v-loading="tableStore.table.loading"
            v-bind="Object.assign({}, defaultAttribute, $attrs)"
            @checkbox-all="selectChangeEvent"
            @checkbox-change="selectChangeEvent"
            :showOverflow="showOverflow"
            @sort-change="handleSortChange"
        >
            <!-- Column 组件内部是 el-table-column -->
            <template v-if="isGroup">
                <GroupColumn :column="tableStore.table.column" />
            </template>
            <template v-else>
                <Column
                    :attr="item"
                    :key="key + '-column'"
                    v-for="(item, key) in tableStore.table.column"
                    :tree-node="item.treeNode"
                >
                    <!-- tableStore 预设的列 render 方案 -->
                    <template v-if="item.render" #default="scope">
                        <FieldRender
                            :field="item"
                            :row="scope.row"
                            :column="scope.column"
                            :index="scope.rowIndex"
                            :key="
                                key +
                                '-' +
                                item.render +
                                '-' +
                                (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
                            "
                        />
                    </template>

                    <!-- 支持可点击和下划线的列 -->
                    <template v-else-if="item.clickable" #default="scope">
                        <span
                            :class="{ 'clickable-underline':item.clickable }"
                            @click="item.clickable ? handleCellClick(scope.row, scope.column) : undefined"
                        >
                            {{ item.field ? scope.row[item.field] : '' }}
                        </span>
                    </template>
                </Column>
            </template>
            <slot name="columns"></slot>
        </vxe-table>
    </div>

    <div v-if="tableStore.showPage" class="table-pagination">
        <el-pagination
            :currentPage="tableStore.table.params!.pageNum"
            :page-size="tableStore.table.params!.pageSize"
            :page-sizes="pageSizes"
            background
            :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
            :total="tableStore.table.total"
            @size-change="onTableSizeChange"
            @current-change="onTableCurrentChange"
        ></el-pagination>
    </div>
    <slot name="footer"></slot>
</template>

<script setup lang="ts">
import { ref, nextTick, inject, computed, onMounted, watch } from 'vue'
import type { ElTable } from 'element-plus'
import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
import FieldRender from '@/components/table/fieldRender/index.vue'
import Column from '@/components/table/column/index.vue'
import GroupColumn from '@/components/table/column/groupColumn.vue'
import { useConfig } from '@/stores/config'
import type TableStoreClass from '@/utils/tableStore'
import { useRouter } from 'vue-router'
import { defaultAttribute } from '@/components/table/defaultAttribute'

const config = useConfig()
const tableRef = ref<VxeTableInstance>()
const tableStore = inject('tableStore') as TableStoreClass
const router = useRouter()
const key = ref(0)

const clickedRow = ref<any>(null)
const clickedColumn = ref<any>(null)

const emit = defineEmits(['cell-click'])
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
    isGroup?: boolean
    showOverflow?: boolean
    height?: string | boolean
}

const props = withDefaults(defineProps<Props>(), {
    isGroup: false,
    showOverflow: true,
    height: false
})
onMounted(() => {
    tableStore.table.ref = tableRef.value as VxeTableInstance
})
// console.log(props)
const onTableSizeChange = (val: number) => {
    tableStore.onTableAction('page-size-change', { size: val })
}

const onTableCurrentChange = (val: number) => {
    tableStore.onTableAction('current-page-change', { page: val })
}

const pageSizes = computed(() => {
    let defaultSizes = [10, 20, 50, 100, 200]
    if (tableStore.table.params!.pageSize) {
        if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
            defaultSizes.push(tableStore.table.params!.pageSize)
        }
    }
    return defaultSizes
})

/*
 * 记录选择的项
 */
const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
    tableStore.onTableAction('selection-change', records)
}

const getRef = () => {
    return tableRef.value
}
// 排序
const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
    // console.log('排序列:', column?.property);
    // console.log('排序顺序:', order);
    // tableStore.onTableAction('sortable', { column, order })
    tableStore.table.params.sortBy = column?.property
    tableStore.table.params.orderBy = order
    tableStore.table.params.pageNum = 1

    tableStore.index()
    key.value += 1
    // // 在这里可以根据 column 和 order 进行相应的数据排序操作
    // if (order === 'asc') {
    // } else if (order === 'desc') {
    // }
}

// 单元格点击事件处理函数
const handleCellClick = (row: any, column: any) => {
    clickedRow.value = row
    clickedColumn.value = column
    // 触发自定义事件，通知父组件显示 dialog
    emit('cell-click', row, column)
    // 你也可以在这里触发一个自定义事件或调用 tableStore 的方法
    // tableStore.onTableAction('cell-click', { row, column })
}

watch(
    () => tableStore.table.allFlag,
    newVal => {
        if (tableStore.table.allFlag) {
            tableRef.value?.exportData({
                filename:
                    tableStore.table.filename || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: tableStore.table.allData, // 数据源 // 过滤那个字段导出
                columnFilterMethod: function (column: any) {
                    return !(
                        column.column.title === undefined ||
                        column.column.title === '序号' ||
                        column.column.title === '操作'
                    )
                }
            })
            tableStore.table.allFlag = false
        }
    }
)
watch(
    () => tableStore.table.data,
    newVal => {
        tableStore.onTableAction('selection-change', [])
    }
)

defineExpose({
    getRef
})
</script>

<style scoped lang="scss">
.ba-data-table :deep(.el-button + .el-button) {
    margin-left: 6px;
}

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

.table-pagination {
    height: 58px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    padding: 13px 15px;
    border-left: 1px solid #e4e7e9;
    border-right: 1px solid #e4e7e9;
    border-bottom: 1px solid #e4e7e9;
}

/* 添加可点击和下划线单元格样式 */
.clickable-underline {
  text-decoration: underline; /* 下划线 */
  cursor: pointer; /* 鼠标指针 */
}

.clickable-underline:hover {
  color: #66b1ff; /* 悬停时的颜色 */
}
</style>
