<template>
    <section class="reader-container-box">
        <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
            :tableloading="pageData.tableloading" style="height: calc(100vh - 342px);">
            <template #state="{ row }">
                <el-tag v-if="row.state == '1'" type="success">已读</el-tag>
                <el-tag v-else-if="row.state == '2'" type="danger">未读</el-tag>
            </template>
        </MOSTY.Table>
    </section>
    <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
            @changeSize="handleSizeChange" />
    </div>
</template>

<script setup>
import { watch, ref, getCurrentInstance, onMounted, nextTick, reactive, defineProps } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
    receiveId: {
        type: [String, Number]
    }
})
const pageData = reactive({
    tableColumns: [
        {
            title: "接收人员单位",
            prop: "orgName",
        },
        {
            title: "接收人员部门",
            prop: "deptName",
        },
        {
            title: "接收人员姓名",
            prop: "userName",
        },
        {
            title: "是否已读",
            prop: "state",
            slot: true
        },
    ],
    tableData: [],
    pageConfiger: {
        pageSize: 10,
        pageCurrent: 1,
        total: 0
    },
    tableloading: false
})
//页码发生变化
const handleCurrentChange = (val) => {
    pageData.pageConfiger.pageCurrent = val;
    queryData()
};
//查询条数发生变化
const handleSizeChange = (val) => {
    pageData.pageConfiger.pageSize = val;
    queryData()
};
// 查询子表单
const queryData = () => {
    
    if (!props.receiveId) return
    pageData.tableloading = true
    postApi({ noticeId: props.receiveId, ...pageData.pageConfiger }, "/mosty-jcgl/noticeController/queryNoticeUserInfo").then((res) => {
        pageData.tableData = res.records
        pageData.pageConfiger.total = res.total
        pageData.tableloading = false
    })
}
onMounted(() => {
    queryData()
})
</script>

<style lang="scss" scoped>
.reader-container-box {
    padding-top: 20px;
}
</style>