<template>
	<div class="container">
		<MOSTY.Assort :title="'在线教育学习情况'">
			<template #btn>
				<el-date-picker style='width:100px' v-model="yearxxqk" type="year" @change='getzxjyxx'
					format="YYYY" value-format="YYYY" />
			</template>
		</MOSTY.Assort>
		<section style="height: calc(100% - 52px);">
			<MOSTY.Table :table-columns="columnTable" :tableData="xxqktab" :tableloading="xxtableloading"
				:isSelect="false" style="width: 100%;">
				<template #xxrs="{ row }"> <span>{{ row.xxrs ? row.xxrs : 0 }}</span></template>
				<template #xxzs="{ row }"> <span>{{ row.xxzs ? row.xxzs : 0 }}</span></template>
			</MOSTY.Table>
		</section>
	</div>
</template>

<script setup>
import { ref,onMounted } from "vue"
import * as MOSTY from "@/components/MyComponents/index";
import {getApi} from "@/api/tobAcco_api.js"
/** 学习清空table */
const xxqktab = ref([]);
const yearxxqk = ref(new Date().getFullYear().toString())
const xxtableloading = ref(false);
const columnTable = ref([
	{ title: '课件种类', prop: 'name' },
	{ title: '数量', prop: 'kjzs' },
	{ title: '学习人数', prop: 'xxrs', slot: true, },
	{ title: '年度学习总次数', prop: 'xxzs', slot: true, }
]);
const orgcode = ref('')
function getzxjyxx(params) {
	let data = {
		orgcode: orgcode.value,
		year: yearxxqk.value
	}
	xxtableloading.value = true
	getApi(data, '/mosty-jcgl/videoStudyUser/getZdpxry').then((res) => {
		xxqktab.value = res
		xxtableloading.value = false

	}).catch(err => {
		xxqktab.value = []
		xxtableloading.value = false
	}).finally(() => {
		xxtableloading.value = false
	})
}
onMounted(() => {
	getzxjyxx()
})
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
}
</style>