{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="flex mb-3 border-bottom pb-3" v-for="(v,index) in tableData">
				<div class="text-center item-center">
					<img :src="v.thumb" alt="" width="80" height="80">
				</div>
				<div class="flex-1 px-3 py-2">
					<a :href="'/job-fair/detail/'+v.id+'.html'" class="h6 text-primary" target="_blank">{{v.title}}</a>
					<p class="text-secondary mb-0">举办时间：{{v.start_time}}至{{v.end_time}}</p>
					<p class="text-secondary mb-0">举办地点：{{v.job_fair_province}}{{v.job_fair_city}}{{v.job_fair_area}}{{v.address}}</p>
				</div>
				<div>
					<el-button type="danger" v-if="v.status===3" size="mini">已结束</el-button>
					<el-button type="primary" v-else-if="v.status===2" size="mini"
					@click="window.open('/job-fair/detail/'+v.id+'.html')">进行中</el-button>
					<el-button type="success" v-else-if="v.status===1" size="mini"
					@click="window.open('/job-fair/detail/'+v.id+'.html')">报名中</el-button>
					<el-button type="info" v-else size="mini">未开始</el-button>
				</div>
			</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}