<!--
@ 作者: 秦东
@ 时间: 2023-11-06 13:39:13
@ 备注: 首页
-->
<script lang='ts' setup>
import * as echarts from 'echarts';	//引入图形界面

import { useUserStore } from "@/store/modules/user";


import { sendOrgCont } from '@/api/displayboardapi/types'
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi'

import UserInfo from "@/views/dashboard/components/userinfo.vue";

import DingLiangTongBiHuanBi from "@/views/dashboard/components/dltbhb.vue";

import EducationChart from "@/views/dashboard/components/education.vue";

const userStore = useUserStore();

const legendList = new Array
const seriesData = new Array
const orgListCont = ref<sendOrgCont>()
const educationOrgId = ref<number>(309)
//公司主部门
const mainOrgList = ref<any[]>([])
const targetListAry = ref<any[]>([])
const targetXingListAry = ref<any[]>([])
//定性同比环比分析
const dingXingYear = ref<number>()
const dingXingOrg = ref<any>()
const dingXingTarget = ref<any>()
//定量指标目标达成
const dingLiangDaChengYear = ref<number>()
const dingLiangDaChengOrg = ref<any>()
const dingLiangDaChengTarget = ref<any>()
//定量同比环比分析
const dingLiangYear = ref<number>()
const dingLiangOrg = ref<any>()
const dingLiangTarget = ref<any>()

const loadPage = ref(false)
/**
 * 获取行政组织
 */
function getOrgList(){
	getOrgChiled({id:313})
		.then(( {data} )=>{
			console.log("获取行政组织-2-->",data)
			orgListCont.value = data.list
			educationOrgId.value = data.current
			
		})
}



//根据行政组织获取指标
const orgAboutTarget = (orgId:string,tarAttribute:number) =>{
	let sendIfo = {
		id:orgId,
		attribute:tarAttribute
	}
	targetListForDepartment(sendIfo)
		.then((data:any) =>{
			console.log("获取指标-1-->",data)
			if(tarAttribute==1){
				targetXingListAry.value = data.data
				if(data.data&&data.data.length>0){
					dingXingTarget.value = data.data[0].id
				}
			}else{
				targetListAry.value = data.data
				if(data.data&&data.data.length>0){
					dingLiangDaChengTarget.value = data.data[0].id
					dingLiangTarget.value = data.data[0].id.toString()
				}
			}
			
		})
		.finally(() =>{
			loadPage.value = true
		})
}

//所有行政组织月度画图对象
const orgYearFullMonths = ref<any>()
const orgAllYears = ref<any>()	//当前年
const allOrgOneMonth = ref<any>() //指定月
const oenOrgAllYears = ref<any>() //单一行政指定年
const oenOrg = ref<any>() //单一行政组织
//行政组织月度绩效
const departmentYears = ref<any>(null)

//渲染完页面再执行
onMounted(() => {
	let dataTime:any = new Date();
	console.log("dataTime--->",dataTime.getFullYear())
	let timeStrint:any = dataTime;
	dingXingYear.value = dataTime
	dingLiangDaChengYear.value = dataTime
	dingLiangYear.value = dataTime
	console.log("timeStrint-1-->",dataTime,dingLiangYear)
	getOrgList();
	orgYearFullMonths.value = echarts.init(departmentYears.value)
	let option = {
 
 tooltip: {
   trigger: 'axis'
 },
 legend: {
   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
   bottom:0
 },
 grid: {
   top:"20px",
   left: '1%',
   right: '2%',
   bottom: '30px',
   containLabel: true
 },
 toolbox: {
   feature: {
	 saveAsImage: {}
   }
 },
 xAxis: {
   type: 'category',
   boundaryGap: false,
   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
   type: 'value'
 },
 series: [
   {
	 name: 'Email',
	 type: 'line',
	 stack: 'Total',
	 data: [120, 132, 101, 134, 90, 230, 210]
   },
   {
	 name: 'Union Ads',
	 type: 'line',
	 stack: 'Total',
	 data: [220, 182, 191, 234, 290, 330, 310]
   },
   {
	 name: 'Video Ads',
	 type: 'line',
	 stack: 'Total',
	 data: [150, 232, 201, 154, 190, 330, 410]
   },
   {
	 name: 'Direct',
	 type: 'line',
	 stack: 'Total',
	 data: [320, 332, 301, 334, 390, 330, 320]
   },
   {
	 name: 'Search Engine',
	 type: 'line',
	 stack: 'Total',
	 data: [820, 932, 901, 934, 1290, 1330, 1320]
   }
 ]
};

	orgYearFullMonths.value.setOption(option)
})
</script>
<template>
		<div ref="masterBody" class="app-container" style="margin-top:10px;">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
					<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
						<!--分厂数据统计-->
						<div class="orgAllMothsTitle">
							<el-text class="titleInfo">2023年绩效成绩</el-text>
							<el-date-picker
								v-model="allOrgOneMonth"
								type="year"
								placeholder="请选择时间"
							/>
						</div>
						<div ref="departmentYears" class="allOrgAxisCares">
							
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
					<UserInfo :user-store="userStore" />
				</el-col>
			</el-row>
			<el-row :gutter="10" class="cart_top_juLi">
				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">

					<el-row :gutter="10">
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
						
							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
								<!--单月全厂统计-->
								<div class="orgAllMothsTitle">
									<el-text class="titleInfo">2023年10月绩效成绩</el-text>
									<el-date-picker
										v-model="orgAllYears"
										type="month"
										placeholder="请选择时间"
									/>
								</div>
								<div ref="departmentMonths" class="allOrgAxisCares">
									
								</div>
							</el-card>
						
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback">
							
							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
								<!--单一行政组织全年统计-->
								<div class="orgAllMothsTitle">
									<el-text class="titleInfo">2023年备煤绩效成绩</el-text>
									<div>
										<el-select v-model="oenOrg" placeholder="" style="width:100px">
											<el-option
												v-for="item in options"
												:key="item.value"
												:label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<el-date-picker
											v-model="oenOrgAllmonth"
											type="month"
											placeholder="请选择时间"
											style="width:120px"
										/>
									</div>
								</div>
								<div ref="departmentMonths" class="allOrgAxisCares">
									
								</div>
							</el-card>
						
						</el-col>
					</el-row>
					
					



				</el-col>
				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
				
					<el-card shadow="always" :body-style="{ padding: '10px' }"  style = "border-radius: 12px;margin-top: 10px;; height: 335px">
						<!--单月全厂统计-->
						<div class="orgAllMothsTitle">
							<el-text class="titleInfo">热门新闻</el-text>	
						</div>
						<div ref="departmentMonths" class="allOrgAxisCares">
									
						</div>
					</el-card>
				
				</el-col>
			</el-row>
			<el-row :gutter="10" class="cart_top_juLi">
				<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback">
				
					<el-row :gutter="10">
						<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
								<div class="orgAllMothsTitle">
									<el-row>
										<el-col :span="8">
											<el-date-picker
												v-model="dingXingYear"
												type="year"
												placeholder="请选择时间"
												style="width:100%"
											/>
										</el-col>
										<el-col :span="8">
											<el-select v-model="dingXingOrg" placeholder="" style="width:100%">
												<el-option
													v-for="item in mainOrgList"
													:key="item.id"
													:label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</el-col>
										<el-col :span="8">
											<el-select v-model="dingXingTarget" placeholder="" style="width:100%">
												<el-option
													v-for="item in targetXingListAry"
													:key="item.id"
													:label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</el-col>
									</el-row>
								</div>
								<div ref="departmentMonths" class="allOrgAxisCares">
									
								</div>
							</el-card>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
							<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
								<div class="orgAllMothsTitle">
									<el-row>
										<el-col :span="8">
											<el-date-picker
												v-model="dingLiangDaChengYear"
												type="year"
												placeholder="请选择时间"
												style="width:100%"
											/>
										</el-col>
										<el-col :span="8">
											<el-select v-model="dingLiangDaChengOrg" placeholder="" style="width:100%">
												<el-option
													v-for="item in mainOrgList"
													:key="item.id"
													:label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</el-col>
										<el-col :span="8">
											<el-select v-model="dingLiangDaChengTarget" placeholder="" style="width:100%">
												<el-option
													v-for="item in targetListAry"
													:key="item.id"
													:label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</el-col>
									</el-row>
								</div>
								<div ref="departmentMonths" class="allOrgAxisCares">
									
								</div>
							</el-card>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
							<!--定量指标同比环比-->
							<DingLiangTongBiHuanBi v-if="loadPage"  :main-org-list="mainOrgList" :target-list-ary="targetListAry" :dlyear="dingLiangYear" :ding-liang-org="dingLiangOrg" :ding-liang-target="dingLiangTarget" />
						</el-col>
					</el-row>
				
				</el-col>
				<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor">
					<EducationChart :org-list-cont="orgListCont" :education-org-id="educationOrgId" />
					
				</el-col>
			</el-row>
		</div>
</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>
