<template>
	<div>
		<div class="search-term">
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
				
				<el-form-item label="时间段" prop="daterange">
					<el-date-picker
						v-model="searchInfo.dateRange"
						type="daterange"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
						style="line-height: 50px; margin: 5px;"
						clearable
						placeholder="结束时间" />
				</el-form-item>
				
				
				
				<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="phone">
					<el-input placeholder="请输入手机号码" v-model="searchInfo.phone" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>
				
				<el-form-item label="课程名" prop="courseName">
					<el-input placeholder="请输入课程名" v-model="searchInfo.courseName" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>
				
				
				<el-form-item  label="已导" prop="unExport">
				  <el-switch :active-value="1" :inactive-value="0"  v-model="searchInfo.unExport"></el-switch>
				</el-form-item>
				
				<el-form-item  label="全部" prop="exportAll">
				  <el-switch :active-value="1" :inactive-value="0"  v-model="searchInfo.exportAll"></el-switch>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" size="small" @click="download">
						导出excel
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		

		<el-table
		   ref="table"
		   height="550"
		   v-loading="tableLoading"
		   :data="tableData.slice( (page-1)*size, page*size)"
		   :highlight-current-row="true"
		   border
		 >
			<el-table-column  align="center" min-width="50">
			   <template slot="header" slot-scope="scope">
				  <el-checkbox
					class="returnCheck"
					:indeterminate="tableIsIndeterminate"
					:scope="scope"
					v-model="checkAll"
					@change="handleChange"
				  >全选</el-checkbox>
				</template>
				
				<template slot-scope="{row}">
				  <el-checkbox
					v-model="row.isCheck"
					@change="tableCheckboxChange(row)"
				  ></el-checkbox>
				</template>
			 </el-table-column>
			
			<el-table-column label="姓名" prop="nickname" width="70"> </el-table-column>
			<el-table-column label="手机号码" prop="phone" min-width="80"> </el-table-column>
			<el-table-column label="身份证" prop="cardId" min-width="110"> </el-table-column>
			
			<el-table-column label="课程" prop="courseName" min-width="80"> </el-table-column>
			<el-table-column label="分数" prop="score" min-width="60"> </el-table-column>
			
			<el-table-column label="企业" prop="company" min-width="90"> </el-table-column>
			<el-table-column label="编号" prop="rzCode" min-width="90"> </el-table-column>
			
			<el-table-column label="完成时间" prop="endDate" min-width="70">
				<template slot-scope="{ row }">
					<span> {{row.endDate}}</span>
				</template>
			</el-table-column>
			<el-table-column label="导出" prop="endDate" min-width="50">
				<template slot-scope="{ row }">
					<span style="color: green;" v-if="row.exportTime>0">已导</span>
					<span style="color: red;" v-else> 未导</span>
				</template>
			</el-table-column>
		
		</el-table>
		<el-pagination 
		:current-page="page" 
		:page-size="size" 
		:page-sizes="[10, 20, 30, 50, 100, 1000]" 
		:style="{ float: 'right', padding: '20px' }"
		 :total="tableData.length" 
		 @current-change="handleCurrentChange"
		  @size-change="handleSizeChange" 
		  layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<vue-element-loading :active="downloadLoading" spinner="bar-fade-scale" color="#FF6700" />
	</div>
</template>

<script>
	import {
		getUserFinishList,
		postData,
		finishDownload
	} from "@/api/study.js";
	import {
		toDatetime,
		toDate,getDate
	} from "@/utils/date";
	import infoList from "@/mixins/infoList";
	import VueElementLoading from 'vue-element-loading'
	import {
		time2str,
		str2time
	} from "@/utils/index.js";

	export default {
		name: "Api",
		data() {
			return {
				listApi: getUserFinishList,
				tableIsIndeterminate: false,
				tableLoading:false,
				downloadLoading:false,
				checkAll: false,
				page: 1,
				total: 0,
				size: 10,
				oldsize:10,
				selectIds:{},
				searchInfo:{
					"dateRange":[getDate(-7),getDate(-1)],
					"phone":'',
					"cardId":"",
					"unExport":0,
					"exportAll":0,
					"courseName":'',
					"nickname":""
				},
				tableData: [],
				allData:[],
				selectList:[]
			};
		},
		watch: {
			"searchInfo.phone"(val) {
				this.page = 1;
				this.filterTableData()
			},
			"searchInfo.courseName"(val) {
				this.page = 1;
				this.filterTableData()
			},
			"searchInfo.cardId"(val) {
				this.page = 1;
				this.filterTableData()
			},
			"searchInfo.exportAll"( val ){
				this.page = 1
				if( val ) {
					this.oldsize = this.size;
					this.size = this.allData.length
				}else{
					this.size = this.oldsize;
				}
			},
			"searchInfo.nickname"(val) {
				this.page = 1;
				this.filterTableData();
			},
			"searchInfo.dateRange"(val) {
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.unExport"(val) {
				this.page = 1;
				this.filterTableData();
			}
		},
		components: {
			VueElementLoading
		},
		mixins: [infoList],
		methods: {
			handleChange(val) {
			  let that = this
			  if (val) {				  
				this.tableData.forEach(item => {
				  item.isCheck = true;
				  that.selectIds[item.id] = true
				});
				this.tableIsIndeterminate = false;
			  } else {
				this.tableData.forEach(item => {
				  item.isCheck = false;
				  delete that.selectIds[item.id] 
				});
				this.tableIsIndeterminate = false;
			  }
			  this.$forceUpdate()
			},
			tableCheckboxChange( e ) {
				let that = this
				let isAllTrue = that.tableData.every(
				  item => item.isCheck === true
				)
				
				let isAllFalse = that.tableData.every(
				  item => item.isCheck === false
				)
			
				if (isAllTrue) {
				  this.tableIsIndeterminate = false;
				  this.checkAll = true;
				} else if (isAllFalse) {
				  this.tableIsIndeterminate = false;
				  this.checkAll = false;
				} else {
				  this.checkAll = false;
				  this.tableIsIndeterminate = true;
				}
				if( e.isCheck ){
				  this.selectIds[e.id] = true
				 }else{
				  delete this.selectIds[e.id]
				}
				this.$forceUpdate()
			  
			},
			handleSizeChange(val) {
				console.log("size", val)
			    this.size = val
			},
			handleCurrentChange(val) {
			    this.page = val
			},
			finishDownload(){
				let ids = [];
				for( let i in this.selectIds){
					ids.push( +i )
				}
				finishDownload( {ids} ).then( res=>{
					if( res.code == 200){
						this.selectIds = {};
						this.handleChange( false )
						this.$message.successMsg("导出完成，准备下载", 2)
					}
					this.downloadLoading = false
				})
			},
			filterTableData(){
				let {cardId, nickname, courseName, phone, unExport} = this.searchInfo
				let list = this.allData.filter( item =>{
					// 是否导出
					if( !!unExport  !=  item.exportTime>0 ) return false;
					if( item.cardId.indexOf( cardId) == -1 ) return false;
					if( item.courseName.indexOf( courseName) == -1 ) return false;
					if( item.nickname.indexOf( nickname) == -1 ) return false;
					if( item.phone.indexOf( phone) == -1 ) return false;
					return true;
				} )
				// 
				this.tableData = list.map(item=>{
					item.isCheck = false
					if( this.selectIds[item.id]) item.isCheck = true
					return item;
				});
			},
			getTableData() {
				let from = 0
				let size = 100000;
				let {dateRange} = this.searchInfo
			    let param = { size, from  }
				if( dateRange.length >1) param.toDate = dateRange[1]
				if( dateRange.length >0) param.fromDate = dateRange[0]
				this.listApi(param).then(  res=>{
					if (res.code == 200) {
						this.allData = res.data.list;
						this.filterTableData();
						this.tableCheckboxChange( false)
					}
				})
			},
			download() {
				this.downloadLoading = true
				let selectList = [];
				for( let i in this.allData){
					if( this.selectIds[this.allData[i].id]){
						selectList.push( this.allData[i] )
					}
				}
				if (selectList.length < 1) {
					this.$message.errorMsg("未搜到数据", 1)
					return;
				}
				// 
				let filename = this.searchInfo.dateRange[0]+'--'+this.searchInfo.dateRange[1];
				import('@/vendor/Export2Excel').then(excel => {
					const tHeader = [ '姓名', '性别', '身份证', '手机', '学历', '工作单位', '岗位名称', '学时数', '培训开始时间', '完成培训时间', '继续教育年份','证书编号', '备注'];
					const filterVal = ['nickname', 'gender', 'cardId', 'phone', 'education', 'company', 'courseName', 'xs', 'startDate',
						'endDate','nd', 'rzCode', 'marks'
					]
					const data = this.formatJson(filterVal, selectList)
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: filename,
						autoWidth: true,
						bookType: "xlsx"
					})
					this.finishDownload( )
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => {
					if (j === 'marks') {
						return `成绩${v.score} ${v.score>=60?'合格':'不合格'}`
					}
					if( j=='startDate') return '2021-05-08';
					if( j=='nd') return '2021'
					if (j == 'xs') return (v.xs / 10);
					return v[j]
				}))
			}
		},
		filters: {
			toDatetime,
			toDate
		},
		created() {
			this.getTableData();
		},
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

	.warning {
		color: #dc143c;
	}
	
	.el-checkbox.returnCheck .el-checkbox__input + .el-checkbox__label,
	.el-checkbox.returnCheck .el-checkbox__input.is-checked + .el-checkbox__label {
	  color: #909399;
	  font: 12px "Helvetica Neue";
	  font-weight: bold;
	}
	.el-loading-mask {
	  background-color: rgba(255, 255, 255, 0.1) ;
	}
</style>
