PC-application/component/statistics/resident-analysis-filter.js

(function(){
    Vue.component('resident-analysis-filter',{
        template: '<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row mt20 ml40" id="signYear" v-html="yearHtml" @click="yearClick">\
				</div>\
				<div class="mt20 ml10 filter-title">统计维度</div>\
				<div class="div-content" @click="divBtnClick" v-html="filterHtml"></div>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn mr20" @click="resetClick">\
							<a href="#" class="c-666 f-fs16">重置</a>\
						</div>\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">保存</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['curLevel','curCode','curName','yearHtml','filterHtml'],
        data: function(){
            return {
                selectLevel:"",
                resultCode:"",
                roleLevel:""
            }
        },
        methods: {
        	formatYearData: function () {     
        		//显示年份最低是2016年
				var now = new Date(),
				    year = now.getFullYear();
				var yearHtml = "";
				if(now.getMonth() >= 6){
				    yearHtml += '<div class="c-33 active" data-val="'+year+'"><a>'+year+"</a></div>";
				}
				for(i=year-1; i>=2016; i--){
				    if(i == (year-1) && now.getMonth() < 6){
				        yearHtml += '<div class="c-33 active" data-val="'+i+'"><a>'+i+"</a></div>";
				    }else{
				        yearHtml += '<div class="c-33" data-val="'+i+'"><a>'+i+"</a></div>";
				    }
				}
                  this.yearHtml = yearHtml;
           },
           requestData:function(){
           		var vm = this,
           		 reqPromise = [],
           		 reqUrl = ""; 
				if(vm.curLevel == 4){//市管
					reqUrl = "/area/"+this.curCode+"/towns";
				}else if(vm.curLevel == 3){//区管
					reqUrl = "/hospitals/"+this.curCode+"/community_hospitals";
				}else{//社区管
					reqUrl = "/doctor/admin-teams/teams/"+this.curCode;
				}
	
				reqPromise.push(httpRequest.get(reqUrl, {data: {}}));
				Promise.all(reqPromise).then(function(datas) {
					if(datas[0].status==200){
						vm.pingData(datas[0].data || [])
					}
				});
          },
          yearClick:function(){
          	$(event.target.closest("div")).addClass('active').siblings().removeClass('active')
          },
          divBtnClick:function(){
			var vm = this;
			if(event.target.nodeName === 'A') {
				vm.curCode = $(event.target.closest("div")).attr("data-id");
				var item = $(event.target.closest(".div-item"));
				var dataLevel = item.attr("data-level");
				if(dataLevel == 4) {
					$(".div-content .div-item[data-level='4'] .div-btn").removeClass("active");
					item.next().remove();
					item.next().remove();
					vm.curLevel = 4;
				}
				if(dataLevel == 3) {
					$(".div-content .div-item[data-level='3'] .div-btn").removeClass("active");
					item.next().remove();
					vm.curLevel = 3;
				}
				if(dataLevel == 2) {
					$(".div-content .div-item[data-level='2'] .div-btn").removeClass("active");
					vm.curLevel = 2;
				}
				$(event.target.closest(".div-btn")).addClass("active");
				if(vm.curCode != "" && dataLevel != 2) {
					vm.resultCode = vm.curCode;
				} else {
					vm.resultCode = vm.curCode;
				}
				if(vm.curCode) {
					vm.curName = $(event.target.closest(".div-btn")).find("a").html();
				} else {
					vm.curName = item.find(".div-title").html();
				}
			
				vm.selectLevel = vm.curCode ? dataLevel - 1 : dataLevel;
				if(dataLevel == 2) {
					return false;
				}
			
				vm.curLevel--;
				if(vm.curCode) {
					vm.requestData();
				}
			}
          },
         resetClick:function(){
         	var vm = this;
         	vm.resultCode = "";
			vm.selectLevel = vm.roleLevel;
			var userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
			vm.curName = vm.selectLevel==4?userRole.name.substring(0,3):userRole.name;
			$("#signYear").find(".c-33").removeClass("active");
			$("#signYear").find(".c-33").eq(0).addClass("active");
			$(".div-content .div-item").find(".div-btn").removeClass("active");
			$(".div-content .div-item").eq(0).find(".div-btn").eq(0).addClass("active");
			$(".div-content .div-item").eq(1).remove();
			$(".div-content .div-item").eq(1).remove();
         },
         confirmClick:function(){
         	var vm = this;
         	console.log("area:"+vm.resultCode)
         	console.log("name:"+vm.curName)
         	console.log("level:"+vm.selectLevel)
         	console.log("year:"+$("#signYear .c-33.active").attr("data-val"))
			//触发刷新
			this.$emit('vuedals:close', {
				areaCode: vm.resultCode,
				name: vm.curName,
				level: vm.selectLevel,
				year: $("#signYear .c-33.active").attr("data-val"),
				filterHtml:$(".div-content").html(),
				yearHtml:$("#signYear").html()
			});
         },
         pingData:function(list){
          		var vm = this;
          		var resultData = "";
				var activeClass = "";
				if(vm.curLevel == 4){//市管
					list.unshift({"code":"","name":"厦门全市"});
					vm.curName = vm.curName.substring(0,3);
				}else if(vm.curLevel == 3){//区管
					list.unshift({"code":"","name":"全区"});
				}else{//社区管
					list.unshift({"id":"","name":"全社区"});
				}
				if(list.length>0){
					var labelName = '<div class="div-item" data-level="'+vm.curLevel+'">'+
										'<div class="div-title">'+vm.curName+'</div>';
							
					var xzResult = [];//每三条分成一组
					var xzContent = '';
					for(var i=0,len=list.length;i<len;i+=3){//形状列表切割
					   xzResult.push(list.slice(i,i+3));
					}
					for(var x in xzResult){
						var item = xzResult[x];
						if(x==0){
							activeClass = "active";
						}else{
							activeClass = "";
						} 
						if(item.length==1){//只有一条数据
							var id  = item[0].code;
							if(vm.curLevel=="2") {
								id  = item[0].id;
							}
							var name = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
							xzContent+='<div class="mt20 div-group-btn c-row ml40">'+					
											'<div class="div-btn c-33 '+activeClass+'" data-id="'+id+'" @click="">'+
												'<a href="#" class="f-fs14">'+name+'</a>'+
											'</div>'+
										'</div>';
						}
						if(item.length==2){
							var id1  = item[0].code;
							var id2  = item[1].code;
							if(vm.curLevel=="2") {
								id1  = item[0].id;
								id2  = item[1].id;
							}
							var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
							var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
							xzContent+= '<div class="mt20 div-group-btn c-row ml40">'+						
										'<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
											'<a href="#" class="f-fs14">'+name1+'</a>'+
										'</div>'+
										'<div class="div-btn c-33 " data-id="'+id2+'" data-level="'+item[1].level+'">'+
											'<a href="#" class="f-fs14">'+name2+'</a>'+
										'</div>'+
									'</div>';
						}
						if(item.length==3){
							var id1  = item[0].code;
							var id2  = item[1].code;
							var id3  = item[2].code;
							if(vm.curLevel=="2") {
								id1  = vm.curCode;
								id2  = item[1].id;
								id3  = item[2].id;
							}
							
							var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
							var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
							var name3 = vm.curLevel==3 && id3?item[2].name.substring(3,item[2].name.length):item[2].name;
							xzContent+='<div class="mt20 div-group-btn c-row ml40">'+						
										'<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
											'<a href="#" class="f-fs14">'+name1+'</a>'+
										'</div>'+
										'<div class="div-btn c-33 " data-id="'+id2+'">'+
											'<a href="#" class="f-fs14">'+name2+'</a>'+
										'</div>'+
										'<div class="div-btn c-33 " data-id="'+id3+'">'+
											'<a href="#" class="f-fs14">'+name3+'</a>'+
										'</div>'+
									'</div>';
						}
						
					}
					
					resultData += labelName+xzContent+'</div>';
				}
				$(".div-content").append(resultData);
         }
        },
        mounted: function(){
        	this.roleLevel = this.curLevel;
        	this.selectLevel = this.curLevel;
        	this.resultCode = this.curCode;
			if(!(this.filterHtml && this.yearHtml)){
				this.formatYearData();
				this.requestData();
			}
        }
    });
    
})()