<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.phone" type="text" style="width: 160px;"  clearable></el-input>
				</el-form-item>

				<el-form-item label="姓名" prop="phone">
					<el-input placeholder="请输入姓名" v-model="searchInfo.nickname" type="text" style="width: 160px;" clearable></el-input>
				</el-form-item>

				<el-form-item label="身份证" prop="cardId">
					<el-input placeholder="请输入身份证" v-model="searchInfo.cardId" type="text" style="width: 200px;"  clearable></el-input>
				</el-form-item>
				
				<el-form-item label="时间点" prop="cardId">
					<el-date-picker v-model="searchInfo.certificateAt" placeholder="选择日期时间"
					  style="width: 160px;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
					  type="date" ></el-date-picker>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" size="small" @click="onsubmit">
						搜索
					</el-button>
				</el-form-item>
				
			</el-form>
		</div>



		<el-table :data="tableData">
			<el-table-column label="姓名" prop="nickname" width="100" align="center"> </el-table-column>
			<el-table-column label="身份证" prop="cardId" width="180" align="center"> </el-table-column>
			<el-table-column label="手机号" prop="phone" width="120" align="center"> </el-table-column>
			<el-table-column label="考试科目" prop="courseName" width="140" align="center"> </el-table-column>
			<el-table-column label="分数" prop="score" width="80" align="center"> </el-table-column>
			<el-table-column label="学习完成" prop="isPass" width="80" align="center">
				<template slot-scope="{ row }">
					<span>{{ row.getXs>= row.totalXs?'是':'否' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="打印时间" width="200" align="center">
				<template slot-scope="{ row }">
					<el-date-picker v-if="row.edit" v-model="row.certificateAt" placeholder="选择日期时间"  
					  style="width: 160px;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
					  type="date" ></el-date-picker>
					<span v-else>{{ row.certificateAt|toDate }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="260" align="center">
				<template slot-scope="{ row }">
					<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check" @click="confirmEdit(row)">提交</el-button>
					<el-button v-if="row.edit" type="danger" size="small" icon="el-icon-circle-check" @click="applyAll(row)">应用所有</el-button>
					<el-button v-if="row.edit" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">取消</el-button>
					<el-button v-if="!row.edit" type="primary" size="small" @click="initEdit(row)">编辑</el-button>
					<el-button v-if="!row.edit" type="success" size="small" @click="download(row)">下载</el-button>
				</template>
			</el-table-column>

		</el-table>

		<el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :style="{ float: 'center', padding: '20px' }"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

	</div>
</template>

<script>
	import {
		getCertificateList,
		postData
	} from "@/api/study.js";
	import {
		toDatetime,
		toDate
	} from "@/utils/date";
	import infoList from "@/mixins/infoList";

	export default {
		name: "Api",
		data() {
			return {
				listApi: getCertificateList,
				page: 1,
				total: 10,
				pageSize: 10,
				tableData: []
			};
		},
		watch: {
			"searchInfo.phone"(val) {
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.cardId"(val) {
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.nickname"(val) {
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.certificateAt"(val) {
				this.page = 1;
				this.getTableData();
			},
		},
		mixins: [infoList],
		methods: {
			onsubmit(){
				this.page = 1
				this.getTableData();
			},
			cancelEdit(row) {
				row = Object.assign(row, row.temp);
				row.edit = false;
				delete row["temp"];
			},
			initEdit(row) {
				let form = Object.assign({}, row);
				row.edit = true;
				row.temp = form;
			},
			applyAll( row ){
				if( !this.searchInfo.certificateAt ){
					this.$message.errorMsg("还未选择时间", 1)
					return;
				}
				let param = {certificateAt: this.searchInfo.certificateAt, toDate: row.certificateAt};
				postData("EditCertificateAll", param).then((res) => {
					if (res.code == 200) {
						this.page = 1
						this.getTableData()
					}
				});
			},
			download(row){
				window.open( row.certificateUrl, '_brank')
			},
			confirmEdit(row) {
				let param = {id:row.id, certificateAt: row.certificateAt};
				postData("EditCertificate", param).then((res) => {
					if (res.code == 200) {
						Object.assign(row, param);
						row.edit = false;
						delete row["temp"];
						this.$message.successMsg("编辑成功", 1);
					}
				});
			}
		},
		filters: {
			toDatetime,
			toDate
		},
		created() {
			this.getTableData();
		},
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

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