<template>
	<div>
		<header class="flex-box flex-d-center">
			<div class="flex-box">
				<div class="flex-box-ce">
					<div class="title">年份</div>
					<el-date-picker v-model="param.year" :clearable="false" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
				</div>
				<div class="title">部门</div>
				<div class="dept_wdiv">
					<div class="dept_inp" @click="show_dept_selector = true">
						<span v-if="deptVisibleName != ''">{{ deptVisibleName }}</span>
						<span v-else style="color: #b9b9b9;">选择部门</span>
					</div>
					<svg-icon slot="reference" icon-class="xArrowsX" />
				</div>
				<div class="flex-box-ce">
					<div class="title">考核表</div>
					<el-cascader
						v-model="headValue"
						:options="options"
						:show-all-levels="false"
						clearable
						:props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'list' }"
					></el-cascader>
				</div>
				<el-select style="position: relative;padding-left: 10px;" v-model="employee_ids" filterable clearable class="margin-l" placeholder="姓名搜索">
					<el-option v-for="item in employees" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</div>
			<el-button icon="el-icon-s-promotion" type="primary" @click="downloadTemplate" v-if="this.$isAuthoritys(this.$11)">导出报表</el-button>
		</header>
		<div class="yellow">仅支持月度考核的对比</div>
		<aside v-loading="tableDataLoad">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="employee_name" label="姓名">
					<template slot-scope="scope">
						<div class="flex-box-ce">
							<!-- <userImage :id="scope.row.employee_id" :user_name="scope.row.employee_name" width="35px" height="35px" fontSize="12px"></userImage> -->
							<span style="margin-left: 10px; line-height: 50px;">{{ scope.row.employee_name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="dept" label="部门">
					<template slot-scope="scope">
						<div v-if="scope.row.dept.length > 0">
							<span v-for="(item, index) in scope.row.dept" :key="index">
								{{ item }}
								<span v-if="scope.row.dept.length - index > 1">,</span>
							</span>
						</div>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column :prop="item.code" :label="item.label" v-for="(item, index) in monthList" :key="item.code">
					<template slot-scope="scope">
						<span>{{ scope.row[item.code].final_point }}</span>
						<br />
						<span class="blue">{{ scope.row[item.code].final_level }}</span>
					</template>
				</el-table-column>
			</el-table>
			<Pagination :page="param.page" :page_size="param.page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
		</aside>
		<EmployeeSelector
			:title="'选择部门'"
			:isChecKedAll="false"
			:can_select_employee="false"
			:can_select_dept="true"
			:dept_children="false"
			:selected="dept_selected"
			:visible.sync="show_dept_selector"
			@confirm="dept_confirm"
		/>
	</div>
</template>

<script>
import JxSearch from '@/components/public/JxSearch';
import EmployeeSelector from '@/components/public/EmployeeSelector';
export default {
	data() {
		return {
			tableDataLoad: false, //列表load
			monthList: [
				{ label: '一月', code: 'month_01' },
				{ label: '二月', code: 'month_02' },
				{ label: '三月', code: 'month_03' },
				{ label: '四月', code: 'month_04' },
				{ label: '五月', code: 'month_05' },
				{ label: '六月', code: 'month_06' },
				{ label: '七月', code: 'month_07' },
				{ label: '八月', code: 'month_08' },
				{ label: '九月', code: 'month_09' },
				{ label: '十月', code: 'month_10' },
				{ label: '十一月', code: 'month_11' },
				{ label: '十二月', code: 'month_12' }
			],
			total: 10,
			tableData: [],
			// 选择部门
			deptVisibleName: '',
			dept_selected: { dept: [], employee: [] },
			show_dept_selector: false,
			// 考核表
			options: [], //
			headValue: [],
			// 参数
			param: {
				year: this.$moment().format('YYYY'),
				page: 1,
				page_size: 10,
				dept_ids: '',
				employee_ids: '',
				group_ids: ''
			},
			employee_ids: '',
			employees: []
		};
	},
	components: { JxSearch, EmployeeSelector },
	watch: {
		employee_ids(val) {
			if (val) {
				this.param.employee_ids = [val];
			} else {
				this.param.employee_ids = '';
			}
			this.getDataList();
		},
		'param.year'(val) {
			this.getDataList();
		},
		headValue(val) {
			if (val.length > 0) {
				this.param.group_ids = JSON.stringify([val[val.length - 1]]);
			} else {
				this.param.group_ids = '';
			}
			this.getDataList();
		}
	},
	created() {
		this.employees = this.$getEmployeeList(1);
		this.assessTree();
	},
	mounted() {
		this.getDataList();
	},
	methods: {
		downloadTemplate() {
			this.$axios('post', '/api/per/user/download_token').then(res => {
			  let token=res.data.data.token
			  let url = `${this.$serverdomain}/api/download/year_statistics?year=${this.param.year}&dept_ids=${this.param.dept_ids
			  }&employee_ids_code=${this.$returnCode(this.param.employee_ids)}&group_ids=${this.param.group_ids}&token=${token}`;
			  window.open(url, '_blank');
			});
		},
		dept_confirm(data) {
			//部门选择
			this.dept_selected = { dept: [], employee: [] };
			this.deptVisibleName = '';
			let deptList_id = [];
			if (data.dept !== null && data.dept.length != 0) {
				this.dept_selected = data;
				data.dept.forEach((element, index) => {
					deptList_id.push(element.dept_id);
					this.deptVisibleName += element.dept_name;
					if (data.dept.length - index > 1) {
						this.deptVisibleName += ',';
					}
				});
			}
			this.param.page = 1;
			this.param.dept_ids = JSON.stringify(deptList_id);
			this.getDataList();
		},
		getDataList() {
			this.tableDataLoad = true;
			this.param.employee_ids_code = this.$returnCode(this.param.employee_ids);
			this.$axios('get', '/api/per/statistics/year', this.param)
				.then(res => {
					if (res.data.code == 1) {
						let list = res.data.data.list;
						list.forEach(item => {
							item.employee_name = this.$getEmployeeList()[item.employee_id].name;
						});
						this.tableData = list;
						this.total = res.data.data.total;
					}
				})
				.finally(() => {
					this.tableDataLoad = false;
				});
		},
		//搜索
		searchList(data) {
			this.param.keywords = data;
			this.getDataList();
		},
		// 页面变更
		handleCurrentChange(val) {
			this.param.page = val;
			this.getDataList();
		},
		// 页面跳转
		handleSizeChange(val) {
			this.param.page_size = val;
			this.getDataList();
		},
		//请求绩效树
		assessTree() {
			this.$axios('get', '/api/per/evaluation/all_group', { page: 1 }).then(res => {
				if (res.data.code == 1) {
					let data = res.data.data.list;
					let options = [
						{ name: '月度', id: 2, list: [] },
						{ name: '日', id: 1, list: [] },
						{ name: '季度', id: 3, list: [] },
						{ name: '半年度', id: 4, list: [] },
						{ name: '年度', id: 5, list: [] },
						{ name: '自定义', id: 6, list: [] }
					];
					data.forEach(item => {
						options.forEach(item2 => {
							if (item2.id == item.cycle_type) {
								item2.list.push(item);
							}
						});
					});
					this.options = options;
				}
			});
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.title {
	width: 70px;
	text-align: right;
	vertical-align: middle;
	float: left;
	font-size: 14px;
	color: #606266;
	line-height: 40px;
	padding: 0 12px 0 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: 600;
}
header {
	margin-bottom: 20px;
}
.dept_wdiv {
	width: 200px;
	position: relative;
	.dept_inp {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 9;
		height: 40px;
		box-sizing: border-box;
		line-height: 40px;
		border: 1px solid #e0e0e0;
		border-radius: 3px;
		font-size: 14px;
		padding: 0 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		cursor: pointer;
		color: #676767;
	}
	svg {
		position: absolute;
		top: 14px;
		right: 10px;
		font-size: 14px;
		color: #b5b5b5;
	}
}
.color_blue {
	color: #1299f9;
}
</style>
