{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style>
	.checkbox-id .el-checkbox__input{width: 50px;}
	.checkbox-id .el-checkbox__label{display: none;}
	.wrap .el-dialog__body{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
	.poster-ul{margin-bottom: 0;padding-left: 0;list-style: none;}
	.poster-ul .poster-li{height: auto;padding-bottom: 30px}
	.poster-ul .poster-li .poster-item-body{position: relative;border-width: 2px !important;}
	.poster-ul .poster-li .el-image{width: 150px;display: block;}
	.poster-ul .poster-li .vip-primary{
		position: absolute;
		right: 0;
		z-index: 1;
		background: #FFFFFF;
		height: 24px;
		line-height: 24px;
		width: 80px;
		text-align: center;
	    border-bottom-left-radius: 12px;
	    border-top-left-radius: 12px;
	}
	.poster-ul .poster-li .vip-primary span{
		font-size: 10px;
		font-weight: 500;
		color: #343434;
	}
	.poster-ul .poster-li .vip-icon{
		position: absolute;
		right: 0;
		z-index: 1;
		background: linear-gradient(143deg, #FDF1CE, #575555, #655F61);
		height: 24px;
		line-height: 24px;
		width: 80px;
		text-align: center;
	    border-bottom-left-radius: 12px;
	    border-top-left-radius: 12px;
	}
	.poster-ul .poster-li .vip-icon span{
		font-size: 10px;
		font-weight: 500;
		color: #D8B077;
		background: linear-gradient(0deg, #C3A36D 0%, #E8D3AA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.poster-ul .poster-more{height: auto;}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_jobs"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow pb-3">
			<div class="flex mb-3">
				<div class="flex-1 block-title-before py-2">职位管理</div>
				<div class="pt-2">
					<a class="el-button d-block rounded-0 el-button--primary el-button--mini" href='/user/jobs/release'><i class="el-icon-position"></i><span>发布职位</span></a>
				</div>
			</div>
			<el-tabs v-model="activeName">
				<el-tab-pane label="发布中的职位" name="publishing"></el-tab-pane>
				<el-tab-pane label="未显示的职位" name="none"></el-tab-pane>
				<el-tab-pane label="全部职位" name="all"></el-tab-pane>
			</el-tabs>
			<div class="bg-1E54E5 p-3 my-3 flex">
				<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
				<div class="flex-1 pl-2">
					<h6 class="text-primary">小提示</h6>
					<div class="text-secondary">亲爱的HR，您的帐号可同时发布 {{userInfo.release_jobs_sum}} 个职位，现已发布 {{userInfo.jobs_sum}} 个职位。 </div>
				</div>
			</div>
			<div class="flex mb-3" v-if="jobsList.length>0">
				<div class="w-50px text-center">
					<el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
				</div>
				<div class="flex-1">
					<el-button-group class="text-nowrap">
					  <el-button type="success" size="mini"
					  @click="setRefreshAll">刷新职位</el-button>
					  <el-button type="info" size="mini"
					  @click="setStatusAll(0)"
					  v-if="activeName=='publishing'">关闭职位</el-button>
					  <el-button type="success" size="mini"
					  @click="setStatusAll(1)"
					  v-if="activeName=='none'">开启职位</el-button>
					  <el-button type="danger" size="mini"
					  @click="setStatusAll(2)">删除</el-button>
					</el-button-group>
				</div>
			</div>
			<div v-loading="page.ajax">
				<div class="border mb-3" v-for="(v,index) in jobsList">
					<div class="flex py-3">
						<el-checkbox v-model="selectedList"
						:label="v" class="checkbox-id text-center"></el-checkbox>
						<div class="flex-1">
							<a :href="'/jobs/'+v.id+'.html'" target="_blank" class="h6 text-0143B1">{{v.title}}[{{v.jobs_city}}]</a>
							<div class="flex text-secondary">
								<div>待处理简历：</div>
								<a :href="'/user/resume/management?jobs_id='+v.id" class="text-0143B1"
								target="_blank">{{v.resume_to_be_processed}}</a>
								<div class="px-2">丨</div>
								<div>浏览量：</div>
								<div class="text-0143B1">{{v.view}}</div>
								<div class="px-2">丨</div>
								<div>{{v.refresh_time}}</div>
								<div class="pl-2" v-if="v.status==1">
									<el-link @click="setJobsRefreshTime(v);" type="success" :underline="false" class="small">刷新</el-link>
								</div>
							</div>
						</div>
						<div class="px-3">
							<el-button type="success" size="mini" 
							:disabled="v.top||v.status!=1"
							@click="openNewBuy(ValueAdded.jobs_top,v)">{{v.top?'置顶中：'+v.top_time:'职位置顶'}}</el-button>
							<el-button type="primary" size="mini" 
							:disabled="v.urgent||v.status!=1"
							@click="openNewBuy(ValueAdded.urgent,v)">{{v.urgent?'紧急置顶中：'+v.urgent_time:'紧急置顶'}}</el-button>
						</div>
					</div>
					<div class="flex bg-gray">
						<div class="w-50px"></div>
						<div class="flex-1 py-3">
							<div class="flex">
								<div class="pr-3 pointer"
								@click="openPosterWin(v)"><i class="el-icon-picture-outline mr-1 text-primary"></i>微海报</div>

								<el-popover
							    placement="top"
							    width="200"
							    trigger="hover">
							    <div class="px-2">
							    	<div class="py-2 text-center">
							    		<img :src="'/displayQrcode?icon=1&scheme={xycms:web name='url'/}/jobs/'+v.id+'.html'" alt="{xycms:web name='name'/}H5" width="160">
							    		<div class="text-primary pt-2 small font-weight-bold">微信扫一扫分享</div>
							    	</div>
							    </div>
								<div class="pointer" slot="reference"><i class="el-icon-picture-outline mr-1 text-success"></i>分享到朋友圈</div>
							  	</el-popover>
							</div>
						</div>
						<div class="py-3">
							<div class="flex text-secondary">
								<div class="pr-3">
									<el-link :href="'/user/jobs/saveJobs/'+v.id" target="_blank" type="info" :underline="false">修改</el-link>
								</div>
								<div class="pr-3">
									<el-link :href="getMatchingUrl(v)" target="_blank" type="info" :underline="false">匹配</el-link>
								</div>
								<div class="pr-3" v-if="v.auto_refresh">
							        <el-popover trigger="hover" placement="top">
							          <p>开始时间：{{ v.auto_refresh.start_time }}</p>
							          <p>结束时间：{{ v.auto_refresh.end_time }}</p>
							          <p>下次刷新：{{v.auto_refresh.next_time}}</p>
							          <p>已刷新：{{v.auto_refresh.sum}}次</p>
										<el-link slot="reference" type="info" :underline="false">下次刷新：{{v.auto_refresh.next_time}}</el-link>
							        </el-popover>
								</div>
								<div class="pr-3" v-else-if="v.status==1">
									<el-link @click="openNewBuy(ValueAdded.time_refresh,v)" type="info" :underline="false">智能刷新</el-link>
								</div>
								<div class="pr-3">
									<el-link @click="setStatus(v,0,index);" type="info" :underline="false" v-if="v.status==1">关闭</el-link>
									<el-link @click="setStatus(v,1,index);" type="info" :underline="false" v-else="v.status==0">开启</el-link>
								</div>
								<div class="pr-3">
									<el-link @click="setStatus(v,2,index);" type="danger" :underline="false">删除</el-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex mb-3" v-if="jobsList.length>0">
				<div class="w-50px text-center">
					<el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
				</div>
				<div class="flex-1">
					<el-button-group class="text-nowrap">
					  <el-button type="success" size="mini"
					  @click="setRefreshAll">刷新职位</el-button>
					  <el-button type="info" size="mini"
					  @click="setStatusAll(0)"
					  v-if="activeName=='publishing'">关闭职位</el-button>
					  <el-button type="success" size="mini"
					  @click="setStatusAll(1)"
					  v-if="activeName=='none'">开启职位</el-button>
					  <el-button type="danger" size="mini"
					  @click="setStatusAll(2)">删除</el-button>
					</el-button-group>
				</div>
			</div>
			<div class="empty-text py-5" v-if="jobsList.length<=0">暂无数据</div>
			<div class="table-responsive py-3 text-center">
				<el-pagination
				  background
				  :hide-on-single-page="true"
				  @current-change="setPageChange"
			      :current-page="page.page"
			      :page-size="15"
			      layout="total,  prev, pager, next, jumper"
			      :total="page.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
<el-dialog :visible.sync="posterDialogFormVisible"
:fullscreen="true" custom-class="wrap" :before-close="closePosterWin">
	<div slot="title">
		<div v-if="posterFormStep===1">第一步：选择职位</div>
		<div v-if="posterFormStep===2">第二步：选择海报</div>
		<div v-if="posterFormStep===3">完成</div>
	</div>
	<div class="flex1 wrap h-100">
		<div v-if="posterFormStep===1" class="flex1 wrap h-100">
			<el-table
				class="flex1"
				height="100%"
			    :data="jobsList"
			    v-loading="page.ajax"
			    border
			    highlight-current-row
			    @current-change="posterListJobsDataCurrent"
			    style="width: 100%">
			    <el-table-column
			      label="职位">
			      <template slot-scope="scope">
			      	<span class="el-radio__input mr-2" :class="{'is-checked':posterForm.jobs_id==scope.row.id}">
			      		<span class="el-radio__inner"></span>
			      	</span>
			      	{{scope.row.title}}[{{scope.row.jobs_city}}]
			      </template>
			    </el-table-column>
			</el-table>
			<div class="table-responsive py-3 text-center">
				<el-pagination
				  small
				  background
				  :hide-on-single-page="true"
				  @current-change="setPageChange"
			      :current-page="page.page"
			      :page-size="15"
			      layout="total,  prev, pager, next, jumper"
			      :total="page.total">
			    </el-pagination>
			</div>
		</div>
		<ul class="flex1 row poster-ul mx-0" v-infinite-scroll="getPosterList" style="overflow:auto"
		v-if="posterFormStep===2"
		v-loading="posterForm.ajax">
	    	<li v-for="(v,index) in posterList" class="col-auto poster-li">
	    		<div class="border pointer poster-item-body"
	    		:class="{'border-primary':posterForm.poster.indexOf(v.id)!==-1}"
	    		@click="selectedPoster(v)">
	    			<div :class="{'vip-primary':v.level===0,'vip-icon':v.level>0}"><span>{{v.vip_name}}</span></div>
	    			<el-image
	    			lazy
	    			:src="v.url"
	    			fir="fill"></el-image>
    			</div>
	    	</li>
	    	<li class="col-12 text-center poster-more py-3 text-secondary small">
	    		<div v-if="posterSearch.ajax==='more'"
	    		class="pointer"
	    		@click="getPosterList">点击加载更多</div>
	    		<div v-if="posterSearch.ajax==='loading'">加载中...</div>
	    		<div v-if="posterSearch.ajax==='noMore'">没有更多了</div>
	    	</li>
	  	</ul>
		<ul class="flex1 row poster-ul mx-0" v-infinite-scroll="()=>{}" style="overflow:auto"
		infinite-scroll-disabled="true"
		v-if="posterFormStep===3">
	    	<li v-for="(v,index) in jobsPoster" class="col-auto poster-li">
	    		<div class="border pointer poster-item-body border-white">
	    			<el-image
	    			lazy
	    			:src="v"
	    			fir="fill"
	    			:preview-src-list="jobsPoster"></el-image>
    			</div>
	    	</li>
	  	</ul>
	</div>
	<div slot="footer">
		<div class="flex">
		    <el-button @click="posterFormStep--;" v-if="posterFormStep>1"
		    :disabled="posterForm.ajax">上一步</el-button>
			<div class="flex-1"></div>
		    <el-button @click="closePosterWin">关闭</el-button>
		    <el-button type="primary" @click="posterFormStep = 2" v-if="posterFormStep===1">下一步</el-button>
		    <el-button type="primary" @click="getPoster" v-if="posterFormStep===2"
		    :loading="posterForm.ajax">完成({{posterForm.poster.length}}/5)</el-button>
		</div>
	</div>
</el-dialog>
{/block}
{block name="footer"}
{include file="module/login"/}
{include file="module/buy_win"/}
{/block}
{block name="script"}
<script type="text/javascript">
	{xycms:valueadded name="valueadded"}
	var ValueAdded={:json_encode($valueadded,JSON_UNESCAPED_UNICODE)};
	{else/}
	var ValueAdded=[];
	{/xycms:valueadded}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			ValueAdded:ValueAdded,
			buy:XYBase.buy,
			posterDialogFormVisible:false,
			posterFormStep:1,
			posterForm:{
				ajax:false,
				jobs_id:0,
				poster:[]
			},
			posterSearch:{
				is_company:0,
				page:1,
		    	ajax:'more'
			},
			posterList:[],
			jobsPoster:[],
			xy_score:{
				recharge_rate:{xycms:scoreconfig name="recharge_rate"},
				is_integer:{xycms:scoreconfig name="is_integer"},
				proportion:{xycms:scoreconfig name="proportion"},
			},
			page:{
				status:'publishing',
		    	ajax:false,
				total:0,
				page: 1
			},
			activeName:'publishing',
			indeterminate:false,
			jobsList:[],
			selectedIndex:null,
			loading:null,
			selectedList:[],
			checkAll:false
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		    activeName(val,oldVal){
				this.page.page=1;
		    	this.page.status=val;
		    	this.initHtml();
		    },
		    selectedList(val,oldVal){
		    	var count=val.length;
		    	var allCount=this.jobsList.length;
		    	this.indeterminate=count>0&&count!==allCount;
		    	this.checkAll=count>0&&count===allCount;
		    },
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this,()=>{});
			this.initHtml();
		},
		methods:XYBase.methods({
			getPoster(){
				var _this=this;
				_this.posterForm.ajax=true;
				_this.sendPost({
					url:'/user/getPoster',
					data:_this.posterForm,
				},function(ret){
					_this.posterForm.ajax=false;
					if (ret) {
						if (ret.code === 0) {
							_this.posterFormStep = 3;
							_this.jobsPoster=ret.data;
						}else XYBase.msg(ret.msg);
					}
				});
			},
			selectedPoster(val){
				var index=this.posterForm.poster.indexOf(val.id);
				if(index===-1){
					if (this.posterForm.poster.length>=5)
						return XYBase.msg('最大同时生成五张');
					if (this.userInfo.company_vip_level<val.level){
						this.$confirm('当前海报需要'+val.vip_name+'才能使用，是否去开通？', '提示', {
							dangerouslyUseHTMLString:true,
				          	confirmButtonText: '升级套餐',
				          	cancelButtonText: '取消',
				          	type: 'warning'
				        }).then(() => {
							window.open('/user/vip/server');
				        }).catch(() => {
				        });
					}else{
						this.posterForm.poster.push(val.id);
					}
				}else{
					this.posterForm.poster.splice(index,1);
				}
			},
			posterListJobsDataCurrent(val){
				this.posterForm.jobs_id=val.id;
			},
			closePosterWin(done){
				this.posterForm.ajax=false;
				this.posterForm.jobs_id=0;
				this.posterForm.poster=[];
				typeof done=='function'&&done();
				this.posterDialogFormVisible=false;
			},
			openPosterWin(val){
				this.posterFormStep=2;
				this.posterForm.jobs_id=val.id;
				this.posterDialogFormVisible=true;
			},
		    handleCheckAllChange(val) {
		    	if(val){
		    		this.selectedList=this.jobsList;
		    	}else{
		    		this.selectedList=[];
		    	}
		    },
			setRefreshAll(){
				if(!this.selectedList.length)return;
				this.selectedIndex=0;
				this.loading=XYBase.openloading();
				this.setRefreshAllAjax();
			},
			setRefreshAllAjax(){
				var _this=this;
				var row=this.selectedList[this.selectedIndex];
				if (!row) return this.loading.close();
				_this.sendGet({
					url:'/user/jobs/setRefreshTime/'+row.id,
				},function(ret){
					_this.selectedIndex++;
					if (ret) {
						if (ret.code === 0) {
							row.refresh_time=ret.time;
						}
					}
					_this.setRefreshAllAjax();
				});
			},
			setRefreshAllAjax(){
				var _this=this;
				var row=this.selectedList[this.selectedIndex];
				if (!row) return this.loading.close();
				_this.sendGet({
					url:'/user/jobs/setRefreshTime/'+row.id,
				},function(ret){
					_this.selectedIndex++;
					if (ret) {
						if (ret.code === 0) {
							row.refresh_time=ret.time;
						}
					}
					_this.setRefreshAllAjax();
				});
			},
			setStatusAll(status){
				if(!this.selectedList.length)return;
				var _this=this;
				if (status==2) {
					_this.$confirm('确定要删除所选职位吗？', '提示', {
						dangerouslyUseHTMLString:true,
			          	confirmButtonText: '确定',
			          	cancelButtonText: '取消',
			          	type: 'warning'
			        }).then(() => {
						_this.selectedIndex=0;
						_this.loading=XYBase.openloading();
						_this.setStatusAllAjax(status);
			        }).catch(() => {
			        	XYBase.msg('已取消');
			        });
				}else{
					this.selectedIndex=0;
					this.loading=XYBase.openloading();
					this.setStatusAllAjax(status);
				}
			},
			setStatusAllAjax(status){
				var _this=this;
				var row=this.selectedList[this.selectedIndex];
				if (!row){
					this.initHtml();
					return this.loading.close();
				}
				_this.sendGet({
					url:'/user/jobs/setStatus/'+row.id+'/'+status,
				},function(ret){
					_this.selectedIndex++;
					if (ret) {
						if (ret.code === 0) {
							row.status=status;
						}
					}
					_this.setStatusAllAjax(status);
				});
			},
			openNewBuy(val,jobs){
	    		document.body.style="overflow: hidden;padding-right:17px;";
	    		this.buy.title='增值服务';
	    		this.buy.stitle=val.title;
				this.buy.pay_status='value-added';
	    		this.buy.form.pay_type='';
	    		this.buy.form.type=val.type;
	    		this.buy.listData=val.data;
	    		this.buy.view=true;
    			this.buy.showSelectedJobs=true;
				this.buy.data1=jobs;
	    		this.buy.form.value=jobs.id;
			},
			setPageChange(val){
				this.page.page=val;
				this.initHtml();
			},
			getMatchingUrl(row){
				var nature_of_work=3;
				if (row.jobs_type)
					nature_of_work=1;
				return '/resume?cid='+row.jobs_cate3+'&area='+row.jobs_area2+'&nature_of_work='+nature_of_work+'&salary_min='+row.salary_min+'&salary_max='+row.salary_max+'&education_level='+row.education_level;
			},
			setStatus(row,status,index){
				var _this=this;
				if (status==2) {
					_this.$confirm('确定要删除【'+row.title+'】职位吗？', '提示', {
						dangerouslyUseHTMLString:true,
			          	confirmButtonText: '确定',
			          	cancelButtonText: '取消',
			          	type: 'warning'
			        }).then(() => {
						var loading=XYBase.openloading();
			        	_this.sendGet({
			        		url:'/user/jobs/setStatus/'+row.id+'/'+status,
			        	},function(ret){
							loading.close();
			        		if (ret) {
			        			if (ret.code === 0) {
			        				_this.jobsList.splice(index,1);
			        			}else{
			        				XYBase.msg(ret.msg);
			        			}
			        		}
			        	});
			        }).catch(() => {
			        	XYBase.msg('已取消');
			        });
				}else{
					var loading=XYBase.openloading();
					_this.sendGet({
						url:'/user/jobs/setStatus/'+row.id+'/'+status,
					},function(ret){
						loading.close();
						if (ret) {
							if (ret.code === 0) {
		        				_this.jobsList.splice(index,1);
								row.status=status;
							}else XYBase.msg(ret.msg);
						}
					});
				}
			},
			setJobsRefreshTime(row){
				var _this=this;
				var loading=XYBase.openloading();
				_this.sendGet({
					url:'/user/jobs/setRefreshTime/'+row.id,
				},function(ret){
					loading.close();
					if (ret) {
						if (ret.code === 0) {
							row.refresh_time=ret.time;
						}else XYBase.msg(ret.msg);
					}
				});
			},
			getPosterList(){
				var _this=this;
				if(_this.posterSearch.ajax=='loading'
					||_this.posterSearch.ajax=='noMore')
					return;
				_this.posterSearch.ajax='loading';
				_this.sendGet({
					url:'/user/poster',
					data:_this.posterSearch,
				},function(ret){
					if (ret) {
						if (ret.code === 0) {
							_this.posterSearch.ajax='more';
							if(ret.data.current_page>=ret.data.last_page)
								_this.posterSearch.ajax='noMore';
							_this.posterSearch.page++;
							for (var i = 0; i < ret.data.data.length; i++) {
								_this.posterList.push(ret.data.data[i]);
							}
							return;
						}else XYBase.msg(ret.msg);
					}
					_this.posterSearch.ajax='noMore';
				});
			},
			initHtml(){
				var _this=this;
				_this.page.ajax=true;
				_this.sendGet({
					url:'',
					data:_this.page,
				},function(ret){
					_this.page.ajax=false;
					if (ret) {
						_this.jobsList=[];
						_this.selectedList=[];
						_this.page.total=ret.data.total;
						if (ret.code === 0) {
							_this.jobsList=ret.data.data;
						}else XYBase.msg(ret.msg);
					}
				});
			}
		})
	});
</script>
{/block}