<template>
    <el-table-v2 v-if="isShow"
                 ref="tableRef"
                 class="xc-el-table-v2"
                 :cache="4"
                 fixed
                 :data="props.data"
                 :columns="props.columns"
                 :width="props.width"
                 :height="props.height"
                 :header-height="props.headerHeight"
                 :row-event-handlers="rowEvent"
                 :row-height="rowHeight"
                 :row-class="props.rowClassName"/>
</template>

<script setup name="XcElTableV2">
import {ElCheckbox} from "element-plus";

const props = defineProps({
    data: {
        type: Array,
        default: []
    },
    columns: {
        type: Array,
        default: []
    },
    width: {
        type: Number,
        default: 500
    },
    height: {
        type: Number,
        default: 500
    },
    rowClassName: {
        type: Function,
        default: null
    },
    headerHeight: {
        type: Number,
        default: 25
    },
    rowHeight: {
        type: Number,
        default: 24
    },
})


const emits = defineEmits(['rowClick', 'rowContextmenu', 'rowDblclick'])

let timer = null
const rowEvent = {
    'onClick': (val) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            emits('rowClick', val)
        }, 200)
    },
    'onContextmenu': (val) => {
        val.event.preventDefault();
        emits('rowContextmenu', val)
    },
    'onDblclick': (val) => {
        if (timer) {
            clearTimeout(timer)
        }
        emits('rowDblclick', val)
    }
}

const selectedData = ref({})
const intermediate = ref(false)
const selectedAll = ref(false)

const isShow = ref(false)

const tableRef = ref(null)

/**
 * 选中当前行
 * @param val 是否选中
 * @param row 行数据
 * @param rowIndex 行下标
 */
const selectedRow = (val, row, rowIndex) => {
    if (val) {
        selectedData.value[rowIndex] = row
    } else {
        delete selectedData.value[rowIndex]
    }
    row.$selected = val
    let length = Object.keys(selectedData.value).length
    intermediate.value = length > 0
    selectedAll.value = props.data.length === length
    if (selectedAll.value) {
        intermediate.value = false
    }
}

/**
 * 全选或者取消全选
 * @param val 是否全选
 * */
const selectAllClick = (val) => {
    for (let i = 0; i < props.data.length; i++) {
        selectedRow(val, props.data[i], i)
    }
}

const getSelected = () => {
    let tempData = []
    for (let key in selectedData.value) {
        let item = selectedData.value[key]
        tempData.push(item)
    }
    return tempData
}

const typeObj = [{
    key: 'selected',
    dataKey: 'selected',
    width: 30,
    cellRenderer: ({rowData, rowIndex}) => {
        return h(ElCheckbox, {
            modelValue: rowData.$selected,
            onClick: (e) => {
                e.stopImmediatePropagation();
            },
            onChange: (val) => {
                selectedRow(val, rowData, rowIndex)
            }
        }, null)
    },
    headerCellRenderer: () => {
        return h(ElCheckbox,
            {
                modelValue: selectedAll.value,
                indeterminate: intermediate.value,
                onChange: (e) => {
                    selectAllClick(e)
                }
            },
            null)
    }
}, {
    key: 'index',
    dataKey: 'index',
    title: '排序',
    width: 50,
    cellRenderer: ({rowIndex}) => {
        return h('span', {}, rowIndex)
    }
}]

const scrollTo = (val) => {
    tableRef.value.scrollTo(val)
}

const scrollToLeft = (scrollLeft) => {
    tableRef.value.scrollToLeft(scrollLeft)
}

const scrollToTop = (scrollTop) => {
    tableRef.value.scrollToTop(scrollTop)
}

const scrollToRow = (...val) => {
    tableRef.value.scrollToRow(...val)
}

const clearSelected = () => {
    selectAllClick(false)
}

defineExpose({
    selectedRow,
    getSelected,
    clearSelected,
    scrollTo,
    scrollToLeft,
    scrollToTop,
    scrollToRow
})

onMounted(() => {
    for (let i = 0; i < props.columns.length; i++) {
        let item = props.columns[i]
        if (item.type && item.type === 'selected') {
            props.columns[i] = typeObj[0]
            for (let columnKey in item) {
                props.columns[i][columnKey] = item[columnKey]
            }
        }
        if (item.type && item.type === 'index') {
            props.columns[i] = typeObj[1]
            for (let columnKey in item) {
                props.columns[i][columnKey] = item[columnKey]
            }
        }
        props.columns[i]['dataKey'] = item.key
    }
    isShow.value = true
})

</script>

<style lang="scss">
.xc-el-table-v2 {
  .el-table-v2__header-cell {
    font-size: 12px;
    padding: 0 !important;
  }

  .el-table-v2__row-cell {
    padding: 0 !important;
    font-size: 12px;
  }

  //.el-table-v2__row {
  //  &:hover {
  //    background-color: transparent;
  //  }
  //}
}
</style>
