{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/company_left" left="module/user/company_left_job_fair"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl pb-4 shadow bg-white">
			<div class="flex pb-3">
				<div class="flex-1 block-title-before py-2">我的定展记录</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
			        label="招聘会">
				      <template slot-scope="scope">
						<a :href="'/job-fair/detail/'+scope.row.jid+'.html'" class="text-primary" target="_blank">{{scope.row.title}}</a>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="展位号"
			        width="100">
				      <template slot-scope="scope">
				      	{{scope.row.identifier}}{{scope.row.index}}
				      </template>
			      </el-table-column>
			      <el-table-column
			        prop="lock_time"
			        label="预定时间"
			        width="180">
			      </el-table-column>
			    </el-table>
			</div>
			<div class="col-12 text-center">
				<el-pagination
				  background
				  layout="prev, pager, next"
      			  @current-change="handleCurrentChange"
			      :page-size="search.per_page"
				  :total="search.total">
				</el-pagination>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			search:{
		    	ajax:false,
				total:0,
				per_page:0,
				page: 1
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.initGetList();
		},
		methods:XYBase.methods({
			handleCurrentChange(val){
				this.search.page=val;
				this.initGetList();
			},
			initGetList(){
				if(this.search.ajax)return;
				this.search.ajax=1;
				var _this=this;
				this.sendGet({
					url:'',
					data:this.search
				},function(ret){
					_this.search.ajax=0;
					if(ret){
						if(ret.code===0){
							_this.tableData=ret.data.data;
							_this.search.total=ret.data.total;
							_this.search.per_page=ret.data.per_page;
						}
					}
				})
			},
		})
	});
</script>
{/block}