<template>
    <table
        border="0"
        cellpadding="0"
        cellspacing="0"
        :style="{
            width: width,
            tableLayout: 'fixed',
            borderCollapse: 'separate'
        }">
        <colgroup>
            <col v-if="checkbox" :width="checkboxWidth" />
            <col v-for="(col, idx) in columns" :key="idx" :width="col.cellWidth" />
        </colgroup>
        <tbody>
            <template v-if="data?.length">
                <tr
                    v-for="(item, index) in data"
                    :key="index"
                    :class="{
                        'disabled-row': item.isDisabledRow
                    }">
                    <td
                        v-if="checkbox"
                        :class="[
                            'mc-table__td',
                            'mc-table-column__checkbox',
                            {
                                'mc-table--fixed-left-last': fixedLeftCount === 0,
                                'mc-table--cell-shadow-left': fixedLeftCount === 0 && showLeftShadow,
                            }
                        ]"
                        :style="{
                            width: checkboxWidth + 'px',
                        }">
                        <McCheckbox
                            v-model="item.isChecked"
                            @change="handleSelectChange(item)"
                            :style="checkboxStyle" />
                    </td>

                    <td
                        v-for="(col, idx) in columns"
                        :key="idx"
                        :class="[
                            'mc-table__td',
                            {
                                'mc-table__td--fixed': col.fixedLeft || col.fixedRight,
                                'mc-table--fixed-left-last': fixedLeftCount === idx + 1,
                                'mc-table--fixed-right-last': fixedRightCount === columns.length - idx,
                                'mc-table--cell-shadow-left': fixedLeftCount === idx + 1 && showLeftShadow,
                                'mc-table--cell-shadow-right': fixedRightCount === columns.length - idx && showRightShadow,
                            }
                        ]"
                        :style="{
                            left: col.fixedLeft && getColFixedLeftPosition(idx, colWidthList),
                            right: col.fixedRight && getColFixedRightPosition(idx, colWidthList),
                            width: col.cellWidth + 'px',
                            textAlign: col.props.align,
                        }">
                        <div class="mc-table__td--inner">
                            <component :is="col" :store="{
                                columnIndex: idx,
                                rowIndex: index,
                                data: data[index]
                            }"
                            v-table-ellipsis
                            :style="disableEllipsis? {
                                    width: '100%',
                                    whiteSpace: 'normal'
                                } : {
                                    width: '100%',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                }"></component>
                        </div>
                    </td>
                </tr>
            </template>
            <template v-else>
                <tr>
                    <td class="mc-table__td" :colspan="checkbox? columns.length + 1 : columns.length">
                        <div class="mc-table__panel--empty">
                            <slot name="empty" v-if="$slots.empty"></slot>
                            <span v-else>{{emptyText}}</span>
                        </div>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>

<script>
import { ref, inject, nextTick, computed } from 'vue'
import McCheckbox from '../checkbox'
import { isFixedColumn, getColFixedLeftPosition, getColFixedRightPosition, formatSizeValueToNumber } from './util'
import directive from './directive'

export default {
    props: {
        column: Array,
        data: Array,
        width: String,
        checkbox: Boolean,
        checkboxWidth: [String, Number],
        emptyText: {
            type: String,
            default: '暂无相应信息'
        },
        emptyImg: String,
        wrapWidth: Number,
        disableEllipsis: Boolean,
    },
    emits: ['render-done'],
    directives: {
        'table-ellipsis': directive
    },
    components: {
        McCheckbox,
    },
    setup(props, { emit }) {

        const { handleSelectChange, checkboxStyle, showLeftShadow, showRightShadow, ...McTableRootOpts } = inject('McTableRootOpts')
        const colWidthList = ref([props.checkbox && props.checkboxWidth? formatSizeValueToNumber(props.checkboxWidth): 0])
        const fixedLeftCount = ref(0)
        const fixedRightCount = ref(0)
        /* 过滤不可用列 */
        const columns = computed(() => analysisColumns(props.column))

        const analysisColumns = (_col) => {
            if(!_col) return []
            const res = []
            let fullWrapWidth = props.checkbox && props.checkboxWidth? formatSizeValueToNumber(props.checkboxWidth) : 0
            let columnIndex = 0
            mapSubRow(_col)
            McTableRootOpts.setTableTotalWidth(fullWrapWidth)
            nextTick(() => emit('render-done'))
            return res

            function getColumnIndex () {
                const _idx = columnIndex
                columnIndex++
                return _idx
            }

            function mapSubRow(list) {
                let enabledSubRow = false
                list.forEach((col) => {
                    if(typeof col.type === 'object' && (col.type).name === 'McTableV2Column'){
                        enabledSubRow = true
                        if(Array.isArray(col.childrenVNode)) {
                            const r = mapSubRow(col.childrenVNode)
                            if(!r) {
                                setCol(col)
                            }
                        } else {
                            setCol(col)
                        }
                    }
                })
                return enabledSubRow
            }

            function setCol(col){
                col.store = {
                    columnIndex: getColumnIndex(),
                }
                if(isFixedColumn(col.props, 'left')) {
                    col.fixedLeft = true
                    fixedLeftCount.value++
                }
                if(isFixedColumn(col.props, 'right')) {
                    col.fixedRight = true
                    fixedRightCount.value++
                }
                res.push(col)

                fullWrapWidth += col.cellWidth
                colWidthList.value.push(col.cellWidth)
            }
        }

        const getTdContent = (dat, colProps) => {
            // console.log(dat, colProps, e)
        }

        return {
            columns,
            handleSelectChange,
            checkboxStyle,
            fixedLeftCount,
            fixedRightCount,
            colWidthList,
            getColFixedLeftPosition,
            getColFixedRightPosition,
            showLeftShadow,
            showRightShadow,
            getTdContent,
        }
    }
}
</script>
