{extend name="main"}
{block name="style"}
<style type="text/css">
.rounded-0 .el-input__inner{border:0;border-radius: 0;}
.job-fair-nav .el-tabs__header{margin:0;}
.job-fair-nav .el-tabs__nav-scroll{padding: 0 1rem;}
.job-fair-booth .el-tabs__item{height:60px;line-height:60px;padding: 0 2rem;}
.el-autocomplete .el-select .el-input {width: 130px; }
.resume-seniority{list-style: none;padding: 0;margin: 0;}
.resume-seniority li{position: relative;padding: 0 .5rem;}
.resume-seniority li:nth-of-type(1){padding: 0 .5rem 0 0;}
.resume-seniority li:before{content: " ";position: absolute;left: 0;top:20%;bottom: 10%;width: 2px;background-color: #dadada;}
.resume-seniority li:nth-of-type(1):before{width: 0;}
.py-10{padding: 10rem 0;}
.home-resume-list{margin: -1px;}
.home-resume-list .col-4{padding: 1px; }
.home-resume-list .col-3{padding: 1px; }
.home-resume-list .col-4:hover .bg-white{background-color: rgba(255,255,255,.75) !important;}
.home-resume-list .col-3:hover .bg-white{background-color: rgba(255,255,255,.75) !important;}
</style>
{/block}
{block name="body"}
<el-select v-model="search.jid" clearable placeholder="请选择" class="rounded-0 w-50"
@change="setJid">
	<el-option
	  v-for="item in JobFair"
	  :key="item.id"
	  :label="'ID:'+item.id+'-'+item.title"
	  :value="item.id">
	</el-option>
</el-select>
<div class="bg-white p-3">
	<div v-if="search_resume.jid">
		<el-form :model="search_resume" @submit.native.prevent="initResumeHtml" ref="search_resume" label-width="120px" :label-position="labelPosition" size="mini">

		  <el-form-item label="搜索类型" prop="search_type">
		    <el-radio-group v-model="search_resume.search_type">
		      <el-radio :label="'id'">简历ID</el-radio>
		      <el-radio :label="'uid'">UID</el-radio>
		      <el-radio :label="'name'">姓名</el-radio>
		      <el-radio :label="'mobile'">手机号</el-radio>
		      <el-radio :label="'email'">联系人邮箱</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item :label="getSearchType()" prop="key">
		    <el-input v-model="search_resume.key" class="col-12 col-sm-2 pl-0 pr-0" ></el-input>
		  </el-form-item>

		  <el-form-item label="完整度" prop="progress">
		    <el-input-number v-model="search_resume.progress" :step="5" step-strictly :min="0" max="99"></el-input-number>
		  </el-form-item>

		  <el-form-item label="刷新时间" prop="refresh_time">
		    <el-date-picker
		      v-model="search_resume.refresh_time"
		      align="right"
		      type="date"
		      format="yyyy-M-d"
		      value-format="yyyy-M-d"
		      placeholder="选择刷新时间之后的简历">
		    </el-date-picker>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="initResumeHtml">查询</el-button>
		    <el-button @click="resetForm('search_resume')">重置</el-button>
		  </el-form-item>
		</el-form>
		<div class="table-responsive py-3">
			<el-button-group class="text-nowrap">
			  <el-button type="primary" size="mini" @click="addResumeList">一键加入招聘会</el-button>
			</el-button-group>
		</div>
		<el-table
			ref="tableList"
	      	:data="resumeData"
    		stripe
    		v-loading="search_resume.ajax"
    		style="width: 100%;"
    		row-class-name="row-flex"
    		@selection-change="handleSelectionChange">
		  <el-table-column
			  type="selection"
			  width="55">
		  </el-table-column>
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="基本信息"
	        min-width="240">
		      <template slot-scope="scope">
	        	{{XYBase.Date.getMStoYear(scope.row.age*1000)}}/
				<span v-if="scope.row.sex==1">男</span>
				<span v-else-if="scope.row.sex==2">女</span>
				<span v-else="scope.row.sex">未设置</span>
	        	/{{scope.row.educational_background}}/{{XYBase.Date.getMStoYear(scope.row.work_experience_time*1000)}}年经验
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        width="240">
		      <template slot-scope="scope">
		      	<div class="flex flex-center">
					<el-image
					  	v-if="scope.row.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="scope.row.headimg" 
					    :preview-src-list="[scope.row.headimg]">
					</el-image>
		      		<div>
				      	<el-link :href="'/user?uid='+scope.row.uid" target="_blank"
				      	:underline="false"
				      	title="用户中心">{{scope.row.nickname}}</el-link>
		      		</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间线"
	        width="180">
		      <template slot-scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <p>创建时间: {{ scope.row.create_time }}</p>
		          <p>更新时间: {{ scope.row.update_time }}</p>
		          <p>刷新时间: {{ scope.row.refresh_time }}</p>
		          <div slot="reference" class="name-wrapper">
		            <el-tag size="small" type="info">{{ scope.row.create_time }}</el-tag>
		          </div>
		        </el-popover>
		      </template>
	      </el-table-column>
	    </el-table>
		<div class="table-responsive py-3">
			<el-pagination
			  background
		      @size-change="handleResumeSizeChange"
		      @current-change="handleResumeCurrentChange"
		      :current-page="search_resume.page"
		      :page-sizes="[12,30,90,150]"
		      :page-size="search_resume.pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="search_resume.total">
		    </el-pagination>
		</div>
		<div class="table-responsive py-3">
			<el-button-group class="text-nowrap">
			  <el-button type="primary" size="mini" @click="addResumeList">一键加入招聘会</el-button>
			</el-button-group>
		</div>
	</div>
	<div class="py-10 text-center text-secondary" v-else>
		请先选择要管理的招聘会
	</div>
	<div v-if="search.jid&&tableData.length">
		<div class="bg-light row py-2 home-resume-list">
			<div v-for="(v,index) in tableData" class="col-4">
				<div class="flex bg-white p-3 flex-center">
					<div class="p-3">
						<img :src="v.headimg" width="80" height="80" class="rounded-circle">
					</div>
					<div class="flex-1 h6 mb-0">
						<div class="flex flex-center">
							<div class="flex-1 text-dark">{{v.name}}</div>
							<div class="text-secondary small">信息完整度:<span class="text-primary h5 mb-0">{{v.progress}}%</span></div>
						</div>
						<div class="flex flex-center">
							<div class="flex-1">
								<ul class="list resume-seniority flex mt-2 text-secondary small">
									<li>{{v.sex==1?'男':''}}{{v.sex==2?'女':''}}</li>
									<li>{{v.educational_background}}</li>
									<li>{{v.age}}岁</li>
									<li>{{v.work_experience_time?v.work_experience_time+'年':'无'}}工作经验</li>
								</ul>
								<div class="mt-2 text-secondary small">{{v.industry}}</div>
								<div class="text-secondary mt-2 small"><i class="el-icon-location-information mr-2"></i>{{v.job_area}}</div>
							</div>
							<div>
								<el-button type="danger" size="mini"
								@click="delResume(v,index)">删除</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="table-responsive py-3">
			<el-pagination
			  background
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="search.page"
		      :page-sizes="[12,30,90,150]"
		      :page-size="search.pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="search.total">
		    </el-pagination>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="JobFair"}
	var JobFair=[];
	{else/}
	var JobFair={:json_encode($JobFair,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			JobFair:JobFair,
			multipleSelection:[],
			search:{
				jid:{notempty name=":request()->get('jid')"}{:request()->get('jid')}{else/}''{/notempty},
				page:1,
				total:1,
				pageSize:12,
				ajax:false
			},
			search_resume:{
				jid:{notempty name=":request()->get('jid')"}{:request()->get('jid')}{else/}''{/notempty},
				key:'',
				search_type:'id',
				progress:'',
				refresh_time:'',
				page:1,
				total:1,
				pageSize:12,
				ajax:false
			},
			resumeData:[],
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
		    toggleSelection(rows) {
		        if (rows) {
		          rows.forEach(row => {
		            this.$refs.tableList.toggleRowSelection(row);
		          });
		        } else {
		          this.$refs.tableList.clearSelection();
		        }
		    },
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
	    	getSearchType(){
	    		var text='简历ID';
	    		switch(this.search.search_type){
	    			case 'id':
	    				text='简历ID';
	    				break;
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'name':
	    				text='姓名';
	    				break;
	    			case 'mobile':
	    				text='手机号';
	    				break;
	    			case 'email':
	    				text='邮箱';
	    				break;
	    		}
	    		return text;
	    	},
	    	addResumeList(){
	    		if(this.multipleSelection.length){
	      			var _this=this;
	    			var resume_id=[];
	    			for (var i = 0; i < this.multipleSelection.length; i++) {
	    				resume_id.push(this.multipleSelection[i].id);
	    			}
	    			const loading=XYBase.openloading();
					$.ajax({
						url:'',
						type:'POST',
						data:{
							jid:_this.search_resume.jid,
							resume_id:resume_id
						},
						dataType:'json',
						error:function(err){
							loading.close();
							XYBase.error(XYBase.config.system_network_error);
						},
						success:function(ret){
							loading.close();
							if (ret) {
								if(ret.code===0){
									_this.toggleSelection();
									_this.initResumeHtml();
									_this.initHtml();
								}else{
		        					XYBase.msg(ret.msg);
								}
							}else{
								XYBase.error(XYBase.config.system_network_error);
							}
						}
					});
	    		}
	    	},
	    	delResume(val,index){
	    		var _this=this;
		        _this.$confirm('此操作将永久删除该参会人才, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	$.getJSON('/job-fair/delResume/'+val.id,function(ret){
		        		if (ret) {
		        			if (ret.code == 0) {
	    						_this.tableData.splice(index,1);
		        			}else{
		        				XYBase.msg(ret.msg);
		        			}
		        		}else{
							XYBase.error(XYBase.config.system_network_error);
		        		}
		        	});
		        }).catch(() => {
    				XYBase.msg('已取消删除');
		        });
	    	},
			handleResumeSizeChange(val) {
				this.search_resume.page=1;
				this.search_resume.pageSize=val;
	          	this.initResumeHtml();
			},
			handleResumeCurrentChange(val) {
				this.search_resume.page=val;
	          	this.initResumeHtml();
			},
	      	initResumeHtml() {
	      		var _this=this;
	      		if(!this.search_resume.jid||this.search_resume.ajax)return;
	      		_this.search_resume.ajax=true;
				$.ajax({
					url:'/resume',
					type:'get',
					data:_this.search_resume,
					dataType:'json',
					error:function(err){
	      				_this.search_resume.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search_resume.ajax=false;
						if (ret) {
	      					_this.resumeData=[];
							if (ret.code === 0) {
								_this.search_resume.total=ret.data.total;
								_this.resumeData=ret.data.data;
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			setJid(){
				this.search_resume.jid=this.search.jid;
				this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		if(!this.search.jid||this.search.ajax)return;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
	      					_this.tableData=[];
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}