<template>
	<div>

		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-admin-kqtj">
			<div class="vongi-bagfff margin10">
				<div class="vongi-xzdw-search">
					<input type="search" @input="doSearchCompany" v-model="subForm.name" placeholder="搜索姓名">
					<span class="mui-icon mui-icon-search"></span>
				</div>
				<div class="vongi-bread">
					<template v-for="(item,index) in navList">
						<a :class="navCanClick(item,index)?'color4fc5f7':''" @click="reloadItem(item,index)" v-text="item.name"></a>
						<span v-if="index!=navList.length-1" class="mui-icon mui-icon-forward"></span>
					</template>
				</div>
			</div>
			<div class="vongi-kqtj-center">
				<ul v-if="!isLast" class="mui-table-view margin10">
					<li v-for="(item,index) in companyList" class="mui-table-view-cell">
						<a class="mui-navigate-right" @click="reloadNext(item)">{{item.name}}（{{item.number}}）</a>
					</li>
				</ul>
				<div class="vongi-work vongi-archives">
					<div v-if="recordList.length>0 && recordList[0]['personList'].length>0" class="mui-content-padded">
						<h5 class="flew-items"><span class="iconfont icon-guanliyuan color4fc5f7"></span>组织人员</h5>
					</div>
					<ul class="mui-table-view">
						<template v-for="(iten,index) in recordList">
							<li v-for="(item,index) in iten.personList" class="mui-table-view-cell">
								<router-link :to="{name:'MasterCompanyOrganizationInfo',query:{id:item.id}}" class="mui-navigate-right">
									<h4 class="mui-pull-left flew-items">
										{{item.name}}
										<span class='mui-h6' v-text="item.remark"></span>
									</h4>
									<div :class="'mui-pull-right '+(item.workStatus==1?'color55f868':'colorFF8800')" v-text="item.workStatusN"></div>
								</router-link>
							</li>
						</template>

					</ul>
				</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Company from '@/apis/Master/company'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'MasterCompanyOrganization',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '组织架构',

				subForm: {
					name: '',
					companyId: '',
				},
				isLast: false,
				nowLevel: 0,
				navList: [{
					name: '首页',
					id: '',
					hasNext: true,
				}],

				recordList: [],
				companyList: [],

				timer: null,
				len: false

			}
		},
		created() {},
		methods: {
			//获取列表
			getList() {
				if (this.isLast) {
					this.getPersonList();
				} else {
					this.getCompanyList();
				}
			},
			//获取公司列表
			getCompanyList() {
				this.isLoading = true;
				API_Company.getCompanyList(this.subForm.companyId).then(response => {
					this.isLoading = false;

					this.companyList = response.list;
					//如果只有一条数据，自动点到里面一层
					if (this.companyList.length == 1 && this.nowLevel == 0) {
						this.reloadNext(this.companyList[0]);
					}

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取下级公司列表
			reloadNext(item) {
				if (!this.isLast) {
					this.subForm.companyId = item.id;
					this.nowLevel++;
					this.getCompanyList();
					this.navList.push(item);

					this.isLast = !item.hasNext;
				}
			},
			//获取人员列表
			getPersonList() {
				this.isLoading = true;
				API_Company.getCompanyPersonList(this.subForm).then(response => {
					this.isLoading = false;

					this.recordList = response.groupList;
					//this.absentCount = response.absentCount;
					//this.workCount = response.workCount;
					//this.leaveEarlyCount = response.leaveEarlyCount;
					//this.lateCount = response.lateCount;
					this.inputIng = false;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//面包屑选择加载
			reloadItem(item, index) {
				this.navList = this.navList.slice(0, index + 1);
				this.nowLevel = index;
				this.subForm.companyId = item.id;
				this.getCompanyList();
				this.isLast = !item.hasNext;
			},
			//判断面包屑是否可点击
			navCanClick(item, index) {
				if (index > 0) {
					if (index == this.nowLevel) {
						return false;
					} else {
						return true;
					}
				} else {
					return true;
				}
			},
			//进入搜索
			searchIn() {
				this.inputIng = false;
			},
			//离开搜索
			searchOut() {
				this.inputIng = false;
				this.getPersonList();
			},
			//防抖搜索
			doSearchCompany() {
				this.clearTimer()
				if (this.subForm.name && this.subForm.name.length > 0) {
					this.len = true
					this.timer = setTimeout(() => {
						console.log(this.subForm.name)
						//此处为接口函数
						this.getPersonList();
					}, 500)
				} else {
					if (this.len) {
						console.log(this.subForm.name)
						//此处为接口函数
						this.getPersonList();
					}
					if (this.subForm.name === '') {
						this.len = false
						return
					}
				}
			},
			clearTimer() {
				if (this.timer) {
					clearTimeout(this.timer)
				}
			},
			asynCallBack() {

			},
		},
		mounted() {
			//获取列表
			this.getList();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		},
		watch: {
			'subForm.companyId': {
				handler(newValue) {
					if (newValue) {
						this.getPersonList();
					} else {
						this.recordList = [];
					}
				},
				immediate: true,
				deep: true
			},
		},
		//keepalive监控判断
		beforeRouteLeave(to, from, next) {
			console.log(to.name);
			if (['MasterCompanyOrganizationInfo'].indexOf(to.name) > -1) {
				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterCompanyOrganization'])
			} else {
				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
			}
			next()
		},
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.colorFF8800 {
		color: #FF8800;
	}
</style>
