<template>
    <div>
        <!-- 查询 -->
        <div class='tabox'>
            <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
                :tableloading="tableloading" :tableHeight="'40vh'">
                <template #actions="{ row }">
                    <span class="operesee" @click="handleSee(row)">
                        <el-icon>
                            <Compass />
                        </el-icon>查看</span>
                </template>
            </MOSTY.Table>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
                    @changeSize="handleSizeChange" />
            </div>
        </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="评价详情" :before-close="clostadd">
        <MOSTY.Table :table-columns="pjxqdata.tableColumns" :tableData="pjxqdata.tableData" :tableloading="tableloading"
            :tableHeight="'40vh'">
        </MOSTY.Table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="clostadd"><el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span></el-button>
            </span>
        </template>
    </el-dialog>

</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { postApi, getApi } from "@/api/tobAcco_api.js";
const fileid = ref(null)
const emits = defineEmits(["handleChange", 'searchChange']);
const props = defineProps({
    obj: {
        default: () => { },
        type: Object
    },
    // 是否可以编辑
    isEdit: {
        type: Boolean,
        default: true
    },
});
const tableloading = ref(false);
const total = ref(0)
const dialogTableVisible = ref(false)
const pageData = reactive({
    listQuery: {
        pageCurrent: 1,
        pageSize: 5,
        relatedid: props.obj.id
    },
    pageConfiger: {
        pageSize: 5,
        pageCurrent: 1,
        total: 0
    },
    tableColumns: [
        {
            title: "评价人所属单位",
            prop: "orgname"
        },
        {
            title: "评价人所属部门",
            prop: "deptname"
        },
        {
            title: "评价人",
            prop: "username"
        },
        {
            title: "评价时间",
            prop: "addtime"
        },
        {
            title: "分数",
            prop: "score"
        },
        {
            title: "操作",
            prop: "actions",
            slot: true
        }

    ],
    tableData: []
})
const pjxqdata = reactive({

    tableColumns: [
        {
            title: "评价条款",
            prop: "title"
        },
        {
            title: "评价内容",
            prop: "content"
        },
        {
            title: "评价人",
            prop: "username"
        },
        {
            title: "评价时间",
            prop: "addtime"
        },
        {
            title: "得分",
            prop: "resScore"
        }

    ],
    tableData: []
})

onMounted(() => {

    //获取子表
    getzblist()
});

//获取列表
function getzblist() {
    getApi(pageData.listQuery, '/mosty-jcgl/relatedScore/getPageList').then(res => {
        pageData.tableData = res.records
            ? res.records : [];
        pageData.pageConfiger.total = res.total
    })
}
function getzbxqlist(zid) {
    getApi({ zid }, '/mosty-jcgl/relatedScore/getList').then(res => {
        pjxqdata.tableData = res ? res : [];
    })
}
function handleSee(row) {
    dialogTableVisible.value = true
    getzbxqlist(row.zid)
}
function clostadd() {
    dialogTableVisible.value = false
}
//页码发生变化
const handleCurrentChange = (val) => {
    pageData.pageConfiger.pageCurrent = val;
    pageData.listQuery.pageCurrent = val;
    getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
    pageData.pageConfiger.pageSize = val;
    pageData.listQuery.pageSize = val;
    getzblist()
};

</script>

<style lang="scss" scoped>
.headBox {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 10px;
}

.top_ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    >li {
        width: 15%;
        height: 83px;
        margin: 6px 32px;
    }
}
</style>