<template>
    <view class="design-table">
        <scroll-view :scroll-x="true" :style="`height: 100%`">
            <view class="design-table-header">
                <view
                    class="design-table-th"
                    v-for="(column, index) in columns"
                    :key="index"
                    :style="thStyle(column)"
                >
                    {{ column.label }}
                </view>
            </view>
            <view class="design-table-body">
                <view class="design-table-tr" v-for="(item, index) in advanceData" :key="item.key">
                    <view
                        class="design-table-td"
                        v-for="(ite, indey) in columns"
                        :key="indey"
                        :style="thStyle(ite)"
                        @click="cellClick($event, ite.name, item[ite.name])"
                        :id="`${index + 1}-${indey}`"
                    >
                        {{ ite.filters ? itemFilter(item, ite) : item[ite.name] }}
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { PropType, computed, inject, ref } from 'vue'

interface IColumn {
    name: string
    label: string
    width: number
}
interface IData {
    [key: string]: [string, number]
}
const props = defineProps({
    columns: {
        type: Array as PropType<IColumn[]>,
        default: () => []
    },
    data: {
        type: Array as PropType<IData[]>,
        default: () => []
    },
    rowKey: {
        type: [String, Function]
    },
    showOverflowTooltip: {
        type: Boolean,
        default: false
    }
})
const parent = inject('statistics')

const thStyle = computed(() => (column: IColumn) => {
    const { width } = column
    return {
        width: `${width ? width : '100'}px`,
        minWidth: `${width ? width : '100'}px`
    }
})
const advanceData = ref<IData[]>([])

const cellClick = (e, field: string, value: string) => {
    const { x, y } = e.detail

    // 设备内容过长显示省略号
    if (field === 'name' && value.length >= 8) {
        parent.getTooltipStyle({ top: y, left: x, content: value })
    }
}
// 如果传递了filter需要进行处理
const itemFilter = computed(() => (item, ite) => {
    const value = item[ite.name]
    return ite.filters[value] || ''
})
const transData = () => {
    const { data, rowKey } = props
    advanceData.value = data.map((item, index) => {
        if (rowKey) {
            if (typeof rowKey === 'function') {
                item.key = Object.freeze(rowKey(item)) || Date.now()
            } else {
                item.key = Object.freeze(item[rowKey]) || Date.now()
            }
        } else {
            item.key = index
        }
        return item
    })
}
transData()
</script>

<style lang="scss" scoped>
.design-table {
    padding: 0 32rpx;
    &-header {
        height: 100rpx;

        display: flex;
        align-items: center;
        width: 100%;
        .design-table-th {
            background: $gray-1;
            height: 100%;
            line-height: 100rpx;
            padding: 0 40rpx 0 16rpx;
            border: 1px solid $gray-6;
            border-width: 1px;
            border-style: solid;
            border-color: $gray-6 transparent $gray-6 $gray-6;
            font-size: 30rpx;
            &:last-child {
                border-right-color: $gray-6;
            }
        }
    }
    &-body {
        .design-table-tr {
            display: flex;
            .design-table-td {
                height: 100rpx;
                line-height: 100rpx;
                padding: 0 40rpx 0 16rpx;
                border-width: 1px;
                border-style: solid;
                border-color: transparent transparent $gray-6 $gray-6;
                &:last-child {
                    border-right-color: $gray-6;
                }
                // 文本显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                overflow-wrap: break-word;
                white-space: nowrap;
            }
        }
    }
}
</style>
