<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { ElDialog, ElTable, ElTableColumn } from 'element-plus';

const props = defineProps<{ visible: boolean; importColumns: any[]; columns: any[] }>()

const visible = useVModel(props, 'visible')
</script>

<template>
    <ElDialog v-model="visible" title="导入模板不一致" center>
        <ElTable size="small" border :data="[{}]">
            <ElTableColumn 
                v-for="(column, index) in columns" 
                :label="column" :min-width="20 + (column.length * 15) + 'px'" 
                show-overflow-tooltip
            >
                <template #="scope">
                    {{ importColumns[index] }}
                </template>
            </ElTableColumn>
        </ElTable>

        <!-- <p>当前导入模板:</p>
        <ElTable size="small" border>
            <ElTableColumn v-for="column in importColumns" :label="column" :min-width="20 + (column.length * 15) + 'px'" />
        </ElTable> -->
    </ElDialog>
</template>