$load("Page_Head.htm")
<link rel="stylesheet" type="text/css" href="{$atplPath}skin/house_pingtai.css" />
<link rel="stylesheet" type="text/css" href="{$atplPath}skin/admin2013_child.css" />
<style>
.tab_box{margin:0.22em 0 1em}
.num{font-size:12px;color:#FD8B50;margin-left:3px;}
.ss-img{ display:block; vertical-align:top; width:50px; height:50px; border-radius:25px;}
.e1,.e2 { display:inline-block; vertical-align:middle; padding:0 4px; border-radius:3px; color:#fff; margin-right:5px; font-size:12px; line-height:18px; font-style:normal;}
.e1 { background-color:#fe6548;}
.e2 { background-color:#5cc55c;}
.display_false_true,.displayfalse { display:none;}
.global2_btn_add{color:#60b6f3;font-size:14px;}
.sys_btn_a i.add { width:10px; background-position:-118px 0;}
.ul-form .box .txt1 { position: absolute; left: 10px;top: 2px;}
.ul-form .box .txt2 { position: absolute; right: 20px;top: 2px;}
.ul-form .box .text1 {padding-left: 70px;vertical-align: middle;}
.ul-form .con{ position: relative; }
.my_prop_imgitem .set_FM { display:none;}
#fsUploadProgress .img .picHolder { display:none;}
#fsUploadProgress .insertEditor { display:block;}
.checkbox_span{cursor: pointer; left: 10px;top: 50%; margin-top: -6px; width: 13px; height: 13px; background: url('{$atplPath}images/house/checkbox_span_icon.png') no-repeat center top;}
.checkbox_span.on{ background: url('{$atplPath}images/house/checkbox_span_icon.png') no-repeat center -13px;}
.ss-house-box-bot{height: 24px; padding: 8px 40px; background: #eeeeee}
.pageNavMini{vertical-align: top;position: relative;line-height: 24px;}
.theme_box { margin: 30px 0 35px 40px;}
.theme_box .btn-form {display:inline;margin: 0px 30px 0px 70px;padding: 0px 0px;width: 140px;}
.selectTheme { position:relative }
.selectTheme .ml0{margin-left: 0px!important;}
.selectTheme .ss-row:before,
.selectTheme .ss-row:after{content: " "; display: table;}
.selectTheme .ss-row:after{clear: both;}
.selectTheme .ss-col-1{float: left; width: 8.3%}
.selectTheme .ss-col-2{float: left; width: 16.6%}
.selectTheme .ss-col-3{float: left; width: 25%}
.selectTheme .ss-col-4{float: left; width: 33.3%}
.selectTheme .ss-col-5{float: left; width: 41.6%}
.selectTheme .ss-col-6{float: left; width: 50%}
.selectTheme .ss-col-7{float: left; width: 58.3%}
.selectTheme .ss-col-8{float: left; width: 66.6%}
.selectTheme .ss-col-9{float: left; width: 75%}
.selectTheme .ss-col-10{float: left; width: 83.3%}
.selectTheme .ss-col-11{float: left; width: 91.6%}
.selectTheme .ss-col-12{float: left; width: 100%}
.selectTheme .ohidden{overflow: hidden;}
.selectTheme .absolute{position: absolute}
.selectTheme .relative{position: relative;}
.selectTheme .mt30{margin-top: 30px!important}
.selectTheme .ml20{margin-left: 20px!important}
.selectTheme .mr20{margin-right: 20px!important}
.selectTheme .mb20{margin-bottom: 20px!important;}
.selectTheme .mr10{margin-right: 10px!important}
.selectTheme .mb10{margin-bottom: 10px!important;}
.selectTheme .ml0{margin-left: 0px!important;}
.selectTheme .checkbox_span{cursor: pointer; left: 10px;top: 50%; margin-top: -6px; width: 13px; height: 13px; background: url('../../AdminSkin/default/images/house/checkbox_span_icon.png') no-repeat center top;}
.selectTheme .checkbox_span.on{ background: url('../../AdminSkin/default/images/house/checkbox_span_icon.png') no-repeat center -13px;}
.selectTheme .ss-house-box-bot{height: 32px; line-height:32px; padding: 8px 10px 8px 40px; background: #eeeeee}
.selectTheme .fl{float: left;}
.selectTheme .ss-hx-btn{display: inline-block; color: #5DBEFF; border: 1px solid #5DBEFF; padding: 0 10px; border-radius: 3px; transition:.2s;}
.selectTheme .ss-hx-btn:hover{color:#28A3F6; border: 1px solid #28A3F6;}
.selectTheme .ss-house-box-bot .font{ font-size:14px; color: #666666; padding-right: 10px;}
.selectTheme .ul-form .con{ min-height: 40px; line-height: 40px; margin-left: 0px;}
.selectTheme .ul-form .con .sel_box {background-color: #fff;width:120px;}
.selectTheme .ul-form .con .sel_box .ico {position: absolute;top: 10px;right: 10px;}
.selectTheme .ss-house-search{padding: 0 10px; padding-right: 40px; border: 1px solid #eeeeee ; width: 174px;}
.selectTheme .ss-house-search input{width: 100%; padding: 10px 0; border: none;}
.selectTheme .ss-house-search-btn{height: 40px; width: 40px; right: 0px; top: 0px; background: url('../../AdminSkin/default/images/house/search_btn_icon.png')}
.selectTheme .ss-house-ul-box{border: 1px solid #eeeeee;}
.selectTheme .ss-house-ul{height: 400px; overflow: auto;}
.selectTheme .ss-house-ul-item{height: 40px; line-height: 40px;}
.selectTheme .ss-house-ul-item h2{font-size: 14px; color: #666; padding: 0px; margin: 0; font-weight: normal; padding: 0 40px; padding-right: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selectTheme .interClass{background: #eaf4fb}
.selectTheme .house-r-btn{right: 10px;height: 16px; width: 16px; top: 50%; margin-top: -8px; cursor: pointer; background: url('../../AdminSkin/default/images/house/sort_icon.png') no-repeat center top;}
.selectTheme .house-delet-btn{height: 16px;width: 16px; right: 10px; top: 50%; margin-top: -8px;cursor: pointer;background: url('../../AdminSkin/default/images/house/sort_delete_icon.png') no-repeat center center;}
.selectTheme .house-t-btn{height: 16px;width: 16px; right: 32px; top: 50%; margin-top: -8px;cursor: pointer;background: url('../../AdminSkin/default/images/house/sort_icon.png') no-repeat center -16px;}
.selectTheme .house-b-btn{height: 16px;width: 16px; right: 48px; top: 50%; margin-top: -8px; cursor: pointer;background: url('../../AdminSkin/default/images/house/sort_icon.png') no-repeat center -32px;}
.pageNavigation { margin-top: -6px; float:right; padding:0;}
.pageNavigation .cur, .pageNavigation .current { border:0 none;}
.pageNavigationss { float:right;}
.pageNavigationss em { font-weight:normal; font-style:normal;}
.pageNavigationss a,.pageNavigationss span { background-color: #fff; display: inline-block; vertical-align: middle; margin: 0; padding: 6px 12px; border: 1px solid #ededed; color: #999; font-size: 14px; line-height: 20px; border-radius:3px;}
.pageNavigationss .current { background-color:#36c; color:#fff;}
</style>
<script src="{$Default_tplPath}js/jquery-1.10.2.min.js"></script>
<script>
window['keyvalues'] = {
	IsTop:  '',
real: -1,
LoveUserStatus: -1,
IsVip: -1,
Sex: -1,
heightStart:  '',
heightEnd:  '',
ageStart:  '',
ageEnd:  '',
xueli:  '',
work:  '',
yuexin: '',
marriage: -1,
pageid: 1,
jiguanCity: -1,
jiguanProvince: -1,
jiguanCounty: -1,
workProvince: -1,
workCity: -1,
workCounty: -1,
LoveSort: -1,
x: 0,
y: 0,
pageSize: 20,
search:'',
isNew: false
}
</script>
<div class="tips-h1" style="margin:0 0 15px;"><div class="tip"><p>鍙充晶鍒楄〃涓殑鎺掑簭鍗冲湪涓撻鍒楄〃涓樉绀虹殑鎺掑簭锛屽彸渚у垪琛ㄩ粯璁ゆ帓搴忥細<span style="color:#36c;">缃《浼氬憳-VIP浼氬憳-浼氬憳鎺掑簭鍊?/span></p></div></div>
<div class="wrapper">
	<div class="inner_sub_box" id="app" style="display: none;">
        <div class="hd clearfix" style="margin-bottom: 20px;">涓撻浼氬憳绠＄悊銆€<a href="List" class="global_btn">杩斿洖涓婁竴绾?/a></div>
        <div class="selectTheme clearfix">
			<ul class="ul-form clearfix">
				<li class="ul-form ss-col-5">
					<div class="con">
						<div class="sel_box" @mouseenter="SexShow=true" @mouseleave="SexShow=false">{{SexName}}<i class="ico"></i>
							<div class="sel_po" v-show="!!SexShow">
								<item-select v-for="tag in SexList" :key="tag.Categoryid" :tag="tag" forid="Sex" fortxt="SexName" fotaction="SexShow" is2=""></item-select>
							</div>
						</div>
						<div class="box" style="vertical-align:middle;">
							<div class="ss-house-search relative" style="height: 38px;">
								<input type="text" name="search" placeholder="鍏抽敭璇嶆悳绱? v-model="search" style="vertical-align:top;" />
								<a href="#" class="ss-house-search-btn absolute" @click.prevent="getNewBatchImport()"></a>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div class="ss-house-box ohidden"> 
				<div class="ss-col-6"> 
					<div class="ss-house-ul-box relative"> 
						<ul class='ss-house-ul'>
							<li class="ss-house-ul-item relative" :class="{ interClass: index%2==0 }" v-for='(item,index) in displayedItems' :key='index'>
								<span class='absolute checkbox_span' @click="selectOne('displayedItems',index)" :class="item.checked?'on':''"></span> 
								<h2>{{item.chrtruename}}</h2>
								<i class="house-r-btn absolute" @click.prevent='setSingleTheme( 1 , [item.Id],index)'></i>
							</li>
						</ul>
						<div class="ss-house-box-bot relative ohidden">
							<div class="pageNavigationss" id="pageNavigation"></div>
							<span class='absolute checkbox_span' @click="selectAll('displayedItems',1)" :class="isSelectAll_1?'on':''"></span>
							<p class="fl font">鍏ㄩ€?/p>
							<div class="ss-house-box-bot-btn ohidden">
								<a href="javascript:void(0)" class="ss-hx-btn fl mr10" @click.prevent="piliang('displayedItems','1')">娣诲姞鍒颁笓棰?/a>
							</div>
							
						</div>
					</div>
				</div>
		
				<div class="ss-col-6"> 
					<div class="ss-house-ul-box relative ml20"> 
						<ul class='ss-house-ul'>
							<li class="ss-house-ul-item relative" :class="{ interClass: index%2==0 }" v-for='(item,index) in themeListItems' :key='index'>
								<span class='absolute checkbox_span' @click="selectOne('themeListItems',index)" :class="item.checked?'on':''"></span>
								<h2>{{item.chrtruename}}</h2>
								<i class="house-t-btn absolute" @click='themeSortHandle(item.Id,0,index)' v-show='index!==0'></i>
								<i class="house-b-btn absolute" @click='themeSortHandle(item.Id,1,index)' v-show='index!==themeListItems.length-1'></i>
								<i class="house-delet-btn absolute" @click='setSingleTheme( 2 , [item.LoveUserId],index)'></i>
							</li>
						</ul>
			
						<div class="ss-house-box-bot relative ohidden">
							<span class='absolute checkbox_span' @click="selectAll('themeListItems',2)" :class="isSelectAll_2?'on':''"></span>
			
							<p class="fl font">鍏ㄩ€?/p>
							<div class="ss-house-box-bot-btn ohidden">
								<a href="javascript:void(0)" class="ss-hx-btn fl mr10" @click.prevent="piliang('themeListItems','2')">鍒犻櫎</a>
							</div> 
						</div>
			
					</div>
				</div>
			
			</div>
			<div style="margin-top:20px; text-align:center;"><a href="list" class="btn-form ani" style="display: inline-block; margin: 0; color: #fff;">杩斿洖涓撻鍒楄〃</a></div>
		</div>
        
        
    </div>
</div>
<script src="{$atplPath}js/jquery.form.js"></script>
<script src="{$Default_tplPath}js/purl.js"></script>
<script src="{$atplPath}js/vue/axios.min.js"></script>
<script src="{$atplPath}js/vue/es6-promise.auto.min.js"></script>
<script src="{$atplPath}js/vue/vue.min.js"></script>
<script src="{$atplPath}js/house_admin_2018.js"></script>
<script src="{$atplPath}js/vue/houseCategory.js"></script>
<script src="{$atplPath}js/vue/form_2018.js"></script>
<script src="{$atplPath}js/MSGwindowShow.js"></script>
<script>
var mypage = new Vue({
	el: '#app',
	components: {'item-select':Item_select},
	data: {
		Keyword : '',
		actionName :'娣诲姞',
		ThemeName	:'', //涓撻鍚嶇О
		IndexPicUrl	:'', //灏侀潰鍥剧墖鍦板潃
		'search'	:'', //鍏抽敭璇?		Intro		:'', //缃戦〉鎻忚堪
		Description	:'', //鑷畾涔夋枃瀹?		DisplayType	: 1, //鏄剧ず鐘舵€?		ThemeId : 0,
		Sex : '',
		SexShow :false,
		SexName :'璇烽€夋嫨',
		SexList :[{Categoryid: '-1', Chrcategory: '鎬у埆涓嶉檺'},{Categoryid: '1', Chrcategory: '鐢?},{Categoryid: '0', Chrcategory: '濂?}],
		
		
		TotalRecord : 0,
		displayedItems : [],
		articleList_result: [],
	
		ArticleIds : [],
		
		isSelectAll_1:false, //鎵归噺鍒犻櫎鍏ㄩ€夌姸鎬?		isSelectAll_2:false, //鎵归噺鍒犻櫎鍏ㄩ€夌姸鎬?		IsShelf:true, //鍙戝竷/鏈彂甯?
		houseListItems:'', //聽宸﹁竟
		themeListItems:''//聽鍙宠竟
	},
	methods: {
        piliang:function(Items,val){//鎵归噺鎿嶄綔
			var that = this,arr = [],len = that[Items].length;

			for(var i=0;i<len;i++){
				if(!that[Items][i].checked){continue;}
				arr.push(that[Items][i].Id);
			}
			if(arr.length ===0){
				Sys_showToast({title:'鎮ㄤ粈涔堥兘娌℃湁閫夋嫨鍝︼紒'});
				return;
			}
			if(!window.confirm('鎮ㄧ‘瀹氭墽琛岃鎿嶄綔鍚楋紵')){return false;}
			if(val==='1'){
				that.addThemeHandle(arr,function(){
					that['isSelectAll_'+val] = false;
					that.getThemeArticle();
					that.displayedItems.splice( 0 ); 
				});
			}else if(val==='2'){
				that.deleteThemeHandle(arr,function(){that['isSelectAll_'+val] = false;that.getThemeArticle()});
			}
		},
		getNewBatchImport:function(){
			window['keyvalues'].pageid = 1;
			this.batchImport();
		},
		//鑾峰彇鍙坊鍔犵殑鏁版嵁
		batchImport:function(){
			var that = this;
			that.displayedItems = [];
			window['keyvalues'].search = that.search;
			window['keyvalues'].Sex = that.Sex;
			that.CurrentPage = parseInt(window['keyvalues'].pageid);
			axios.get('/api/LoveUser/GetFrontLoveUsers',{params:window['keyvalues']}).then(function(res){
				if(typeof res.data.iserror !== 'undefined' && res.data.iserror === 1){
					return ;
				}
				var Data = res.data.Data;
				for(var i=0; i< Data.length;i++){
					Data[i].Id = Data[i].id;
				}
				that.TotalPage = parseInt(res.data.TotalPage)
				that.TotalRecord = parseInt(res.data.TotalRecord);
				that.setPageList();
				Data.length>0 ?(that.displayedItems = that.displayedItems.concat(Data)):'';
			}).catch(function(err){ console.log(err);});
		},
		//鑾峰彇褰撳墠涓撻宸查€夌殑鏁版嵁
		getThemeArticle:function(){
			var that = this,url = "/api/LoveTheme/GetLoveUserInfoByThemeId?themmId="+that.ThemeId;
				axios.get( url ).then(function(res){
				if(typeof res.data.iserror !== 'undefined' && res.data.iserror === 1){
					return;
				}
				var Data = res.data;
				for(var i=0;i<Data.length;i++){
					//Data[i].Id = Data[i].CommodityId;
				}
				that.themeListItems = Data ;
			}).catch(function(err){that.ifLoadding = false; console.log(err);});
		},
		setPageList:function(){
			var that = this;
			var result = makePageListMenu(that.TotalPage,that.CurrentPage);
			$('#pageNavigation').html(result);
		},
		// 鎵归噺閫夋嫨鍗曚釜
		selectOne:function(Items,index){
			var that = this;
			Vue.set(that[Items][index],'checked',!that[Items][index].checked);
		},
		//鎵归噺鍒犻櫎鍏ㄩ€?		selectAll:function(Items,n){
			var that = this,i=0,len = that[Items].length;
			that['isSelectAll_'+n] = !that['isSelectAll_'+n];
			for(;i<len;i++){
				Vue.set(that[Items][i],'checked',that['isSelectAll_'+n]);
			}
		},
		//鎵ц鍗曚釜娣诲姞/鍒犻櫎
		setSingleTheme:function( val , arr , index ){
			var that = this;
			if(val==1){
				that.addThemeHandle(arr, function( ){
					var curArr = that.displayedItems[ index ] ;
					that.displayedItems.splice( index ,1); 
					that.themeListItems.unshift({Id: curArr.Id , chrtruename : curArr.chrtruename });
					Sys_showToast({title:'娣诲姞鎴愬姛!',type:'success'});
				});
			}else if(val==2){
				that.deleteThemeHandle(arr, function( ){
					that.themeListItems.splice( index ,1);
					
				});
			}
		},
		//鎵归噺娣诲姞
		addThemeHandle:function( id_arr , callback ){
			var that = this,url = '/api/LoveTheme/BatchAddLoveUserToTheme?themeId='+that.ThemeId;
			$.ajax({
				url:url,
				type:"POST",
				dataType:"json",
				contentType:"application/json;charset=utf-8",
				data: JSON.stringify(id_arr),
				success:function(res){
					var txt = '';
					if(typeof res.iserror !== 'undefined' && res.iserror === 1){
						Sys_showToast({title:res.data});
					}
					//callback&&callback.call(that);
                    that.getThemeArticle();
					Sys_showToast({title:'娣诲姞鎴愬姛!',type:'success'});
				}
			});
		},
		//鎵归噺鍒犻櫎
		deleteThemeHandle:function(id_arr , callback ){
			var that = this,url = '/api/LoveTheme/BatchDeleteLoveUserToTheme?themeId='+that.ThemeId,append_inner = $('#append_inner');
			$.ajax({
				url:url,
				type:"POST",
				dataType:"json",
				contentType:"application/json;charset=utf-8",
				data: JSON.stringify(id_arr),
				success:function(res){
					var txt = '';
					if(typeof res.iserror !== 'undefined' && res.iserror === 1){
						Sys_showToast({title:res.data});
					}
					callback&&callback.call(that);
					Sys_showToast({title:'鍒犻櫎鎴愬姛!',type:'success'});
				}
			});
		},
		//涓撻鍟嗗搧鎺掑簭
		themeSortHandle:function( Id,dir,index){
			var that = this,url = '/api/LoveTheme/UpdateLoveUserThemeMove?id='+Id+'&move='+dir;
			$.ajax({
				url:url,
				type:"POST",
				success:function(res){
					if(typeof res.iserror !== 'undefined' && res.iserror === 1){
						Sys_showToast({title:res.data});
						return;
					}
					that.getThemeArticle()
					Sys_showToast({title:'鎻愪氦鎴愬姛!',type:'success'});
				}
			});
		}
	},
	created: function (){
		var that = this;
		$('#app').show();
        var url_obj = $.url(window.location.href).param();
		if(!!url_obj['sid'] && url_obj['sid']!==''){
            that.ThemeId=url_obj['sid'];
            that.getThemeArticle();
		}
	}
});
function getPagingGlobal(obj){
	window['keyvalues'].pageid=obj.pageid;
	mypage.batchImport()
	return false;
}
</script>
$load("Page_Foot.htm")