{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 100px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">

	  <el-form-item label="搜索类型" prop="search_type" class="flex mb-0 pl-3">
	  	<el-select v-model="search.search_type" placeholder="请选择" class="w-100px">
		    <el-option key="company_id"label="公司ID"value="company_id"></el-option>
		    <el-option key="resume_id"label="简历ID"value="resume_id"></el-option>
		    <el-option key="company_name"label="公司名"value="company_name"></el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item :label="getSearchType()" prop="key" class="flex mb-0 pl-3">
	    <el-input v-model="search.key" placeholder="请输入你想搜索的关键词"></el-input>
	  </el-form-item>

	  <el-form-item class="flex mb-0 pl-3">
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
	      <el-table-column
	        label="简历"
	        width="240">
		      <template slot-scope="scope">
		      	<el-link :href="'{:config('web.url')}/resume/'+scope.row.resume_id+'.html'" target="_blank" :underline="false">{{scope.row.name}}</el-link>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="企业"
	        width="240">
		      <template slot-scope="scope">
		      	<el-link :href="'{:config('web.url')}/company/'+scope.row.company_id+'.html'" target="_blank" :underline="false">{{scope.row.company_name}}</el-link>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="基本信息">
	        <template slot-scope="scope">
	        	{{XYBase.Date.getMStoYear(scope.row.age*1000)}}
	        	<span class="px-1">·</span>
				<span v-if="scope.row.sex==1">男</span>
				<span v-else-if="scope.row.sex==2">女</span>
				<span v-else="scope.row.sex">未设置</span>
	        	<span class="px-1">·</span>
	        	{{scope.row.educational_background}}
	        	<span class="px-1">·</span>
	        	{{XYBase.Date.getMStoYear(scope.row.work_experience_time*1000)}}年经验
	        </template>
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="120">
	        <template slot-scope="scope">
	        	<el-tag
				    v-if="scope.row.status===0"
        			type="info"
				    effect="plain"
				    :disable-transitions="true"
				    size="mini">
				    待支付
				</el-tag>
	        	<el-tag
				    v-else-if="scope.row.status===1"
        			type="success"
				    effect="plain"
				    :disable-transitions="true"
				    size="mini">
				    可下载
				</el-tag>
	        </template>
	      </el-table-column>
	      <el-table-column
	        prop="create_time"
	        label="时间"
	        width="180">
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3 text-center">
		<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">
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			drawerHandleInterviewInvitation:false,
			handleInterviewInvitationData:{},
			search:{
				search_type:'company_id',
				key:'',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	getSearchType(){
	    		var text='公司ID';
	    		switch(this.search.search_type){
	    			case 'company_id':
	    				text='公司ID';
	    				break;
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'company_name':
	    				text='公司名';
	    				break;
	    		}
	    		return text;
	    	},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleInterviewInvitation(row){
				this.handleInterviewInvitationData=row;
				this.drawerHandleInterviewInvitation=true;
			},
			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}