<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%" height="50vh">
                    <el-table-column label="企业名称" prop="orgName" fixed width="240" />
                    <el-table-column label="总会议次数" min-width="120">
                        <template #default="{ row }">
                            {{ row.yijd + row.erjd + row.sanjd + row.sijd }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="yijd" label="一季度会议次数" min-width="120" />
                    <el-table-column prop="erjd" label="二季度会议次数" min-width="120" />
                    <el-table-column prop="sanjd" label="三季度会议次数" min-width="120" />
                    <el-table-column prop="sijd" label="四季度会议次数" min-width="120" />
                    <el-table-column prop="sbcs" label="上报次数" width="110" fixed="right" />
                    <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>
        </el-dialog>
        <Dialog ref="tabDialog" :title="dialogTitle" :rowItem="rowItem" :type="type" :queryItem="props.params" />
    </div>
</template>
<script setup>
// 引入
import { ref, reactive, onMounted } from "vue";
import Dialog from './dialog.vue'
import { createAndClickLink } from "@/utils/tools.js";
import { postApi, getApi } from "@/api/tobAcco_api.js";
const pageData = reactive({
    tableData: [],
    orgCodes: [],
    params: {},
    currItem: {}
});
const rowItem = ref(null);
const dialogTitle = ref("");
const type = ref('')
const loading = ref(false);
const multipleTableRef = ref(null);
const tabDialog = 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) => {
    type.value = '02'
    rowItem.value = row;
    dialogTitle.value = `安委会会议历史上报记录（${row.orgName}）`;
    tabDialog.value.dialogVisible = true;
}
const emits = defineEmits(["close"]);
const closed = () => {
    emits("close");
};
onMounted(() => {
    orgCode.value = props.currCode
    getListData()
})

//获取列表
const getListData = (params = {}) => {
    params.cs = props.currTotal
    params.year = props.year
    params.orgcode = orgCode.value
    loading.value = true
    postApi(params, '/mosty-jcgl/data/meetingInfo/getLsjlCountList').then(res => {
        if (res) {
            pageData.tableData = res
        }
    }).finally(() => {
        loading.value = false
    })
}

</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;
}
</style>