<template>
    <div>
        <div class="titleBox">
            <div class="title">辨识进度</div>
            <div class="btnBox">
                <el-button type="primary" @click="reflush" style="margin-right: 20px;" v-if="showReflush">
                    <el-icon>
                        <RefreshRight />
                    </el-icon>
                    <span>刷新</span>
                </el-button>
                <el-button type="primary" @click="closeEvent" style="margin-right: 20px;">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                    <span>返回</span>
                </el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="tabBox">
            <el-table ref="multipleTableRef" stripe :data="tableData" :height="tableHeight" border>
                <el-table-column :label="nameType" property="orgname" show-overflow-tooltip></el-table-column>
                <el-table-column property="allcount" label="总人数" show-overflow-tooltip></el-table-column>
                <el-table-column property="bscount" label="辨识条数" show-overflow-tooltip></el-table-column>
                <el-table-column property="bshzcount" :label="nameType + '辨识条数（合并）'"
                    show-overflow-tooltip></el-table-column>
                <el-table-column property="count" :label="nameType + '参与人数'" show-overflow-tooltip></el-table-column>
                <el-table-column property="rate" :label="nameType + '参与率'" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <span class="operesee" @click="handlexg(scope.row)"> <el-icon>
                                <Compass />
                            </el-icon>{{ nameType == '部门' ? '人员详情' : '部门详情' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye" :style="{ top: tableHeight }">
                <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                    layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
            </div>
        </div>
    </div>
    <!-- 人员辨识清单 -->
    <div v-if="show" class="dialog-box">
        <Bshzqd @close="show = false" :planid="planid" :deptid="deptid" />
    </div>
</template>

<script setup>
import { onMounted, defineEmits, ref, defineProps } from 'vue'
import { getApi } from "@/api/tobAcco_api.js";
import Bshzqd from "./bshzqd.vue";
const emits = defineEmits(["close"]);
// 表格高度
const tableHeight = ref()
const total = ref(0)
const props = defineProps({
    planid: {
        type: String,
        default: null
    }
});
const show = ref(false)
// 分页
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 20,
    planid: "",
});
const planid = ref('')
const deptid = ref('')
const orglevel = ref('')
const nameType = ref('')
// 表格数据
const tableData = ref([])
// 是否展示刷新按钮
const showReflush = ref(false)
// 初始化
onMounted(() => {
    tabHeightFn();
    getDataList();
})
//刷新
function reflush() {
    listQuery.value.orgid = null
    listQuery.pageCurrent = 1
    showReflush.value = false
    getDataList();
}
//获取表格数据
function getDataList() {
    listQuery.value.planid = props.planid;
    getApi(listQuery.value, '/mosty-jcgl/identify/getBsdjList').then((res) => {
        tableData.value = res.records
        total.value = res.total
        if (res.records && res.records.length > 0) {
            orglevel.value = res.records[0].orglevel
            if (['10', '20', '30'].indexOf(orglevel.value) != -1) {
                nameType.value = '单位'
            } else {
                nameType.value = '部门'
            }
        }
    })
}
const handlexg = (row) => {
    if (['10', '20', '30'].indexOf(orglevel.value) != -1) {
        listQuery.value.orgid = row.orgid
        listQuery.pageCurrent = 1
        showReflush.value = true
        getDataList();
    } else {
        show.value = true
        deptid.value = row.orgid
        planid.value = row.planid
    }
};
// 方法
const tabHeightFn = () => {
    tableHeight.value =
        window.innerHeight - 100 - 57 - 100 + 'px'
}
const closeEvent = () => {
    emits("close");
};
//分页
const handleSizeChange = (currentSize) => {
    listQuery.value.pageSize = currentSize;
    getDataList();
};
const handleCurrentChange = (currentPage) => {
    listQuery.value.pageCurrent = currentPage;
    getDataList();
};


</script>

<style lang="scss" scoped>
.titleBox {
    height: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .title {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        font-weight: 400;
        color: #0f3916;
        padding-left: 20px;
    }

    .btnBox {
        margin-top: 14px;
    }
}

.fenye {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>