<template>
    <ProTable ref="proTableRef" :columns="columns" :tableData="pager.lists" :loading="pager.loading" :maxHeight="530">
        <template #postId="{ row }">
            <span>{{ parsePositionText(row.postId) }}</span>
        </template>
        <template #templateFormList="{ row }">
            <div v-for="(item, index) in row.templateFormList" :key="index">
                <span>{{ item.formTitle }}：</span>
                <span>{{ item.value }}</span>
            </div>
        </template>
    </ProTable>
</template>

<script setup lang="ts">
import { postLists } from '@/api/account_center/postion'
import { summaryRecordLists } from '@/api/summary'
import { usePaging } from '@/hooks/usePaging'

const props = defineProps({
    queryParams: {
        type: Object,
        default: () => ({
            userName: '',
            submitDate: []
        })
    }
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: summaryRecordLists,
    params: props.queryParams
})
getLists()

const proTableRef = ref()
const columns = reactive([
    { prop: 'userName', label: '提交人', width: 180 },
    { prop: 'postId', label: '岗位', width: 180 },
    { prop: 'addTime', label: '提交时间', width: 180 },
    { prop: 'templateFormList', label: '总结情况', width: 180 }
])
const positionOptions = ref<any[]>([])
const parsePositionText = computed(() => (postId: number) => positionOptions.value.find(item => item.id == postId).name ?? '--')
const fetchPostionData = async () => {
    try {
        const result = await postLists()
        positionOptions.value = result.lists
    } catch (error) {}
}
fetchPostionData()
defineExpose({
    resetPage,
    resetParams,
    getLists
})
</script>
<style scoped></style>
