<template>
	<div>
		<div class="search-term">
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
				
				
				<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="unExport">
				  <el-switch :active-value="1" :inactive-value="0"  v-model="searchInfo.qa"></el-switch>
				</el-form-item>
				
				<el-form-item class="fr p10">
				  <el-button type="primary" size="small" @click="initUser">
				    新增测试人员
				  </el-button>
				  <el-button type="primary" size="small" @click="addExamDialog=true">
				    新增在线练习
				  </el-button>
				</el-form-item>

			</el-form>
		</div>

		<el-table :data="tableData" border stripe>
			<el-table-column label="ID" prop="uid" align="center">
				<template slot-scope="{ row }">
					<span>{{row.qa==1?'【测】':''}}{{ row.uid }}</span>
				</template>
			</el-table-column>

			<el-table-column label="手机号码" prop="phone">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit && row.qa" type="text" size="small" v-model="row.phone"  />
					<span v-else>{{ row.phone }}</span>
				</template>
			</el-table-column>
			<el-table-column label="身份证" width="200" prop="cardId">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit && row.qa " type="text" size="small" v-model="row.cardId"  />
					<span v-else>{{ row.cardId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="姓名"  prop="nickname" width="100px">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit && row.qa" type="text" size="small" v-model="row.nickname" />
					<span v-else>{{ row.nickname }}</span>
				</template>
			</el-table-column>

			<el-table-column label="性别" prop="gender" width="70px">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit" type="text" size="small" v-model="row.gender" />
					<span v-else>{{ row.gender }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="测试" prop="gender" width="70px">
				<template slot-scope="{ row }">
					<el-switch v-if="row.edit" :active-value="1" :inactive-value="0" v-model="row.qa" />
					<span v-else>{{ row.qa==1?'是':'否' }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="学历" prop="gender">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit" type="text" size="small" v-model="row.education"  />
					<span v-else>{{ row.education }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="企业" prop="gender">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit" type="text" size="small" v-model="row.company" />
					<span v-else>{{ row.company }}</span>
				</template>
			</el-table-column>
			
			
			
			<el-table-column label="注册日期" prop="createAt">
				<template slot-scope="{ row }">
					<span>{{ row.createAt|toDate }}</span>
				</template>
			</el-table-column>


			<el-table-column align="center" label="操作" 
				width="260"
				class-name="small-padding fixed-width">
				<template slot-scope="{ row, $index }">
					<el-button v-if="!row.edit" type="danger" size="small" @click="resetPassRow(row, $index)">重置密码</el-button>
					<el-button v-if="!row.edit" type="primary" size="small" @click="addUserCourse(row, $index)">新增课程</el-button>

					<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check" @click="confirmEdit(row, $index)">提交</el-button>
					<el-button v-if="row.edit" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row, $index)">取消</el-button>
					<el-button v-if="!row.edit" type="primary" size="small" @click="initEdit(row, $index)">编辑</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>

		<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>

		<el-dialog title="新增学员" center :visible.sync="addUserDialog">
			<el-form :model="formPass"  ref="elForm" :rules="ruleadd" 
				:inline="true" style="width:400px;margin:0 auto" label-width="90px">
				<el-form-item label="账号" prop="phone">
					<el-input v-model="formPass.phone" type="text"  clearable></el-input>
				</el-form-item>

				<el-form-item label="姓名" prop="nickname">
					<el-input v-model="formPass.nickname" type="text"  clearable></el-input>
				</el-form-item>
				
				<el-form-item label="身份证" prop="cardId" >
					<el-input v-model="formPass.cardId" type="text"  clearable></el-input>
				</el-form-item>
				
				<el-form-item label="测试" prop="qa" >
					<el-switch  :active-value="1" :inactive-value="0" v-model="formPass.qa" />
				</el-form-item>


				<el-form-item label="密码" prop="password">
					<el-input v-model="formPass.password" type="text" clearable></el-input>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="addUserDialog = false">取 消</el-button>
				<el-button @click="doAddUser" type="primary">确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="新增课程" center :visible.sync="addUserCourseDialog">
			<el-form :model="form"  ref="elForm" :rules="ruleadd" 
			:inline="true" style="width:300px;margin:0 auto">
				<el-form-item label="账号" prop="phone" >
					<el-input v-model="form.phone" type="text"  clearable></el-input>
				</el-form-item>
		
				<el-form-item label="姓名" prop="nickname">
					<el-input v-model="form.nickname" type="text"  clearable></el-input>
				</el-form-item>
				
				
				<el-form-item label="分类" prop="type">
					<el-select v-model="form.type" placeholder="请选择" @focus="getTypes">
						<el-option
						  v-for="item in typeList"
						  :key="item.id"
						  :label="item.name"
						  :value="item.name"/>
					 </el-select>
				</el-form-item>
		
		
				<el-form-item label="课程" prop="password">
					<el-select v-model="form.courseId" placeholder="请选择" @focus="getCourses">
						<el-option
						  v-for="item in courseList"
						  :key="item.id"
						  :label="item.name"
						  :value="item.id"/>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="addUserDialog = false">取 消</el-button>
				<el-button @click="doAddUserCourse" type="primary">确 定</el-button>
			</div>
		</el-dialog>
		
		
		<el-dialog title="新增题库" center :visible.sync="addExamDialog"  >
		  <el-form :model="form" :rules="rules" label-width="120px" ref="elForm">
		    <el-form-item  label="选择题组" prop="title" >
		     <drop-search placeholder="请选择组" type="wxGroup" attr="title" @select="okGroupId"/>
		    </el-form-item>
			
		    <el-form-item  label="手机号码" prop="phones">
				<el-input placeholder="多个手机用空格分割" v-model="form.phones" type="textarea"  clearable></el-input>
		    </el-form-item>
		  </el-form>
		  <div class="dialog-footer" slot="footer">
		    <el-button @click="addExamDialog=false">取 消</el-button>
		    <el-button @click="doAddExam" type="primary">确 定</el-button>
		  </div>
		</el-dialog>
		
		
	</div>
</template>

<script>
	import {
		getQaUserList,
		postData
	} from "@/api/qa.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";
	import {searchApi} from '@/api/search.js'

	export default {
		name: "Api",
		data() {
			return {
				listApi: getQaUserList,
				addUserDialog: false,
				dialogFormVisible: false,
				addUserCourseDialog:false,
				addExamDialog:false,
				dialogTitle: "新增广告",
				boolVal: [0, 1],
				typeList:[],
				courseList:[],
				formPass:{
					phone: "",
					nickname:"",
					password:""
					
				},
				form: {
					groupId: 0,
					repassword: '',
					phone:"",
					nickname:"",
					password: '',
					type:'',
					cardId:'',
					courseId:0,
					phones: "",
				},
				searchInfo: {
					qa: 1,
					phone:'',
					cardId:''
				},
				page: 1,
				total: 10,
				pageSize: 10,
				tableData: [],
				rules: {
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}],
					repassword: [{
						required: true,
						validator: this.validatePass,
						trigger: "blur"
					}, ],
				},
				ruleadd:{
					type: [{required: true,message: "请输入分类",trigger: "blur"}],
					courseId: [{required: true,message: "请选择课程",trigger: "blur"}],
					nickname: [{required: true,message: "请输入名字",trigger: "blur"}],
					cardId: [
						{required: true,message: "请输入身份证",trigger: "blur"},
						{ min: 18, max: 18, message: '身份证应该18位', trigger: 'blur' },
					],
					phone: [
						{required: true,message: "请输入账户",trigger: "blur"},
						{ min: 11, max: 11, message: '手机应该11位', trigger: 'blur' },
					],
					qa: [
						{required: true,message: "是否qa",trigger: "blur"}
					],
					password: [{required: true,message: "请输入密码",trigger: "blur"}],
				}
			};
		},
		watch: {
			"searchInfo.phone"(val) {
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.cardId"(val) {
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.qa"(val){
				this.page = 1;
				this.getTableData();
			},
			"searchInfo.nickname"(val) {
				this.page = 1;
				this.getTableData();
			},
		},
		components: {
			DropSearch,
			ShowImg
		},
		mixins: [infoList],
		methods: {
			validatePass(rule, value, callback) {
				if (value == this.form.password) {
					callback();
				} else {
					callback(new Error("两次密码不服"));
				}
			},
			okGroupId( item){
				this.form.groupId = +item.group_id
			},
			doAddExam(){
				let param= { groupId: this.form.groupId}
				let phones = this.form.phones.split(/[\s \n]/)
				param.phones = phones.filter( (res)=> {return res.length == 11})
			    postData("AddWxGroupUser", param).then(data => {
			      this.$message.successMsg("新增成功", 1)
			      this.addExamDialog = false
			      this.getTableData()
			    });
			},
			getTypes(){
				searchApi( {type:"type"}).then(res=>{
				    if( res.code == 200){
				      this.typeList = res.data||[];
				    }
				})
			},
			getCourses(){
				searchApi( {type:"course", group:this.form.type}).then(res=>{
				    if( res.code == 200){
				      this.courseList = res.data||[];
				    }
				})
			},
			initUser() {
				this.formPass.phone = "";
				this.formPass.nickname = "";
				this.formPass.password = "";
				this.addUserDialog = true;
			},
			addUserCourse( row, index ){
				this.form = Object.assign( {}, row)
				this.form.temp = row;
				this.addUserCourseDialog = true
				
			},
			doAddUser() {
				let param = Object.assign({}, this.formPass);
				delete param["temp"];
				this.$refs["elForm"].validate((valid) => {
					if (!valid) return false;
					postData("AddQaUser", param).then((res) => {
						if (res.code == 200) {
							this.$message.successMsg("加入白名单成功", 1);
							this.addUserDialog = false;
							this.getTableData();
						}
					});
				});
			},
			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;
						}
					});
				});
			},
			okPhone(item) {
				this.form.groupId = +item.group_id;
			},
			selectCourse( item ){
				this.form.courseId = item.id
			},
			
			selectType( item ){
				this.form.type = item.name
				console.log( "type", item )
			},
			
			doAddUserCourse(){
				let {courseId, uid } = this.form;
				postData("AddQaCourse", {courseId, uid }).then((res) => {
					if (res.code == 200) {
						this.$message.successMsg("课程添加成功", 1);
						this.addUserCourseDialog = 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("EditQaUser", 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>
