<template>
    <div class="hc-table-ref-box" :class="ui">
        <el-table ref="tableRef" hc :data="tableData" height="100%" v-loading="isLoading" stripe :row-key="rowKey" :border="isBorder"
                  @selection-change="tableSelectionChange"
                  @select="tableSelect"
                  @select-all="tableSelectAll"
                  @row-click="tableRowClick"
                  @row-dblclick="tableRowDblClick"
                  @row-contextmenu="tableRowContextmenu"
                  @cell-click="tableCellClick"
                  @cell-dblclick="tableCellDblClick"
                  @cell-contextmenu="tableCellContextmenu"
                  style="width: 100%;"
                
                 :cell-style="{ textAlign: 'center' }"
                 :header-cell-style="{ 'text-align': 'center' }" >
            <el-table-column type="selection" width="50" v-if="isCheck"/>
            <el-table-column type="index" prop="num" label="序号" width="80" v-if="isIndex"  />
            <template v-for="item in columns">
                <el-table-column :prop="item.key" :label="item.name" :align="item.align ?? 'left'" :width="item.width ?? ''" :fixed="item.fixed ?? false" >
                    <template #default="scope" v-if="item.isSlot">
                        <slot :name='item.key' :row="scope.row" :index="scope.$index"></slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script setup>
import {ref,watch,nextTick,useSlots} from "vue";
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    column: {
        type: Array,
        default: () => ([])
    },
    datas: {
        type: Array,
        default: () => ([])
    },
    loading: {
        type: Boolean,
        default: false
    },
    isCheck: {
        type: Boolean,
        default: false
    },
    isIndex: {
        type: Boolean,
        default: true
    },
    rowKey: {
        type: String,
        default: 'id'
    },
    border: {
        type: Boolean,
        default: false
    },
  
})

//初始变量
const tableRef = ref(null)
const columns = ref(props.column)
const tableData = ref(props.datas)
const isLoading = ref(props.loading)
const isBorder = ref(props.border)

//监听
watch(() => [
    props.datas,
    props.loading,
    props.border,
], ([datas, loading, border]) => {
    tableData.value = datas;
    isLoading.value = loading;
    isBorder.value = border;
})

//监听表头
watch(() => [
    props.column
], ([column]) => {
    columns.value = column;
    setIsSlots()
})

//加载完成
nextTick(()=>{
    setIsSlots()
})

//判断<slot>是否有传值
const slots = useSlots()
const setIsSlots = () => {
    let arr = columns.value
    for (let i = 0; i < arr.length; i++) {
        arr[i].isSlot = !!slots[arr[i].key]
    }
    columns.value = arr
}

//事件
const emit = defineEmits([
    'selection-change',
    'row-click', 'row-dblclick', 'row-contextmenu',
    'cell-click', 'cell-dblclick', 'cell-contextmenu'
])

//清空多选
const clearSelection = () => {
    tableRef.value?.clearSelection()
    emit('selection-change', [])
}
//返回当前选中的行
const getSelectionRows = () => {
    tableRef.value?.getSelectionRows()
}

//用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否
const toggleRowSelection = (row, selected) => {
    tableRef.value?.toggleRowSelection(row, selected)
}

//多选
const tableSelectionChange = (rows) => {
    let tableRows = rows.filter((item) => {
        return (item??'') !== '';
    })
    emit('selection-change', tableRows)
}

const tableSelect = (selection, row) => {
    emit('select', {selection, row})
}

const tableSelectAll = (rows) => {
    emit('select-all', rows)
}

//当某一行被点击时会触发该事件
const tableRowClick = (row, column, event) => {
    emit('row-click', {row, column, event})
}

//当某一行被双击时会触发该事件
const tableRowDblClick = (row, column, event) => {
    emit('row-dblclick', {row, column, event})
}

//当某一行被鼠标右键点击时会触发该事件
const tableRowContextmenu = (row, column, event) => {
    emit('row-contextmenu', {row, column, event})
}

//当某个单元格被点击时会触发该事件
const tableCellClick = (row, column, cell, event) => {
    emit('cell-click', {row, column, cell, event})
}

//当某个单元格被双击击时会触发该事件
const tableCellDblClick = (row, column, cell, event) => {
    emit('cell-dblclick', {row, column, cell, event})
}

//当某个单元格被鼠标右键点击时会触发该事件
const tableCellContextmenu = (row, column, cell, event) => {
    emit('cell-contextmenu', {row, column, cell, event})
}

// 暴露出去
defineExpose({
    clearSelection,
    getSelectionRows,
    toggleRowSelection
})
</script>

<style lang="scss">
.hc-table-ref-box {
    height: 100%;
    .el-scrollbar .el-scrollbar__bar.is-vertical {
        right: 0;
    }
    .el-scrollbar .el-scrollbar__bar.is-horizontal {
        bottom: 2px;
    }
    .el-table__body-wrapper tr td.el-table-fixed-column--left,
    .el-table__body-wrapper tr td.el-table-fixed-column--right,
    .el-table__body-wrapper tr th.el-table-fixed-column--left,
    .el-table__body-wrapper tr th.el-table-fixed-column--right,
    .el-table__footer-wrapper tr td.el-table-fixed-column--left,
    .el-table__footer-wrapper tr td.el-table-fixed-column--right,
    .el-table__footer-wrapper tr th.el-table-fixed-column--left,
    .el-table__footer-wrapper tr th.el-table-fixed-column--right,
    .el-table__header-wrapper tr td.el-table-fixed-column--left,
    .el-table__header-wrapper tr td.el-table-fixed-column--right,
    .el-table__header-wrapper tr th.el-table-fixed-column--left,
    .el-table__header-wrapper tr th.el-table-fixed-column--right {
        --el-bg-color: #ebeef0;
    }
}
</style>
