{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-width="120px" :label-position="labelPosition" size="mini">

	  <el-form-item label="标题" prop="title">
	    <el-input v-model="search.title" class="col-12 col-sm-2 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item label="状态" prop="status">
	    <el-radio-group v-model="search.status">
	      <el-radio :label="'all'">全部</el-radio>
	      <el-radio :label="0">未开始</el-radio>
	      <el-radio :label="1">报名中</el-radio>
	      <el-radio :label="2">已开启</el-radio>
	      <el-radio :label="3">已结束</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
	<div class="table-responsive">
		<el-table
	      	:data="tableData"
    		stripe
    		v-loading="search.ajax"
    		style="width: 100%;">
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="60">
	      </el-table-column>
	      <el-table-column
	        label="标题">
		      <template slot-scope="scope">
		      	<el-link :href="'{:config('web.url')}/job-fair/detail/'+scope.row.id+'.html'" target="_blank"
		      	:underline="false"
		      	title="在前台打开">{{scope.row.title}}</el-link>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="company_sum"
	        label="企业参会"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="jobs_sum"
	        label="职位数"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="view_sum"
	        label="浏览量"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="view_people_sum"
	        label="浏览人数"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="resume_sum"
	        label="人才报名"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="封面"
	        width="80">
		      <template slot-scope="scope">
				  <el-image
				  	v-if="scope.row.thumb" 
				    style="max-width: 80px; height: 23px"
				    :src="scope.row.thumb" 
				    :preview-src-list="[scope.row.thumb]">
				  </el-image>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="横幅"
	        width="80">
		      <template slot-scope="scope">
				  <el-image
				  	v-if="scope.row.banner" 
				    style="max-width: 80px; height: 23px"
				    :src="scope.row.banner" 
				    :preview-src-list="[scope.row.banner]">
				  </el-image>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		  		<el-popover
					placement="bottom-end"
					trigger="click">
					<div>
			      		<el-button type="info" size="minism" 
			      		@click="setJobFairStatus(scope.row,0);">未开始</el-button>
			      		<el-button type="primary" size="minism"
			      		@click="setJobFairStatus(scope.row,0);">报名中</el-button>
			      		<el-button type="success" size="minism"
			      		@click="setJobFairStatus(scope.row,0);">已开启</el-button>
			      		<el-button type="danger" size="minism"
			      		@click="setJobFairStatus(scope.row,0);">已结束</el-button>
					</div>
					<div slot="reference">
				      	<transition>
				      		<el-button type="info" size="minism" 
				      		v-if="scope.row.status==0">未开始</el-button>
				      		<el-button type="primary" size="minism"
				      		v-else-if="scope.row.status==1">报名中</el-button>
				      		<el-button type="success" size="minism"
				      		v-else-if="scope.row.status==2">已开启</el-button>
				      		<el-button type="danger" size="minism"
				      		v-else-if="scope.row.status==3">已结束</el-button>
						</transition>
					</div>
				</el-popover>
		      </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.sign_up_start_time }}</p>
		          <p>报名结束: {{ scope.row.sign_up_end_time }}</p>
		          <p>开始时间: {{ scope.row.start_time }}</p>
		          <p>结束时间: {{ scope.row.end_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-column
	        label="/"
	        width="180">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            size="minism"
		            @click="window.open('/job-fair/edit/'+scope.row.id)">
		            编辑
		        </el-button>
		        <el-button
		            type="success"
		            size="minism"
		            @click="window.open('/job-fair/boothManage?jid='+scope.row.id)">
		            展位
		        </el-button>
		        <el-button
		            type="success"
		            size="minism"
		            @click="window.open('/job-fair/resumeManage?jid='+scope.row.id)">
		            人才
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			search:{
				title:'',
				status:'all',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	setJobFairStatus(data,status){
	    		$.getJSON('/job-fair/setStatus/'+data.id+'/'+status,function(ret){
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_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) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}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}