<template>
    <div>
        <div class="bigBox" :style="{ height: bigHeight }">
            <!-- 组织机构信息 -->
            <div class="left" :style="{ width: lfBoxWid }">
                <div class="title">
                    <span v-if="iconChange">组织机构信息</span>
                    <el-icon @click="handleCollapse" v-show="iconChange">
                        <DArrowLeft />
                    </el-icon>
                    <el-icon @click="handleCollapse" v-show="!iconChange">
                        <DArrowRight />
                    </el-icon>
                </div>
                <div class="treeBox" :style="{ height: treeHeight }">
                    <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" :searchType="'03'" clearable filterable
                        @getdeptData="getdeptId" />
                </div>
            </div>

            <!--  -->
            <div class="right" :style="{ width: rgBoxWid }">
                <div class="headBox" style="justify-content: space-between">
                    <div class="title">在线安全学习统计列表
                    </div>
                </div>
                <!-- 表格 -->
                <div class="tabBox">
                    <el-table ref="multipleTableRef" stripe :data="tableData" 
                    v-loading="tableloading" height="78vh"
                        element-loading-text="数据加载中..." style="width: 100%" @selection-change="handleSelectionChange"
                        border>
                        <el-table-column label="单位/部门" property="orgname"></el-table-column>
                        <el-table-column label="人员总数" prop="userCount">
                        </el-table-column>
                        <el-table-column label="应参与学习人数" property="ycy"></el-table-column>
                        <el-table-column label="已学习人员数" prop="sjcy"></el-table-column>
                    </el-table>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute();
const { proxy } = getCurrentInstance();
// 数据
const { D_TB_JCLX } = proxy.$dict("D_TB_JCLX");
const bigHeight = ref(); //整个高度
const dialogVisible = ref(false);
const tableloading = ref(false);
const yearsTime = ref([]);//年份列表
const tableData = ref([]);
const ids = ref(null)
// 树的展开与折叠
const iconChange = ref(true)
const lfBoxWid = ref('300px')
const rgBoxWid = ref('calc(100% - 300px)')
const seeData = ref({});
// 分页
const listQuery = ref({
});

const total = ref(0);
onMounted(() => {
    ids.value = route.query.id
    listQuery.value.id = route.query.id
    bigHeightFn();
});
//获取部门数据
const getdeptId = (val) => {
    listQuery.value.deptid = val.id;
    getTableData();
}

// 方法
const bigHeightFn = () => {
    bigHeight.value = window.innerHeight - 147 + "px";
};
const handleCollapse = () => {
    iconChange.value = !iconChange.value
    if (iconChange.value) {
        lfBoxWid.value = '300px'
        rgBoxWid.value = 'calc(100% - 300px)'
    }
    else {
        lfBoxWid.value = '40px'
        rgBoxWid.value = 'calc(100% - 40px)'
    }
}

// 获取表格数据
const getTableData = () => {
    tableloading.value = true
    getApi(listQuery.value, "/mosty-jcgl/videoStudy/getStatistics").then((res) => {
        tableData.value = res;
        tableloading.value = false
    });
};
</script>

<style lang="scss" scoped>
.from_box {
    display: flex;
    justify-content: space-between;

    .from_left {
        width: 25%;
    }
}

.el-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

}

.bigBox {
    display: flex;

    .title {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        color: #0F3916;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-icon {
            cursor: pointer;
        }
    }

    .left {
        width: 300px;
        // height: 1030px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;

        .treeBox {
            overflow: auto;
        }
    }

    .right {
        // width: 100%;
        padding: 0 10px;
        box-sizing: border-box;

        .headBox {
            display: flex;
            align-items: center;
            background:#fff;
        }

        .btnBox {
            .el-select {
                width: 150px;
            }

            .header-right {
                display: flex;
                align-items: center;
            }

            .btnBox {
                display: flex;
                width: 500px;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
}

.tabBox {
    height: calc(100% - 70px);
    border-left: 0 !important;

    .fenye {
        top: 95%;
    }
}
</style>