<template>
    <div>
        <el-dialog :title="'上报历史'" width="90%" v-model="visible" @close="closed">
            <div class="treeBox2 ww100">
                <el-table ref="multipleTableRef" v-loading="loading" :row-key="keyid" :data="pageData.tableData" border
                    style="width: 100%">
                    <el-table-column label="企业名称" prop="baOrgName" fixed width="200" />
                    <el-table-column prop="sbcs" label="上报次数" />
                    <el-table-column align="center" label="从业人员人数">
                        <el-table-column prop="jobDutyPeopleQty" label="在册在岗人数" />
                        <el-table-column prop="dispatchDutyPeopleQty" label="劳务派遣人数" />
                    </el-table-column>
                    <el-table-column align="center" label="安全管理机构">
                        <el-table-column label="是否独立设置">
                            <template #default="{ row }">
                                <span v-if="row.independentSettingsFlag === 0">否</span>
                                <span v-else-if="row.independentSettingsFlag === 1">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="organizationPeopleQty" label="编制人数" />
                        <el-table-column prop="allocationPeopleQty" label="配置人数" />
                        <el-table-column label="是否设置安全工程师岗位">
                            <template #default="{ row }">
                                <span v-if="row.sePositionFlag === 0">否</span>
                                <span v-else-if="row.sePositionFlag === 1">是</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="专业持证人数">
                        <el-table-column prop="safetyPeopleQty" label="注安人数" />
                        <el-table-column prop="cancellationPeopleQty" label="注消人数" />
                    </el-table-column>
                    <el-table-column align="center" label="安全生产标准化">
                        <el-table-column label="达标级别">
                            <template #default="row">
                                {{ row.complianceLevelName }}
                            </template>
                        </el-table-column>
                        <el-table-column label="达标得分">
                            <template #default="row">
                                <span>{{ row.complianceLevelCode != 4 ? row.complianceScore : "--" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="有效截止日期">
                            <template #default="row">
                                <span>{{ row.expireDate != 4 ? row.expireDate : "--" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="年度自评得分">
                            <template #default="row">
                                <span>{{ row.complianceLevelCode != 4 ? row.yearSelfEvaluationScore : "--" }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="职业健康管理体系">
                        <el-table-column label="是否认证">
                            <template #default="{ row }">
                                <span v-if="row.attestationFlag === 0">否</span>
                                <span v-else-if="row.attestationFlag === 1">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="effectiveUntilDate" label="有效截止日期" width="110" />
                    </el-table-column>
                    <el-table-column prop="gxTime" label="上报时间" width="150" fixed="right" />
                    <el-table-column align="center" label="操作" width="170" fixed="right">
                        <template #default="{ row }">
                            <el-link type="primary" @click="handleClickDetail(row)">详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex just-center">
                    <el-pagination class="pagination" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="params.pageCurrent"
                        :page-sizes="[2, 5, 10, 20]" :page-size="params.pageSize"
                        layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
                </div>
            </div>
        </el-dialog>
        <Dialog ref="tabDialog" :title="'查看上报历史'" :id="rowId" @onSave="onSave" />
    </div>
</template>
<script setup>
// 引入
import { ref, reactive, onMounted } from "vue";
import Dialog from './dialog.vue'
import { postApi } from "@/api/tobAcco_api.js";
const pageData = reactive({
    tableData: [],
    orgCodes: [],
    params: {},
    currItem: {}
});
const params = reactive({
    pageCurrent: 1,
    pageSize: 10
})
const total = ref(0)
const tabDialog = ref(null);
const loading = ref(false);
const multipleTableRef = ref(null);
const rowId = ref(null);
const orgCode = ref(false)
const visible = ref(true)
const props = defineProps({
    chooseUserVisible: {
        type: Boolean,
        default: true,
    },
    orgId: {
        type: String,
        default: ''
    },
    currCode: {
        type: String,
        default: ''
    },
    year: {
        type: String,
        default: ''
    },
    isAuth: {
        type: Boolean,
    },
    params: {
        type: Object,
        default: () => { }
    },
    isReport: {
        type: Boolean,
    },
    currTotal: Number,
    ywId: String
});

// 详情
const handleClickDetail = (row) => {
    rowId.value = row.sourceId;
    tabDialog.value.dialogVisible = true;

}
const onSave = (e) => {
    getListData();
};
const emits = defineEmits(["close"]);
const closed = () => {
    emits("close");
};
onMounted(() => {
    orgCode.value = props.currCode
    getListData()
})

//获取列表
const getListData = () => {
    params.cs = props.currTotal
    params.year = props.year
    params.orgcode = orgCode.value
    loading.value = true;
    postApi(params, '/mosty-jcgl/enterpriseInfo/getLsjlList').then(res => {
        if (res.records) {
            pageData.tableData = res.records
            total.value = res.total
        }
    }).finally(() => {
        loading.value = false
    })
}
// 切换条数
const handleSizeChange = (val) => {
    params.pageSize = val;
    getListData();
};
// 切换分页
const handleCurrentChange = (val) => {
    params.pageCurrent = val;
    getListData();
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-form--inline {
    padding-left: 0 !important;
}

::v-deep .el-radio__label {
    display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
    display: none !important;
}

:v-deep .el-tree-node {
    .is-leaf+el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
}

::v-deep .el-overlay-dialog {
    overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
    display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
    display: none;
}

.el-form {
    margin-top: 10px;
    display: flex;
    //   flex-wrap: wrap;
    justify-content: space-between;
}

.search {
    width: 300px;
    display: flex;
    position: absolute;
    right: 20px;
    top: 20px;
}

.el-form-item {
    text-align: center;
    width: 400px;
}

.flx {
    display: flex;
    width: 100%;

    .el-button {
        margin-left: 10px;
    }
}

.box {
    width: 100%;
    height: 516px;
    overflow-y: hidden;
    border: 1px solid var(--el-color-primary);
    display: flex;
    justify-content: space-between;
}

.treeBox2 {
    overflow: auto;
}

.cskbox {
    width: 40px;
    padding: 107px 0;
    margin-right: 20px;

    .el-icon {
        width: 4em !important;
        height: 6em !important;
    }

    .el-icon svg {
        width: 3em !important;
        height: 3em !important;
    }
}

.listbox {
    border: 1px solid var(--el-color-primary);
    width: 45%;
    overflow-y: scroll;

    ul>li {
        padding: 4px 10px;
        box-sizing: border-box;
    }

    .activ {
        background-color: var(--el-color-primary);
    }
}

.bot_font {
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #ffff;
    margin-top: 10px;
}

.fenye {
    margin-top: 10px;
}

::v-deep .el-dialog__body {
    overflow: auto !important;
    height: 600px !important;
}
</style>