<template>
    <div>
        <a-button type="primary" style="margin: 10px 0;" :loading="state.exportLoading" @click="onExport">
            导出Excel </a-button>

            <a-button type="primary" style="margin: 10px 10px;"  @click="onPrint">
            打印Json </a-button>
    </div>
</template>
<script setup>
import { defineProps, reactive, watch } from 'vue';
import { exportExcelFunc } from './exportExcel';
const props = defineProps({
    tableData: [],
    userId: ''
})

const state = reactive({
    exportLoading: false,
    dataSource: [],
    userId: ''
})

const onExport = () => {
    console.log('export')
    if (!state.dataSource || state.dataSource.length === 0) {
        window.alert('表格数据为空')
        return
    }
    state.exportLoading = true
    exportExcelFunc(state.dataSource, state.userId).then(res => {
        state.exportLoading = false
        console.log('res', res)
    }).catch(r => {
        state.exportLoading = false
        console.log('r', r)
    })
}
watch(() => props.tableData,
    (val) => {
        state.dataSource = val
    }, {
    deep: true,
    immediate: true
})
watch(() => props.userId,
    (val) => {
        state.userId = val
    }, {
    deep: true,
    immediate: true
})

const onPrint=()=>{
    // const json={}
    console.log('state.dataSource',state.dataSource)
    console.log('url array',state.dataSource.map(item=>{
        return {
            url:item.url
        }
    }))

}
</script>