<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>我的资料</span>
		</div>
		<div class="pb_content_body">
			<div style="width: 500px">
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					label-width="100px"
					class="demo-ruleForm"
				>
					<el-form-item label="姓名" prop="teacherName">
						<el-input
							v-model="ruleForm.name"
							style="width: 250px"
							placeholder="请输入名字"
						></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="ruleForm.sex">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="电子邮箱" prop="mail">
						<el-input
							v-model="ruleForm.mail"
							style="width: 300px"
							placeholder="请输入电子邮箱"
						></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="phone">
						<el-input
							v-model="ruleForm.phone"
							style="width: 300px"
							placeholder="请输入手机号码"
						></el-input>
					</el-form-item>
					<el-form-item label="学校" prop="sBySchool">
						<el-input
							disabled
							v-model="ruleForm.sBySchool"
							style="width: 300px"
						></el-input>
					</el-form-item>
					<el-form-item label="个人简介" prop="intro">
						<el-input
							v-model="ruleForm.intro"
							type="textarea"
							:rows="5"
							resize="none"
							placeholder="想说点什么..."
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')"
							>修改</el-button
						>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value == "") {
					return;
				}
				var reg =
					/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				if (!reg.test(value)) {
					callback(new Error("请输入正确的邮箱"));
				} else {
					callback();
				}
			};
			var validatePass1 = (rule, value, callback) => {
				var reg = /^1\d{10}$/;
				if (!reg.test(value)) {
					callback(new Error("请输入正确的手机号码"));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					name: "",
					type: [],
					sex: "男",
					intro: "",
					mail: "",
					phone: "",
					sBySchool: "",
				},
				userinfo:"",
				schoolJuri: [],
				rules: {
					pass: [{ validator: validatePass, trigger: "blur" }],
					name: [{ required: true, message: "请输入你的名字", trigger: "blur" }],
					mail: [
						{
							validator: validatePass,
							trigger: "blur",
						},
					],
					phone: [
						{ required: true, message: "请输入你的手机号码", trigger: "blur" },

						{
							validator: validatePass1,
							trigger: "blur",
						},
					],
				},
			};
		},
		methods: {
			getSchool() {
				this.isLoading = true;
				let params = {
					page: this.page,
				};
				this.ajax
					.get(this.$store.state.api + "selectOrg", params)
					.then((res) => {
						this.isLoading = false;
						this.schoolJuri = res.data[0];
					})
					.catch((err) => {
						this.isLoading = false;
						console.error(err);
					});
			},
			submitForm(formName) {
				this.$refs[formName];
				let params = [
					{
						uid: this.$store.state.userInfo.userid,
						sname: this.ruleForm.name,
						ph: this.ruleForm.phone,
						sex: this.ruleForm.sex == "男" ? "0" : "1",
						email: this.ruleForm.mail,
						js: this.ruleForm.intro,
					},
				];
				this.ajax
					.post(this.$store.state.api + "updateUser", params)
					.then((res) => {
						this.$message({
							message: "修改成功",
							type: "success",
						});
						this.getUser();
					})
					.catch((err) => {
						this.$message.error("修改失败");
						console.error(err);
					});
			},
			getUser() {
				let params = { uid: this.$store.state.userInfo.userid };
				this.ajax
					.get(this.$store.state.api + "getUser", params)
					.then((res) => {
						this.userinfo = res.data[0][0];
						// this.$cookies.set("userInfo", this.userinfo, -1);
               			 this.$cookies.set("teacherInfo", res.data[0][0], -1);
						this.$store.commit("update", ["userInfo", this.userinfo]);
						console.log(res.data[0][0]);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			getDetail() {
				let params = { uid: this.$store.state.userInfo.userid };
				this.ajax
					.get(this.$store.state.api + "getUser", params)
					.then((res) => {
						res.data[0][0].sex = res.data[0][0].sex ? "女" : "男";
						this.ruleForm = res.data[0][0];
						console.log(res.data[0][0]);
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},
		created() {
			this.getSchool();
			this.getDetail();
		},
	};
</script>

<style scoped>
</style>
