<template>
	<div>
		<div class="search-term">
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
				<el-form-item label="姓名" prop="phone">
					<el-input placeholder="请输入姓名" v-model="searchInfo.nickname" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>

				<el-form-item label="身份证" prop="cardId">
					<el-input placeholder="请输入身份证" v-model="searchInfo.cardId" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>
				
				<el-form-item label="岗位" prop="courseName">
					<DropSearch type="course" attr="name" @select="okCourse" :param="{group:'新培'}"></DropSearch>
				</el-form-item>
				
				<el-form-item label="分期" prop="planName">
					<DropSearch type="trainPlan" attr="name" @select="okTrainPlan"></DropSearch>				
				</el-form-item>
				
				<el-form-item  prop="planName">
					<el-button  type="primary" @click="exportUser">导出excel</el-button>	
				</el-form-item>
			</el-form>
		</div>
		

		<el-table :data="tableData" border stripe>
			<el-table-column label="姓名" prop="nickname"> </el-table-column>
			<el-table-column label="性别" prop="gender"> </el-table-column>
			<el-table-column label="身份证" prop="cardId"> </el-table-column>
			<el-table-column label="手机号码" prop="phone" > </el-table-column>
			<el-table-column label="学历" prop="education" > </el-table-column>
			<el-table-column label="所在企业" prop="company" min-width="120" > </el-table-column>
			<el-table-column label="报考岗位" prop="courseName" > </el-table-column>
			
			<el-table-column label="培训开始时间" prop="startDate" > </el-table-column>
			<el-table-column label="培训结束时间" prop="endDate" > </el-table-column>
			
			
			
			<el-table-column label="学时" prop="xs" >
				<template v-slot="{row}">
					<span> {{row.getXs/10}} / {{row.totalXs/10}}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="分期" prop="planName" > </el-table-column>
		</el-table>
		<el-pagination :current-page="page" :page-size="size" :page-sizes="[10, 30, 50, 100]" :style="{ float: 'right', padding: '20px' }"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

		
	</div>
</template>

<script>
	import {getUserApplyConfirmList} from "@/api/xinpei.js";
	import DropSearch from "@/components/select/DropSearch.vue";
	import infoList from "@/mixins/infoList";

	export default {
		name: "Api",
		components:{DropSearch},
		data() {
			return {
				listApi: getUserApplyConfirmList,
				tableData: [],
				searchInfo:{
					"confirm":1,
					"status":2,
					"planId":0,
					"courseId":0
				},
			};
		},
		watch: {
			searchInfo:{
				handler(new_value,old_value){
					this.page = 1;
					  this.getTableData();
			    },
				deep: true,
			}
		},
		mixins: [infoList],
		methods: {
			confirmUser(row){
				this.$router.push({ name: "xinpei_student_info", query: { userId: row.userId } });
			},
			okTrainPlan(item){
				this.searchInfo.planId = item.plan_id
			},
			okCourse(item){
				this.searchInfo.courseId = item.id
			},
			doexportUser( list ){
				list = list.sort( (i,j)=> {
					return 0+i.seat > 0+j.seat?1:-1;
				})
				import('@/vendor/Export2Excel').then(excel => {
					const tHeader = ['姓名', '性别', '身份证', '手机', '学历','工作单位', '岗位', '开始培训时间','培训结束时间', '学时', '分期'];
					const data = list.map( item =>{
						return [ item.nickname,item.gender, item.cardId,item.phone, item.education,
							item.company, item.courseName, item.startDate, item.endDate, parseInt(item.getXs/10) +'/' +parseInt(item.totalXs/10) , item.planName
						]
					});
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: Date.now(),
						autoWidth: true,
						bookType: "xlsx"
					})
				})
				
			},
			exportUser(){
				let param = Object.assign( {}, this.searchInfo, {size:10000, from:0});
				getUserApplyConfirmList( param ).then(res => {
					if (res.code == 200) {
						this.$message.successMsg("开始生成excel", 3);
						this.doexportUser( res.data.list||[] )
						
					}
				})	
			},
		
		},
		created() {
			this.getTableData();
		},
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

	.warning {
		color: #dc143c;
	}
</style>
