Vue.component('team-panel', {
    template: '<div class="team-panel ml20 mr20"">\
					<div class="search-warp">\
						<input class="inp-search" placeholder="查找模板" v-model="filter" @input="debounceTempList" />\
					</div>\
					<div ref="innerPanel" style="overflow-y: auto;">\
						<div :class="{\'list-arrow-r\': !o.dropdown, \'list-arrow-d\': o.dropdown}" class="temp-item" v-for="(o, i) in items">\
							<div @click="selectTeam(o)" class="item-header c-nowrap">\
								<span class="c-nowrap">{{o.teamName}} ({{o.amount}})</span>\
							</div>\
							<div v-show="o.dropdown">\
								<div class="ml30 dropdown-item" v-for="(v, j) in o.items" :class="{\'list-arrow-r\': !v.dropdown, \'list-arrow-d\': v.dropdown}">\
									<div @click="seletGroup(v)" >{{v.name}}</div>\
									<div v-show="v.dropdown">\
										<div @click="showDetail(t,o)" class="ml30 dropdown-item" v-for="(t, j) in v.items">\
											<span :class="{\'active\': t == activetemplate}" class="c-nowrap item-header">{{t.title}}</span>\
											<span style="position: absolute;right:24px;">\
												<img src="../../../images/shiyongren_icon.png" width="14"/>\
												{{t.useTimes}}\
											</span>\
										</div>\
									</div>\
								</div>\
							</div>\
						</div>\
					</div>\
					<div>\
					</div>\
				</div>',
    props: ['activetemplate'],
    data: function() {
        return {
        	activeTeam: null,
        	filter: "",
        	pagesize: 20,
        	pageNo: 1,
        	throttled: null,
        	items: [],
        	activeItem: null
        }
    },
    created: function() {
    	var vm = this
		EventBus.$on('refresh-team-panel',function() {
			EventBus.$emit('active-nav-tab', 1)
			vm.debounceTempList()
		})
    },
    mounted: function() {
    	var vm = this
    	var el = vm.$refs.innerPanel
    	$(el).height($(window).height() - 140)
    	window.addEventListener('resize', _.debounce(function() {
    		$(el).height($(window).height() - 140)
    	}, 300))
    	
		vm.getDoctorTeams()
    },
    methods: {
    	debounceTempList: _.debounce(function() {
			var vm = this
    		vm.pageNo = 1
    		this.getTeamGuidanceListByLabelWithFilter()
		}, 500, false),
		getTeamGuidanceListByLabelWithFilter: function() {
			var vm = this
			guidanceAPI.getTeamGuidanceListByLabelWithFilter({
				teamId: vm.activeTeam.teamId,
				filter: vm.filter
			}).then(function(res) {
				var data = res.data
	        	if(data) {
	        		vm.activeTeam.items = _.map(_.keys(data), function(k) {
	        			return {
	        				name: k,
	        				dropdown: true,
	        				code: data[k]&&data[k][0].labelCode,
	        				teamId: vm.activeTeam.teamId,
	        				items: data[k]
	        			}
	        		})
	        	}
	        })
		},
    	getDoctorTeams: function() {
    		var vm = this
    		guidanceAPI.getDoctorTeams({
    			
    		}).then(function(res) {
    			vm.items = res.teamList
    			vm.$nextTick(function() {
    				if(vm.items && vm.items.length) {
    					vm.activeTeam = vm.items[0]
    					$('.team-panel .temp-item').eq(0).find('.item-header').click()
    				}
    			})
    		})
    	},
    	selectTeam: function(o) {
    		var vm = this
    		o.dropdown=!o.dropdown
    		
    		if(o.teamName !== vm.activeTeam.teamName) {
    			vm.filter = ""
    			vm.activeTeam.dropdown = false
    		}
    		
    		vm.activeTeam = o
    		
    		if(!o.items || o.items.length) {
    			guidanceAPI.findAllListByPage({
	    			teamId: o.teamId,
	    			pageNo: 1,
	    			pageSize: 1000
	    		}).then(function(res) {
	    			Vue.set(o, 'items', res.data);
	    		})
    		}
    		
    	},
    	seletGroup: function(v) {
    		var vm = this

    		Vue.set(v, 'dropdown', !v.dropdown);
    		if(!v.items || !v.items.length) {
    			guidanceAPI.getTeamGuidanceLabelList({
	    			teamId: vm.activeTeam.teamId,
	    			pageNo: 1,
	    			pageSize: 1000,
	    			labelCode: v.code
	    		}).then(function(res) {
	    			Vue.set(v, 'items', res.data);
	    		})
    		}
    	},
        showDetail: function(o,t) {
        	var vm = this
        	EventBus.$emit('active-template', o)
        	
        	var query = {
        		teamId: t.teamId,
        		teamTemplateCode: o.teamTemplateCode,
        		modelCode: vm.modelCode,
        		patient: storage.patient||"",
        		timestemp: $.now()
        	}
        	vm.$router.push({path:'/team-edit-panel',query:query})
        }
    }
})