<!-- 考勤统计 -->
<template>
	<div class='attendanceStatistics'>
		<el-tabs v-model="activeName" style="margin-top: 20px;" type="card"  @tab-click="handleClick">
			<el-tab-pane name="person" style="border-top-left-radius: 40px;">
				<span slot="label" class="tabMargin">
					个人统计
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<div style="display: inline-block;height: 50px;line-height: 50px;">
						<el-date-picker
										style="margin-top: 5px;"
										v-model="monthPerson"
										type="monthrange"
										@change="monthPersonChange"
										range-separator="至"
										:editable="false"
										:clearable="false"
										value-format="yyyy-MM"
										start-placeholder="开始月份"
										end-placeholder="结束月份">
						</el-date-picker>
					</div>
					<attendance-table :tableList="tableData"></attendance-table>
				</div>
			</el-tab-pane>
			<el-tab-pane name="department" >
				<span slot="label" class="tabMargin">
					部门统计
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<div class="" style="vertical-align: middle;line-height: 50px;margin: 5px 0;">
						<!--<div style="display: inline-block;width:100%;height: 50px;line-height: 50px;">-->
							<!--<a-tree-select-->
											<!--style="width: 30%"-->
											<!--:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"-->
											<!--:treeData="treeData"-->
											<!--placeholder="Please select"-->
											<!--treeDefaultExpandAll-->
											<!--v-model="value"-->
							<!--&gt;-->
							<!--</a-tree-select>-->
						<!--</div>-->
						<div style="display: inline-block;height: 50px;line-height: 50px;">
							<el-date-picker
											style="margin-top: 5px;"
											v-model="monthValue"
											type="monthrange"
											range-separator="至"
											:editable="false"
											:clearable="false"
											@change="monthValueChange"
											value-format="yyyy-MM"
											start-placeholder="开始月份"
											end-placeholder="结束月份">
						</el-date-picker>
						</div>
						<el-button style="position: absolute;right: 0px;top: 10px;" @click="exportExcel" type="primary">导出</el-button>
					</div>
					<attendance-table :tableList="tableData" ></attendance-table>
				</div>
			</el-tab-pane>
		</el-tabs>
		<!--<div class="pageClass">-->
			<!--<el-pagination-->
							<!--background-->
							<!--hide-on-single-page-->
							<!--@size-change="handleSizeChange"-->
							<!--@current-change="handleCurrentChange"-->
							<!--:current-page.sync="currentPage"-->
							<!--:page-size="pageSize"-->
							<!--layout="prev, pager, next, jumper"-->
							<!--:total="total">-->
			<!--</el-pagination>-->
		<!--</div>-->
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import attendanceTable from '../../components/attendanceTable';
	import fileDownload from 'js-file-download'
	export default {
		name: "attendanceStatistics",
//import引入的组件需要注入到对象中才能使用
		components: {attendanceTable},
		data () {
//这里存放数据
			return {
				currentUser: '',
				activeName: 'person',
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				treeData: [],
				value: '',
				monthValue: '',
				showDepartment: false,
				monthPerson: ''
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			value(value) {
				console.log(value);
			},
		},
//方法集合
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				this.currentPage = 1;
				if (tab.name === 'person') {
					this.getDataListPersons();
				} else {
					this.getDataListDepartments();
				}
			},
			monthPersonChange(val) {
				console.log(val)
				this.monthPerson = val;
				this.getDataListPersons();
			},
			monthValueChange(val) {
				console.log(val)
				this.monthValue = val;
				this.getDataListDepartments();
			},
			getDataListPersons() {
				console.log(this.monthPerson)
				let obj = {
					startDate: this.monthPerson[0],
					id: this.currentUser.id,
					endDate: this.monthPerson[1]
				}
				this.tableData = [];
				this.$axios.getPersonAttendance(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.tableData.push(res.data);
					}
				})
			},
			getDataListDepartments() {
				let obj = {
					startDate: this.monthValue[0],
					id: this.currentUser.id,
					endDate: this.monthValue[1],
				}
				this.$axios.getDepartmentAttendance(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.tableData = res.data;
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				if (this.activeName === 'person') {
					this.getDataListApplication();
				} else {
					this.getDataListApproval();
				}
				console.log(`当前页: ${val}`);
			},
			getSelectDepartment() {
				console.log(this.currentUser);
				this.$axios.getDepartmentFind(this.currentUser.id).then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						if (res.data !== null && res.data.length > 0) {
							// this.options = res.data;
							let jsonData = JSON.stringify(res.data);
							jsonData = jsonData.replace(/departments/g, 'children');
							jsonData = jsonData.replace(/name/g, 'title');
							// console.log(jsonData)
							let parseData = JSON.parse(jsonData);
							// console.log(parseData)
							// parseData.forEach((v, i) => {
							// 	console.log(v)
							// })
							// this.setName(parseData);
							// console.log(parseData)
							// this.options = parseData;
							// this.department = parseData[0].id;
							// this.doSearch(parseData[0].id);
							this.doSearch(parseData);
						}
					}
				})
			},
			setName(datas){ //遍历树  获取id数组
				for(let i in datas){
					datas[i].value = datas[i].id;
					if (datas[i].children.length === 0) {
						delete datas[i].children;
					}
					if(datas[i].children){
						this.setName(datas[i].children);
					}
				}
				this.treeData = datas;
				return datas;
			},
			async doSearch(val) {
				let result = await this.setName(val);
				console.log(result)
				this.value = result[0].id;
				// this.getPersonList()
			},
			doHandleDate() {
				let myDate = new Date();
				let tYear = myDate.getFullYear();
				let tMonth = myDate.getMonth();

				let m = tMonth + 1;
				if (m.toString().length == 1) {
					m = "0" + m;
				}
				this.monthPerson = [tYear +'-'+ m,  tYear +'-'+ m];
				this.monthValue =  [tYear +'-'+ m,  tYear +'-'+ m];
			},
			exportExcel() {
				let obj = {
					id: this.currentUser.id,
					startDate: this.monthValue[0],
					endDate: this.monthValue[1]
				}
				this.$axios.postExportExcel(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'}),
							fileName = '文件名称';
						this.downFile(blob, fileName);
					}
				})
			},
			downFile(blob, fileName) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, fileName);
				} else {
					var link = document.createElement('a');
					link.href = window.URL.createObjectURL(blob);
					link.download = fileName;
					link.click();
					window.URL.revokeObjectURL(link.href);
				}
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.currentUser = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			// if (this.currentUser.roles[0].authorities.findIndex(item => item.name === '部门统计') > -1) {
			// 	this.showDepartment = true;
			// }
			this.doHandleDate();
			this.getSelectDepartment();
			let that = this;
			setTimeout(function () {
				that.getDataListPersons();
			}, 200);
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.attendanceStatistics{
		height: 100%;
		margin-top: 20px;
	}

	.tabMargin{
		margin: 0 30px;
		font-size: 18px;
	}

	/deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav {
		border: 0px solid #E4E7ED;
		border-bottom: none;
		border-radius: 40px 40px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/deep/ #tab-person {
		border-top-left-radius: 40px;
	}
	/deep/ #tab-department {
		border-top-right-radius: 40px;
	}

	/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
		border-bottom-color: #FFF;
		background: linear-gradient(to right, #50A4D5 , #5054D5);
		color: #FFF;
	}

	/deep/ .el-tabs__item:hover {
		border-bottom-color: #FFF;
		color: #FFF;
		background: linear-gradient(to right, #50A4D5 , #5054D5);
		cursor: pointer;
	}

	/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
		border-bottom: 1px solid transparent;
		border-left: 1px solid #FFF;
		-webkit-transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
		transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
	}

	/deep/ .el-tabs__item {
		padding: 0 20px;
		height: 40px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		line-height: 40px;
		display: inline-block;
		list-style: none;
		font-size: 14px;
		font-weight: 500;
		color: #464358;
		background: #dcdcf7;
		position: relative;
	}

	/deep/.el-card__body {
		padding: 15px;
	}

	/deep/ .el-card.is-always-shadow {
		box-shadow: none;
	}

	/deep/ .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
		-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}

	.cardShadow:hover{
		cursor: pointer;
		box-shadow: 0 5px 15px 0 rgba(7,81,154,0.3) !important;
	}

	/deep/ .cardDiv .el-badge__content.is-fixed {
		position: absolute;
		top: -5px;
		right: 0px;
		-webkit-transform: translateY(-50%) translateX(100%);
		transform: translateY(-50%) translateX(100%);
	}

	/deep/ .cardDiv .el-badge {
		width: 100%;
		position: relative;
		vertical-align: middle;
		display: inline-block;
	}

	/deep/ .el-tabs--card>.el-tabs__header {
		border-bottom: 2px solid rgb(167, 172, 234);
	}
	.pageClass {
		text-align: center;
		position: fixed;
		bottom:30px;
		left:0;
		right:0;
		width: 500px;
		margin-left: 44%;
	}

	/deep/ .ant-select-selection {
		border: 1px solid #a8acea; /*no*/
		border-radius: 30px;
	}
	/deep/ .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
		border-color: #a8acea;
		border-right-width: 1px !important;
		outline: 0;
		-webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
		box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
	}

	/deep/ .ant-select-selection--single {
		position: relative;
		height: 40px;
		cursor: pointer;
	}

	/deep/ .el-date-editor .el-range-separator {
		padding: 0 5px; /*no*/
		line-height: 40px;
		width: 10%;
		color: #303133;
		margin-top: -9px;
	}

	/deep/ .el-date-editor .el-range__icon {
		font-size: 14px;
		margin-left: -5px; /*no*/
		color: #C0C4CC;
		float: left;
		line-height: 40px;
		margin-top: -8px;
	}
</style>
