{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/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/personal_left"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow">
			<el-tabs v-model="activeName">
				<el-tab-pane label="面试邀请" name="interview_invitation"></el-tab-pane>
				<el-tab-pane label="已申请职位" name="position_applied"></el-tab-pane>
				<el-tab-pane label="浏览过的职位" name="positions_viewed"></el-tab-pane>
				<el-tab-pane label="浏览过我" name="viewed_me"></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">招聘过程中企业无权收取任何费用，避免上当受骗！</div>
				</div>
			</div>
			<div class="table-responsive">
				<el-table
					ref="multipleTable"
			      	:data="tableData"
		    		stripe
		    		v-loading="search.ajax"
		    		style="width: 100%;"
		    		header-cell-class-name="bg-1E54E5 text-666666">
			      <el-table-column
			        prop="title"
			        label="职位名称"
			        width="180"
			        v-if="activeName!='viewed_me'">
				      <template slot-scope="scope">
				      	<el-link :href="'/jobs/'+scope.row.jobs_id+'.html'"
				      	:underline="false"
				      	target="_blank">{{scope.row.title}}</el-link>
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="company_name"
			        label="公司名称"
			        min-width="180"
			        show-overflow-tooltip>
				      <template slot-scope="scope">
				      	<el-link :href="'/company/'+scope.row.company_id+'.html'"
				      	:underline="false"
				      	target="_blank">{{scope.row.company_name}}</el-link>
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="update_time"
			        label="更新时间"
			        show-overflow-tooltip>
			      </el-table-column>
			      <el-table-column
			        label="查看状态"
			        width="80"
			        v-if="activeName!='positions_viewed'&&activeName!='viewed_me'">
			        <template slot-scope="scope">
			        	<el-tag
						    v-for="item in jobs_delivery"
						    :key="item.title"
						    :type="item.type"
						    v-if="item.value == scope.row.status"
						    effect="plain"
						    :disable-transitions="true"
						    size="mini">
						    {{ item.title }}
						</el-tag>
			        </template>
			      </el-table-column>
			      <el-table-column
			        label="操作"
			        width="140"
			        v-if="activeName!='positions_viewed'&&activeName!='viewed_me'">
			        <template slot-scope="scope">
			        	<el-button-group class="text-nowrap" v-if="scope.row.status === 3">
						  <el-button type="primary" size="minism" @click="handleInterviewInvitation(scope.row);">处理</el-button>
						</el-button-group>
			        	<el-button-group class="text-nowrap" v-if="scope.row.status === 4">
						  <el-button type="warning" size="minism" @click="handleInterviewInvitation(scope.row);">面试信息</el-button>
						</el-button-group>
			        	<el-button-group class="text-nowrap" v-if="scope.row.status === 2">
						  <el-button type="danger" size="minism" @click="delDeliveryResume(scope.row,scope.$index);">删除</el-button>
						</el-button-group>
			        </template>
			      </el-table-column>
			    </el-table>
			</div>
			<div class="table-responsive py-3">
				<el-pagination
				  background
				  :hide-on-single-page="true"
				  @current-change="setPageChange"
			      :current-page="search.page"
			      :page-size="15"
			      layout="total,  prev, pager, next, jumper"
			      :total="search.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
<el-drawer
  title="我是标题"
  :visible.sync="drawerHandleInterviewInvitation"
  :with-header="false">
  	<div class="wrap h-100">
		<div class="flex px-3 py-2">
			<div class="flex-1 block-title-before py-2">面试邀请信息</div>
			<div class="py-2">
	        	<el-tag
				    v-for="item in jobs_delivery"
				    :key="item.title"
				    :type="item.type"
				    v-if="item.value == handleInterviewInvitationData.status"
				    effect="plain"
				    :disable-transitions="true"
				    size="mini">
				    {{ item.title }}
				</el-tag>
			</div>
		</div>
  		<div class="flex1 p-3 overflow-auto">
		  	<table v-if="handleInterviewInvitationData.id" class="table table-bordered">
			  	<tr>
			  		<td width="120" class="text-secondary text-right">职位名称：</td>
			  		<td>{{handleInterviewInvitationData.title}}</td>
			  	</tr>
			  	<tr>
			  		<td width="120" class="text-secondary text-right">公司名称：</td>
			  		<td>{{handleInterviewInvitationData.company_name}}</td>
			  	</tr>
			  	<tr>
			  		<td class="text-secondary text-right">面试联系人：</td>
			  		<td>{{handleInterviewInvitationData.InviteAninterview.contacts}}</td>
			  	</tr>
			  	<tr>
			  		<td class="text-secondary text-right">联系人手机：</td>
			  		<td>{{handleInterviewInvitationData.InviteAninterview.contacts_mobile}}</td>
			  	</tr>
			  	<tr v-if="handleInterviewInvitationData.InviteAninterview.contacts_tel">
			  		<td class="text-secondary text-right">联系人座机：</td>
			  		<td>{{handleInterviewInvitationData.InviteAninterview.contacts_tel}}</td>
			  	</tr>
			  	<tr v-if="handleInterviewInvitationData.InviteAninterview.contacts_email">
			  		<td class="text-secondary text-right">联系人邮箱：</td>
			  		<td>{{handleInterviewInvitationData.InviteAninterview.contacts_email}}</td>
			  	</tr>
			  	<tr>
			  		<td class="text-secondary text-right">面试地址：</td>
			  		<td>{{handleInterviewInvitationData.InviteAninterview.address}}</td>
			  	</tr>
			  	<tr>
			  		<td class="text-secondary text-right">面试时间：</td>
			  		<td>
			  			<span class="pr-3">
			  				{{handleInterviewInvitationData.InviteAninterview.interview_date}}
			  			</span>
			  			<span>
			  				{{handleInterviewInvitationData.InviteAninterview.interview_start_time}}
			  				~
			  				{{handleInterviewInvitationData.InviteAninterview.interview_end_time}}
			  			</span>
			  		</td>
			  	</tr>
			  	<tr>
			  		<td class="text-secondary text-right">备注：</td>
			  		<td>{{handleInterviewInvitationData.InviteAninterview.remarks}}</td>
			  	</tr>
		  	</table>
	  	</div>
		<div v-if="handleInterviewInvitationData.status==3" class="p-3">
		  <el-button type="danger" @click="refuseInterviewInvitation">{{ handleInterviewInvitationForm.ajax ? '提交中 ...' : '拒 绝' }}</el-button>
		  <el-button type="success" @click="acceptInterviewInvitation" :loading="handleInterviewInvitationForm.ajax">{{ handleInterviewInvitationForm.ajax ? '提交中 ...' : '接 受' }}</el-button>
		</div>
  	</div>
</el-drawer>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var jobs_delivery={xycms:statusalias name="jobs/delivery" serialize="json"/};
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			jobs_delivery:jobs_delivery,
			activeName:'interview_invitation',
			drawerHandleInterviewInvitation:false,
			handleInterviewInvitationData:{},
			handleInterviewInvitationForm:{
				ajax:false,
			},
			search:{
				status:'interview_invitation',
		    	ajax:false,
				total:0,
				page: 1
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		    activeName(val,oldVal){
		    	this.search.status=val;
				this.search.page=1;
				this.initHtml();
		    },
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
		methods:XYBase.methods({
			toggleSelection(rows) {
				if (rows) {
				  rows.forEach(row => {
				    this.$refs.multipleTable.toggleRowSelection(row);
				  });
				} else {
				  this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			filterHandler(value, row, column){
				console.log(value);
		        const property = column['property'];
		        return row[property] === value;
			},
			setPageChange(val){
				this.search.page=val;
				this.initHtml();
			},
			handleInterviewInvitation(row){
				this.handleInterviewInvitationData=row;
				this.drawerHandleInterviewInvitation=true;
			},
			acceptInterviewInvitation(){
				var _this=this;
				_this.handleInterviewInvitationForm.ajax=true;
				_this.sendGet({
					url:'/user/interview/handleInterviewInvitation/accept/'+_this.handleInterviewInvitationData.id,
				},function(ret){
					_this.handleInterviewInvitationForm.ajax=false;
					if (ret) {
						if (ret.code === 0) {
							_this.drawerHandleInterviewInvitation=false;
							_this.handleInterviewInvitationData.status=4
						}else{XYBase.msg(ret.msg);}
					}
				});
			},
			refuseInterviewInvitation(){
				var _this=this;
				_this.handleInterviewInvitationForm.ajax=true;
				_this.sendGet({
					url:'/user/interview/handleInterviewInvitation/refuse/'+_this.handleInterviewInvitationData.id,
				},function(ret){
					_this.handleInterviewInvitationForm.ajax=false;
					if (ret) {
						if (ret.code === 0) {
							_this.drawerHandleInterviewInvitation=false;
							_this.handleInterviewInvitationData.status=2
						}else{XYBase.msg(ret.msg);}
					}
				});
			},
			initHtml(){
				var _this=this;
				_this.search.ajax=true;
				_this.sendGet({
					url:'',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.tableData=[];
						_this.search.total=ret.data.total;
						if (ret.code === 0) {
							_this.tableData=ret.data.data;
						}else XYBase.msg(ret.msg);
					}
				});
			}
		})
	});
</script>
{/block}