用avalon写的一个弹窗demo

<div class="people-pop-shade" ms-controller="vmPeoplePop" ms-visible="toggleShade">
<div class="people-pop-box" ms-visible="togglePeopleBox">
<!-- head -->
<div class="people-pop-head">
<span class="nb-fleft people-pop-head-title">自定义人群条件</span>
<a href="javascript:;" class="nb-fRight people-pop-close" ms-on-click="hidePeopleBox">x</a>
</div>
<!-- content -->
<div class="people-pop-content-box">
<!-- 待选标签 -->
<div class="nb-fLeft people-pop-unChoose-box" id="people-pop-unChoose-box">
<div class="people-pop-unChoose-box-limit" ms-on-scroll="fnScroll">
<h3 class="people-pop-choose-title">待选标签</h3>
<ul class="people-pop-unChoose-list">
<!-- 性别 -->
<li class="nb-clear" unChooseType="gender">
<span class="tag">性别</span>
<div ms-repeat-el="unChooseData.gender">
<span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
<b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
<b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
</div>
</li>
<!-- 地域 -->
<li class="nb-clear" unChooseType="region">
<span class="tag">地域</span>
<div ms-repeat-el="unChooseData.region" ms-if-loop="$index<5">
<span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
<b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
<b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
</div>
<br/><br/>
<div ms-repeat-el="unChooseData.region" ms-if-loop="$index>=5">
<span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
<b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
<b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
</div>
</li>
<!-- 设备 -->
<li class="nb-clear" unChooseType="brand">
<span class="tag">设备</span>
<div ms-repeat-el="unChooseData.brand">
<span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
<b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
<b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
</div>
</li>
<!-- 运营商 -->
<li class="nb-clear" unChooseType="operator">
<span class="tag">运营商</span>
<div ms-repeat-el="unChooseData.operator">
<span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
<b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
<b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
</div>
</li>
<!-- 行为偏好 -->
<li class="nb-clear" unChooseType="behavior">
<span class="tag">行为偏好</span>
<div ms-repeat-el="unChooseData.behavior">
<span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
<b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
<b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
</div>
</li>
</ul>
</div>
<!-- 弹框 -->
<div class="people-pop-detail-box" id="people-pop-detail-box" ms-visible="toggleDetail">
<div class="people-pop-detail-head nb-clear">
<span ms-repeat-el="childList" ms-if-loop="$index==0" ms-class="active:el.checked==1" ms-attr-index="$index" ms-on-click="unChooseDetailClick">{{el.dictName}}</span>
<a href="javascript:;" class="people-pop-detail-btn-close" ms-on-click="detailClose"></a>
<a href="javascript:;" class="people-pop-detail-btn-reset" ms-on-click="detailReset"></a>
</div>
<div class="nb-clear">
<span ms-repeat-el="childList" ms-if-loop="$index>0" ms-class="active:el.checked==1" ms-attr-index="$index" ms-on-click="unChooseDetailClick">{{el.dictName}}</span>
</div>
</div>
</div>
<!-- 已选标签 -->
<div class="nb-fRight people-pop-isChoose-box">
<h3 class="people-pop-choose-title">已选标签</h3>
<ul class="nb-clear people-pop-isChoose-list-tag">
<li isChooseType="gender" ms-repeat-el="isChooseData.gender" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
<span>{{el.dictName}}</span>
<a href="javascript:;">x</a>
</li>
<li isChooseType="region" ms-repeat-el="isChooseData.region" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
<span>{{el.dictName}}</span>
<a href="javascript:;">x</a>
</li>
<li isChooseType="brand" ms-repeat-el="isChooseData.brand" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
<span>{{el.dictName}}</span>
<a href="javascript:;">x</a>
</li>
<li isChooseType="operator" ms-repeat-el="isChooseData.operator" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
<span>{{el.dictName}}</span>
<a href="javascript:;">x</a>
</li>
</ul>
<ul class="nb-clear people-pop-isChoose-list-type">
<li ms-repeat-el="isChooseData.behavior">
<a href="javascript:;" class="people-pop-isChoose-btn-remove" isChooseType="behavior" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">x</a>
<span class="people-pop-isChoose-name">{{el.dictName}}</span>
<input type="text" ms-attr-value="el.tgiStart" ms-on-blur="tgiChange"/>
<span class="people-pop-tgi"><TGI<</span>
<input type="text" ms-attr-value="el.tgiEnd" ms-on-blur="tgiChange"/>
</li>
</ul>
</div>
</div>
<!-- foot -->
<div class="people-pop-foot">
<a href="javascript:;" ms-on-click="resetData">重置</a>
<a href="javascript:;" ms-on-click="showNameBox">生成</a>
</div>
</div>
<!-- 输入姓名 -->
<div class="people-pop-write-box" ms-visible="toggleNameBox">
<h3>请为您定义的人群输入一个名称</h3>
<input type="text" class="people-pop-write-name" ms-duplex="nameVal"/>
<a href="javascript:;" class="nb-fLeft" ms-on-click="hideNameBox">取消</a>
<a href="javascript:;" class="nb-fRight" ms-on-click="fnSubmit">确认</a>
</div>
</div>

/* 公用 */
.nb-fLeft{
float: left;
}
.nb-fRight{
float: right;
}
.nb-clear{
zoom: 1;
}
.nb-clear:after{
content: '';
display: block;
clear: both;
}

/*  */
.people-pop-shade a{
text-decoration: none;
}
.people-pop-shade{
-display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.people-pop-box{
position: absolute;
width: 1000px;
left: 50%;
top: 50%;
margin-left: -500px;
margin-top: -300px;
min-height: 600px;
border-radius: 6px;
box-shadow: 0 0 5px #000;
}
.people-pop-head{
position: absolute;
left: 0;
right: 0;
top: 0;
height: 60px;
background: #4b5868;
}
.people-pop-content-box{
position: absolute;
top: 60px;
bottom: 60px;
left: 0;
right: 0;
}
.people-pop-foot{
position: absolute;
height: 60px;
left: 0;
right: 0;
bottom: 0px;
background: #4b5868;
}
.people-pop-head-title{
color: #ffffff;
position: relative;
font-size: 14px;
padding-left: 20px;
left: 20px;
top: 20px;
}
.people-pop-head-title:before{
content: '';
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
background: url("../images/peoplePop.png") no-repeat 0 0;
}
.people-pop-close{
color: #9bb1be;
width: 60px;
height: 60px;
text-align: center;
line-height: 55px;
background: #242d36;
font-size: 40px;
}
.people-pop-unChoose-box{
padding-left: 20px;
width: 670px;
height: 100%;
background: #ffffff;
position: relative;
}
.people-pop-unChoose-box-limit{
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.people-pop-isChoose-box{
padding-left: 20px;
padding-right: 20px;
width: 330px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background: #f6f7fb;
}
h3.people-pop-choose-title{
font-weight: bold;
font-size: 14px;
margin: 20px 0;
}
.people-pop-unChoose-list{
margin-right: 20px;
}
.people-pop-unChoose-list>li{
border-bottom: 1px dashed #e9e8f0;
padding-bottom: 10px;
margin-bottom: 20px;
padding-left: 50px;
}
.people-pop-unChoose-list>li:last-child{
border-bottom: none;
}
.people-pop-unChoose-list>li .tag{
float: left;
width: 50px;
text-align: right;
height: 24px;
line-height: 24px;
margin-left: -50px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.people-pop-unChoose-list>li>div{
position: relative;
float: left;
height: 24px;
line-height: 22px;
margin-bottom: 10px;
margin-left: 10px;
}
.people-pop-unChoose-list>li>div>span{
cursor: pointer;
display: inline-block;
height: 24px;
padding: 0 10px;
background: #ffffff;
border: 1px solid #e5eaee;
border-radius: 10px;
}
.people-pop-unChoose-list>li>div>span.active{
border-color: transparent;
background: #25a5fe;
color: #ffffff;
}
.people-pop-content-num-all,
.people-pop-content-num-num{
padding: 2px;
line-height: 12px;
position: absolute;
top: -5px;
right: -5px;
color: #ffffff;
font-size: 12px;
border-radius: 8px;
display: none;
}
.people-pop-content-num-all{
background: #fc635d;
}
.people-pop-content-num-num{
background: #fca057;
}
.people-pop-detail-box{
position: absolute;
width: 290px;
min-height: 90px;
padding: 0 10px;
background: #4b5868;
left: 200px;
top: 200px;
border-radius: 4px;
z-index: 1;
display: none;
}
.people-pop-detail-box:before{
content: '';
position: absolute;
width: 0;
height: 0;
left: -16px;
top: 12px;
border: 8px solid transparent;
border-right-color: #4b5868;
}
.people-pop-detail-box span{
float: left;
padding: 0 10px;
height: 24px;
line-height: 24px;
background: #ffffff;
color: #000;
border-radius: 10px;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
}
.people-pop-detail-box span.active{
background: #25a5fe;
color: #ffffff;
}
.people-pop-detail-head{
padding-top: 10px;
margin-bottom: 10px;
border-bottom: 2px solid #000;
}
.people-pop-detail-btn-reset,
.people-pop-detail-btn-close{
width: 12px;
height: 12px;
float: right;
margin: 6px 5px 0;
background-image: url("../images/peoplePop.png");
background-repeat: no-repeat;
}
.people-pop-detail-btn-reset{
background-position: -20px 0;
}
.people-pop-detail-btn-close{
background-position: -40px 0;
}
.people-pop-isChoose-list-tag{
padding-bottom: 10px;
border-bottom: 1px dashed #e7e8ee;
}
.people-pop-isChoose-list-tag>li{
float: left;
height: 24px;
line-height: 22px;
padding: 0 10px;
border: 1px solid #26a6ff;
position: relative;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 10px;
color: #26a6ff;
cursor: pointer;
}
.people-pop-isChoose-list-tag>li>a{
position: absolute;
display: none;
width: 12px;
height: 12px;
right: -6px;
top: -6px;
text-align: center;
line-height: 10px;
background: #ff645d;
border-radius: 50%;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
.people-pop-isChoose-list-tag>li:hover{
border-color: transparent;
background: #26a6ff;
color: #ffffff;
}
.people-pop-isChoose-list-tag>li:hover a{
display: block;
}
.people-pop-isChoose-list-type{}
.people-pop-isChoose-list-type li{
height: 34px;
padding: 5px 0;
line-height: 24px;
background: transparent;
border-radius: 6px;
margin-bottom: 5px;
}
.people-pop-isChoose-list-type li>*{
float: left;
}
.people-pop-isChoose-btn-remove{
display: inline-block;
margin-left: 10px;
width: 12px;
height: 12px;
text-align: center;
line-height: 10px;
background: #ffffff;
color: #aac4de;
font-weight: bold;
border-radius: 50%;
position: relative;
top: 6px;
visibility: hidden;
}
.people-pop-isChoose-name{
width: 90px;
height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 10px;
color: #26a6ff;
}
.people-pop-isChoose-list-type li input{
width: 44px;
height: 24px;
border: 1px solid #dbdee6;
text-align: center;
outline: none;
}
.people-pop-tgi{
margin: 0 5px;
}
.people-pop-isChoose-list-type li:hover{
background: #aac4de;
}
.people-pop-isChoose-list-type li:hover .people-pop-isChoose-btn-remove{
visibility: inherit;
}
.people-pop-isChoose-list-type li:hover .people-pop-isChoose-name{
color: #ffffff;
}
.people-pop-isChoose-list-type li:hover .people-pop-tgi{
color: #ffffff;
}
.people-pop-foot{
text-align: center;
}
.people-pop-foot a{
position: relative;
top: 12px;
margin: 0 5px;
display: inline-block;
width: 80px;
height: 36px;
text-align: center;
line-height: 36px;
font-size: 16px;
border-radius: 6px;
background: #f6f7fa;
color: #000000;
}
.people-pop-foot a:hover{
background: #ff9e57;
color: #ffffff;
}
.people-pop-write-box{
display: none;
width: 280px;
height: 170px;
position: absolute;
left: 50%;
top: 50%;
padding: 20px;
margin-left: -140px;
margin-top: -85px;
background: #ffffff;
border-radius: 6px;
}
.people-pop-write-box h3{
font-size: 16px;
margin: 0;
height: 40px;
}
.people-pop-write-name{
width: 100%;
height: 36px;
border-radius: 4px;
background: #f1f1f1;
border: 1px solid #dfdfdf;
outline: none;
text-align: center;
font-size: 14px;
}
.people-pop-write-box a{
position: relative;
top: 20px;
width: 112px;
height: 32px;
text-align: center;
line-height: 32px;
background: #dcdcdc;
color: #000000;
font-size: 14px;
border-radius: 4px;
}
.people-pop-write-box a:hover{
background: #ff9e57;
color: #ffffff;
}

define(function(require,exports,module){
function ajaxEvent(url,param,callback,errCallback){
$.ajax({
type: 'post',
url: url,
data: param,
success: function(data){
console.log(url);
console.log(data);
if( data['code'] == 0 ){
callback && callback(data);
}else{
errCallback && errCallback(data);
};
}
});
};
function newObj(obj){
return JSON.parse(JSON.stringify(obj));
};
//检测val，只能为正数字
function testVal(val){
return  val=='' || (!isNaN(val) && val>=0) ? true : false;
};
//用于过滤生成isChooseData
function filterData(){
var tj = {};
for( var k in unChooseData ){
if( !Array.isArray(unChooseData[k]) ) continue;
if( !tj[k] ) tj[k] = [];
if( k == specialType ){
for( var i= 0,len=unChooseData[k].length; i<len; i++ ){
var v = unChooseData[k][i];
if( v['checkNums'] == 1 && v['isAllCheck'] == 1 ){
//全选
var v2 = v['childList'];
for( var j= 1,len2=v2.length; j<len2; j++ ){
tj[k].push({
dictName: v2[j]['dictName'],
profileType: v2[j]['profileType'],
id: v2[j]['id'],
dictCode: v2[j]['dictCode'],
i: i,
i2: j,
tgiStart: v2[j]['tgiStart'],
tgiEnd: v2[j]['tgiEnd'] || ''
});
};
}else if( v['checkNums'] > 0 && v['isAllCheck'] == null ){
//非全选
var v2 = v['childList'];
for( var j= 1,len2=v2.length; j<len2; j++ ){
if( v2[j]['checked'] == 1 ){
tj[k].push({
dictName: v2[j]['dictName'],
profileType: v2[j]['profileType'],
id: v2[j]['id'],
dictCode: v2[j]['dictCode'],
i: i,
i2: j,
tgiStart: v2[j]['tgiStart'],
tgiEnd: v2[j]['tgiEnd'] || ''
});
};
};
};
};
}else{
for( var i= 0,len=unChooseData[k].length; i<len; i++ ){
var v = unChooseData[k][i];
if( i == 0 && v['checkNums'] == 1 ){
//判断总全选
tj[k].push({
dictName: typeNames[k],
profileType: v['profileType'],
id: v['id'],
dictCode: v['dictCode'],
isAllCheck: v['isAllCheck'] || null,
i: i
});
break;
}else if( v['checkNums'] > 0 && v['isAllCheck'] == null && Array.isArray(v['childList']) ){
//判断2级
var v2 = v['childList'];
for( var j=1,len2=v2.length; j<len2; j++ ){
if( v2[j]['checked'] == 1 ){
tj[k].push({
dictName: v2[j]['dictName'],
profileType: v2[j]['profileType'],
id: v2[j]['id'],
dictCode: v2[j]['dictCode'],
isAllCheck: v2[j]['isAllCheck'] || null,
i: i,
i2: j
});
};
};
}else if( v['checkNums'] > 0 ){
//全选，单选
tj[k].push({
dictName: v['dictName'],
profileType: v['profileType'],
id: v['id'],
dictCode: v['dictCode'],
isAllCheck: v['isAllCheck'] || null,
i: i
});
}
};
};
};
return tj;
};
//检测全部选中，如果全部选中了，1级按钮为全选状态，1级和2级点击都要调用,没有全部按钮的不调用
function fnCheckData(){
var data = unChooseData[unChooseType];
if( data[0]['dictCode'] != allChoose ) return false;
var re = true;
for( var i= 1, len=data.length; i<len; i++ ){
if( Array.isArray(data[i]['childList']) && data[i]['isAllCheck'] == null ){
re = false;
break;
}else if( data[i]['checkNums'] != 1 ){
re = false;
break;
};
};
if( !re ) return false;
fnAllChoose1();
};
//1级全选共用
function fnAllChoose1(){
var data = unChooseData[unChooseType];
for( var i= 0,len=data.length; i<len; i++ ){
if( i == 0 ){
data[i]['isAllCheck'] = 1;
data[i]['checkNums'] = 1;
}else{
data[i]['isAllCheck'] = null;
data[i]['checkNums'] = 0;
if( Array.isArray(data[i]['childList']) ){
for( var j= 0,len2=data[i]['childList'].length; j<len2; j++ ){
data[i]['childList'][j]['checked'] = 0;
};
};
};
};
hideDetail();
};
//获取position位置
function getPosition(self){
var $parent = $('#people-pop-unChoose-box');
getPosition.pLeft = $parent.offset()['left'];
getPosition.pTop = $parent.offset()['top']
var selfLeft = $(self).offset()['left'],
selfTop = $(self).offset()['top'],
disLeft = selfLeft - getPosition.pLeft + $(self).outerWidth() + 10 ,
disTop = selfTop - getPosition.pTop + $(self).outerHeight() - 30;
positionMsg = {left: disLeft, top: disTop};
};
//设置提交ajax数据
function getAjaxData(){
var tj = {};
for( var k in isChooseData ){
if( !tj[k] ){
tj[k] = {
profileType: [],
id: [],
code: []
};
};
var data = isChooseData[k];
if( k == specialType ){
for( var j = 0,len=data.length; j<len; j++ ){
tj[k]['profileType'].push( data[j]['profileType'] );
tj[k]['id'].push( data[j]['id'] + '|' + data[j]['tgiStart'] + '-' + data[j]['tgiEnd'] );
tj[k]['code'].push( data[j]['dictCode'] );
};
}else{
for( var j= 0,len=data.length; j<len; j++ ){
if( data[j]['isAllCheck'] == 1 ){
//全选，需要遍历unChooseData数据看是否有childList
if( unChooseData[k][data[j]['i']]['childList'] == null ){
tj[k]['profileType'].push( data[j]['profileType'] );
tj[k]['id'].push( data[j]['id'] );
tj[k]['code'].push( data[j]['dictCode'] );
}else{
for( var z= 1, len2=unChooseData[k][data[j]['i']]['childList'].length; z<len2; z++ ){
tj[k]['profileType'].push( unChooseData[k][data[j]['i']]['childList'][z]['profileType'] );
tj[k]['id'].push( unChooseData[k][data[j]['i']]['childList'][z]['id'] );
tj[k]['code'].push( unChooseData[k][data[j]['i']]['childList'][z]['dictCode'] );
};
};
}else{
tj[k]['profileType'].push( data[j]['profileType'] );
tj[k]['id'].push( data[j]['id'] );
tj[k]['code'].push( data[j]['dictCode'] );
};
};
};
if( len > 0 ){
tj[k]['profileType'] = tj[k]['profileType'][0];
}else{
delete tj[k];
};
};
return tj;
};
/* END 方法函数 */

var queryAllProfileUrl = 'http://localhost:8085/profileDict/queryAllProfile',
//editMyProfile = 'http://localhost:8085/profileDict/editMyProfile?crowId=10';
editMyProfileUrl = 'http://localhost:8085/profileDict/editMyProfile',
saveMyCrowdUrl = 'http://localhost:8085/myCrowds/saveMyCrowd',
updateMyCrowdUrl = 'http://localhost:8085/myCrowds/updateMyCrowd';

var $obj,
vmPop,
address = 'http://www.hui12.com/', //提交后成功后跳转地址
$detailBox,
specialType = 'behavior', //特殊参考
typeNames = {
gender: '全部性别',
region: '全部地域',
brand: '全部设备',
operator: '全部运营商'
},
textErr = '只能输入正数字',
positionMsg = {
left: 0,
top: 0
},
isAgainVisit = false, //判断是否回填
unChooseType, //点击按钮的类型
index1, //一级按钮的index
index2, //二级按钮的index
allChoose = '-999', //全部按钮的dictCode
unChooseData, //当前待选标签数据
isChooseData, //已选标签数据
cacheDataOriginal; //填写数据备份

$.get('peoplePop.html',function(data){
$obj = $(data);
$('body').append($obj);
$detailBox = $('#people-pop-detail-box');
getHtmlCallback();
});
function getHtmlCallback(){
vmPop = avalon.define({
$id: 'vmPeoplePop',
toggleShade: false,
toggleDetail: false,
togglePeopleBox: true,
toggleNameBox: false,
allChoose: allChoose,
unChooseData: {
gender: [],
region: [],
brand: [],
operator: [],
behavior: []
},
isChooseData: {
gender: [],
region: [],
brand: [],
operator: [],
behavior: []
},
childList: [],
nameVal: '',
hidePeopleBox: function(){
vmPop.toggleShade = false;
},
showNameBox: function(){
vmPop.togglePeopleBox = false;
vmPop.toggleNameBox = true;
},
hideNameBox: function(){
vmPop.nameVal = '';
vmPop.togglePeopleBox = true;
vmPop.toggleNameBox = false;
},
fnSubmit: function(){
var crowdName = $.trim(vmPop.nameVal);
if( crowdName == '' ){
alert('请输入姓名');
return false;
}
var msg = getAjaxData();
var url, param;
if( isAgainVisit ){
url = updateMyCrowdUrl;
param = {
crowdName: crowdName,
crowId: unChooseData['crowId'],
crowdRef: JSON.stringify(msg)
}
}else{
url = saveMyCrowdUrl;
param = {
crowdName: crowdName,
crowdRef: JSON.stringify(msg)
}
};
vmPop.hidePeopleBox();
},
//滚轮事件
fnScroll: function(){
hideDetail();
},
//一级按钮
unChooseClick: function(e){
getPosition(this);
unChooseType = $(this).closest('li[unChooseType]').attr('unChooseType');
index1 = $(this).attr('index');
unChooseClickCallback();
},
//二级按钮
unChooseDetailClick: function(){
index2 = $(this).attr('index');
unChooseDetailClickCallback();
},
//已选标签删除
removeTag: function(){
removeTagCallback({
isChooseType: $(this).attr('isChooseType'),
i: $(this).attr('i'),
i2: $(this).attr('i2')
});
},
//针对行为偏好，tgi改变调用
tgiChange: function(){
tgiChangeCallback.call(this);
},
//关闭detailBox
detailClose: function(){
hideDetail();
},
detailReset: function(){
detailResetCallback();
},
resetData: function(){
resetData();
}
});
avalon.scan();
getCacheDataOriginal();
};

//tgi改变回调
function tgiChangeCallback(){
var $input1,
$input2,
val1,
val2,
$this = $(this),
thisIndex = $this.index(),
$siblings = $this.siblings('input'),
siblingsIndex = $siblings.index(),
val = $this.val(),
siblingsVal = $siblings.val(),
$a = $this.prevAll('a[ischoosetype]'),
i = $a.attr('i'),
i2 = $a.attr('i2'),
type = $a.attr('isChooseType');
if( !testVal(val) ){
alert(textErr);
$this.val('');
val = '';
};
val = val===''?'':parseFloat(val);
siblingsVal = siblingsVal===''?'':parseFloat(siblingsVal);
//给input标识顺序
if( thisIndex < siblingsIndex ){
$input1 = $this;
$input2 = $siblings;
}else{
$input1 = $siblings;
$input2 = $this;
};
//给val排序
if( val==='' && (siblingsVal === '') ){
val1 = siblingsVal;
val2 = val;
}else if( !(val==='') && siblingsVal==='' ){
val1 = val;
val2 = siblingsVal;
}else if( val < siblingsVal && !(val === '') ){
val1 = val;
val2 = siblingsVal;
}else{
val1 = siblingsVal;
val2 = val;
};
$input1.val(val1);
$input2.val(val2);
unChooseData[type][i]['childList'][i2]['tgiStart'] = val1;
unChooseData[type][i]['childList'][i2]['tgiEnd'] = val2;
refreshData();
};
//已选标签删除回调
function removeTagCallback(param){
//hideDetail();
var type = param['isChooseType'],
i = param['i'],
i2 = param['i2'];
if( type == specialType ){
resetTgi({type: type, i: i, i2: i2});
var data = unChooseData[type][i];
var num = 0,
v2 = data['childList'];
if( data['isAllCheck'] == 1 ){
//从全选状态开始
data['isAllCheck'] = null;
v2[0]['checked'] = 0;
for( var j= 1,len=v2.length; j<len; j++ ){
if( j == i2 ){
v2[j]['checked'] = 0;
}else{
v2[j]['checked'] = 1;
num++;
};
};
data['checkNums'] = num;
}else{
v2[i2]['checked'] = 0;
for( var j= 1,len=v2.length; j<len; j++ ){
if( v2[j]['checked'] == 1 ) num++;
};
data['checkNums'] = num;
};
}else{
if( i2 == null ){
//单选，2级全选
unChooseData[type][i]['checkNums'] = 0;
unChooseData[type][i]['isAllCheck'] = null;
if( Array.isArray(unChooseData[type][i]['childList']) ){
unChooseData[type][i]['childList'].forEach(function(v,i){
v['checked'] = 0;
});
};
}else{
//2级单选,并且要更新1级的checkNums
unChooseData[type][i]['childList'][i2]['checked'] = 0;
var num = 0;
for( var j= 1,len=unChooseData[type][i]['childList'].length; j<len; j++ ){
if( unChooseData[type][i]['childList'][j]['checked'] == 1 ) num++;
};
unChooseData[type][i]['checkNums'] = num;
};
};

refreshDetailData();
refreshData();
};
//一级按钮点击回调
function unChooseClickCallback(){
var data = unChooseData[unChooseType];
if( data[index1]['dictCode'] == allChoose && data[index1]['isAllCheck'] == null ){
//全选
fnAllChoose1();
}else if( data[index1]['dictCode'] == allChoose && data[index1]['isAllCheck'] == 1 ){
//取消全选
data[index1]['isAllCheck'] = null;
data[index1]['checkNums'] = 0;
}else if( !Array.isArray(data[index1]['childList']) && data[index1]['checkNums'] == 0 ){
//普通的，没有2级,选中,并且取消对应全选状态,并且隐藏2级窗口
data[index1]['checkNums'] = 1;
data[0]['isAllCheck'] = null;
data[0]['checkNums'] = 0;
hideDetail();
}else if( !Array.isArray(data[index1]['childList']) && data[index1]['checkNums'] == 1 ){
//普通的，没有2级，取消选中，并且隐藏2级窗口
data[index1]['checkNums'] = 0;
hideDetail();
}else if( Array.isArray(data[index1]['childList']) ){
//有2级菜单
showDetail();
};

fnCheckData();
refreshData();
};
//二级按钮点击回调
function unChooseDetailClickCallback(){
//只要有点击，就是取消1级的全选状态，行为偏好没有全选不调用
if( unChooseType != specialType ){
unChooseData[unChooseType][0]['isAllCheck'] = null;
unChooseData[unChooseType][0]['checkNums'] = 0;
};
//如果是行为偏好的，需要重置对应的tgi
var dataP = unChooseData[unChooseType][index1],
dataC = dataP['childList'];
if( dataC[index2]['dictCode'] == allChoose && dataP['isAllCheck']==null ){
//全选
fnAllChoose2();
}else if( dataC[index2]['dictCode'] == allChoose && dataP['isAllCheck']==1 ){
//取消全选
resetTgi({type: unChooseType,i:index1});
dataP['checkNums'] = 0;
dataP['isAllCheck'] = null;
dataC[index2]['checked'] = 0;
}else if( dataC[index2]['dictCode'] != allChoose && dataC[index2]['checked'] == 0 ){
//单选,会取消全选,并且要统计选中的个数 dataP['checkNums'],如果全部全中，则全选状态
dataP['isAllCheck'] = null;
dataC[0]['checked'] = 0;
dataC[index2]['checked'] = 1;
var num = 0;
var total = 0;
for( var i= 1,len=dataC.length; i<len; i++ ){
total++;
if( dataC[i]['checked'] == 1 ) num++;
};
if( num == total ){
//全选
fnAllChoose2();
}else{
//非全选
dataP['checkNums'] = num;
};
}else if( dataC[index2]['dictCode'] != allChoose && dataC[index2]['checked'] == 1 ){
//取消单选, 并且要统计选中的个数 dataP['checkNums']
resetTgi({type: unChooseType, i: index1, i2: index2});
dataC[index2]['checked'] = 0;
var num = 0;
for( var i= 1,len=dataC.length; i<len; i++ ){
if( dataC[i]['checked'] == 1 ) num++;
};
dataP['checkNums'] = num;
};

//2级全选共用
function fnAllChoose2(){
dataP['checkNums'] = 1;
dataP['isAllCheck'] = 1;
for( var i= 0,len=dataC.length; i<len; i++ ){
if( i == 0 ){
dataC[i]['checked'] = 1;
}else{
dataC[i]['checked'] = 0;
};
};
};
fnCheckData();
refreshData();
refreshDetailData();
};
//重置tgi
function resetTgi(param){
//param = {type: type, i: i, i2: i2}
//type,i为必填参数，如果只存在i，重置一例，存在i2，则重置对应的
//1、点击全选按钮，全选状态，不做任何处理
//2、点击全选按钮，取消全选状态，重置这一例的tgi
//3、点击单个按钮，取消选中状态，对应重置tgi
//4、点击detailbox的重置按钮，重置这一例的tgi
//5、从已选标签中删除，重置对应的tgi
var type = param['type'],
i = param['i'],
i2 = param['i2'];
var data = unChooseData[type][i]['childList'];
if( i2 == null ){
data.forEach(function(v,i){
v['tgiStart'] = 1;
v['tgiEnd'] = '';
});
}else{
data[i2]['tgiStart'] = 1;
data[i2]['tgiEnd'] = '';
};
};
//点击detailbox上的重置按钮
function detailResetCallback(){
var data = unChooseData[unChooseType][index1];
data['isAllCheck'] = null;
data['checkNums'] = 0;
data['childList'].forEach(function(v,i){
v['checked'] = 0;
});
resetTgi({type: unChooseType, i: index1});
refreshDetailData();
refreshData();
};
//显示2级菜单，刷新数据，更新位置
function showDetail(){
refreshDetailData();
$detailBox.css({
left: positionMsg['left'],
top: positionMsg['top']
});
vmPop.toggleDetail = true;
};
//隐藏2级菜单
function hideDetail(){
vmPop.toggleDetail = false;
};
//获取原始数据结构
function getCacheDataOriginal(){
require('./4aData');
cacheDataOriginal = newObj(JSON.parse(a1));
unChooseData = newObj(cacheDataOriginal);
refreshData();
};
//获取填充的数据结构
function getCacheDataFill(param){
//var param = {crowId: 10};
unChooseData = newObj(JSON.parse(a2));
vmPop.nameVal = unChooseData['crowName'] || '';
refreshData();
};

//刷新view
function refreshDetailData(){
if( !unChooseType ) return false;
vmPop.childList = newObj( unChooseData[unChooseType][index1]['childList'] );
};
function refreshData(){
vmPop.unChooseData = newObj(unChooseData);
isChooseData = filterData();
vmPop.isChooseData = newObj(isChooseData);
};
//重置view
function resetData(){
if( !cacheDataOriginal ) return false;
unChooseData = newObj(cacheDataOriginal);
vmPop.unChooseData = newObj(unChooseData);
isChooseData = filterData();
vmPop.isChooseData = newObj(isChooseData);
hideDetail();
vmPop.hideNameBox();
};
module.exports = {
openPop: function(param){
if( !$obj ){
var caller = arguments.callee;
setTimeout(function(){
caller(param);
},50);
return false;
};
resetData();
isAgainVisit = false;
vmPop.toggleShade = true;
if( param && param['address'] ) address = param['address'];
if( param && param['crowId'] ){
isAgainVisit = true;
getCacheDataFill({crowId: param['crowId']});
};
}
};
});
/*
* param参数，不填写为创建，填写为修改。
* {
*   address: 保存成功后的跳转地址
*   crowId: 33
* }
* */