<!--
@ 作者: 秦东
@ 时间: 2023-11-08 10:45:48
@ 备注: 公司下所有部门当前时间统计值
-->
<script lang='ts' setup>
import * as echarts from 'echarts';	//引入图形界面 
import { orgTargetAnnualStatistics } from '@/api/displayboardapi/indexapi'

const props = defineProps({
	educationOrgId:{
		type:Number,
		default:309
	},
	orgListCont:{
		type:Object,
		default(){
			return {}
		}
	}
})
const curreorgId = ref<number>(309)
const allOrgOneMonth = ref<any>() //指定月
const orgAllYearLoading = ref(false)
//所有行政组织月度画图对象
const orgYearFullMonths = ref(null)
//行政组织月度绩效
const departmentYears = ref<any>(null)

const yearsInfo = ref<any>("2023")

//获取统计图
const orgChartDrowData = () => {
	orgAllYearLoading.value = true
	let timeYears = allOrgOneMonth.value.getFullYear()
	yearsInfo.value = timeYears
	let sendInfo = {
		orgid:curreorgId.value.toString(),
		years:timeYears
	}
	orgTargetAnnualStatistics(sendInfo)
		.then((data:any)=>{
			console.log(" props.dlyear.data", data)
			if(data.code == 0){
				let dataAry = new Array
				if(data.data.series&&data.data.series.length > 0){
					data.data.series.forEach((item:any)=>{
						dataAry.push({
							name: item.name,
							type: 'line',
							data: item.datalist
						})
					})
				}
				let option = {
 
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: data.data.legend,
						bottom:0
					},
					grid: {
						top:"20px",
						left: '1%',
						right: '2%',
						bottom: '60px',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.data.xAxis
					},
					yAxis: {
						type: 'value',
						max:data.data.maxscore,
						min:data.data.minscore,
					},
					series: dataAry
				};
				if(orgYearFullMonths.value){
					orgYearFullMonths.value.clear();
					orgYearFullMonths.value.setOption(option)
				}
				

			}
			orgAllYearLoading.value = false
		})
		.finally(()=>{
			
		})
}

onMounted(() => {
	let dataTime:any = new Date();
	allOrgOneMonth.value = dataTime
	
	curreorgId.value = props.educationOrgId
	orgYearFullMonths.value = markRaw(echarts.init(departmentYears.value))

	orgChartDrowData();
	window.addEventListener('resize', () => {
		// if(orgYearFullMonths.value){
			orgYearFullMonths.value.resize();
		// }
	});
	
	
})
</script>
<template>
	<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
			<!--分厂数据统计-->
			<div class="orgAllMothsTitle">
				<el-text class="titleInfo">{{ yearsInfo }}年绩效成绩</el-text>
				<div>
					<el-select v-model="curreorgId" placeholder="请选择公司"  @change="orgChartDrowData">
						<el-option
							v-for="item in props.orgListCont"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
					<el-date-picker
						v-model="allOrgOneMonth"
						type="year"
						placeholder="请选择时间"
						@change="orgChartDrowData"
					/>
				</div>
							
			</div>
		<div ref="departmentYears" v-loading="orgAllYearLoading" element-loading-text="Loading..." class="allOrgAxisCares">
							
		</div>
	</el-card>
</template>
<style  lang='scss' scoped>
.readback{
	// background-color:#FF0000;
	.allOrgAxisCares{
		display: block;
		width:100%;
		height:280px;
		// overflow:auto;
	}
	
}
.orgAllMothsTitle{
	width:100%;
	display: flex;
	align-items: center;
	justify-content:space-between;
		
}
.greenColor{
	// background-color:#FFAC52;
	
	// padding:0 10px 0 10px;
}
.span_icon_left{
	margin-right:10px;
}
.cart_top_juLi{
	// margin-top:10px;
}
.titleInfo{
	font-size: 20px;
	font-weight: bold;
}
</style>
