<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" class="user-form-item" clearable></el-input>
				</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>
					<el-button type="primary" size="small" @click="onSubmit">
						查询
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		

		<el-table :data="tableData" border stripe>
			<el-table-column label="流水号" prop="applyId"> </el-table-column>
			<el-table-column label="姓名" prop="nickname"> </el-table-column>
			<el-table-column label="身份证" prop="cardId" min-width="140"> </el-table-column>
			<el-table-column label="手机号码" prop="phone" min-width="100"> </el-table-column>
			<el-table-column label="报考专业" prop="groupName" min-width="100"> </el-table-column>
			<el-table-column label="学习中心" prop="organ" min-width="110"> </el-table-column>
			<el-table-column label="报考状态" prop="confirm" min-width="100">
				<template  slot-scope="{ row }">
					<el-button v-if="row.status==1" type="text">学习中</el-button>
					<el-button v-else-if="row.confirm==1" type="text">缴费中</el-button>
					<el-button v-else-if="row.education=='同等教育'" type="text">考试中</el-button>
					<el-button v-else type="text">审核中</el-button>
				</template>
			</el-table-column>
			
			
			<el-table-column align="center" width="200px" label="操作" class-name="small-padding fixed-width">
				<template slot-scope="{ row, $index }">
					<el-button  type="primary" size="small" @click="resetPassRow(row, $index)">重置密码</el-button>
					<el-button  type="success" size="small" @click="gotoDetail(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: 'right', padding: '20px' }"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

		<el-dialog title="重置密码" center :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" label-width="120px" ref="elForm">
				<el-form-item label="输入密码" prop="password">
					<el-input v-model="form.password" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>

				<el-form-item label="确认密码" prop="repassword">
					<el-input v-model="form.repassword" type="text" class="user-form-item" clearable></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button @click="doResetpassword" type="primary">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		getUserList,
		postData
	} from "@/api/study.js";
	import {
		toDatetime,
		toDate
	} from "@/utils/date";
	import infoList from "@/mixins/infoList";
	import {
		time2str,
		str2time
	} from "@/utils/index.js";
	import DropSearch from "@/components/select/DropSearch.vue";
	import ShowImg from "@/components/customPic/showImg.vue";

	export default {
		name: "Api",
		data() {
			return {
				listApi: getUserList,
				addUserDialog: false,
				dialogFormVisible: false,
				dialogCertList: false,
				certData:[],
				dialogTitle: "新增广告",
				boolVal: [0, 1],
				form: {
					groupId: 0,
					repassword: '',
					password: '',
					phones: "",
				},
				page: 1,
				total: 10,
				pageSize: 10,
				tableData: [],
				rules: {
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}],
					repassword: [{
						required: true,
						validator: this.validatePass,
						trigger: "blur"
					}, ],
				},
			};
		},
		watch: {
			searchInfo:{
				handler(new_value,old_value){
					this.onSubmit()
			    },
				deep: true,
			}
		},
		components: {
			DropSearch,
			ShowImg
		},
		mixins: [infoList],
		methods: {
			validatePass(rule, value, callback) {
				if (value == this.form.password) {
					callback();
				} else {
					callback(new Error("两次密码不服"));
				}
			},
			onSubmit(){
				this.page = 1
				this.getTableData()
			},
			gotoDetail( row ) {
				this.$router.push({ name: "study_user_confirm", query: { applyId: row.applyId } });
			},
			doResetpassword() {
				let {
					uid,
					password
				} = this.form;
				let param = {
					uid: +uid,
					password: this.$md5(password)
				};
				this.$refs["elForm"].validate((valid) => {
					if (!valid) return false;
					postData("ResetUserPass", param).then((res) => {
						if (res.code == 200) {
							this.$message.successMsg("密码重置成功", 1);
							this.dialogFormVisible = false;
						}
					});
				});
			},
			cancelEdit(row, index) {
				row = Object.assign(row, row.temp);
				row.edit = false;
				delete row["temp"];
			},
			initEdit(row, index) {
				let form = Object.assign({}, row);
				row.edit = true;
				row.temp = form;
			},
			confirmEdit(row) {
				let param = Object.assign({}, row);
				postData("UpdateUserInfo", param).then((res) => {
					if (res.code == 200) {
						Object.assign(row, param);
						row.edit = false;
						delete row["temp"];
						this.$message.successMsg("编辑成功", 1);
					}
				});
			},
			resetPassRow(row, index) {
				this.form.uid = row.uid;
				this.form.password = "";
				this.form.repassword = "";
				this.dialogFormVisible = true;
			},
		},
		filters: {
			toDatetime,
			toDate
		},
		created() {
			this.getTableData();
		},
	};
</script>
<style scoped lang="scss">
	.el-tag--mini {
		margin-left: 5px;
	}

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