<template>
	<el-container>
		<el-header class="serveTitle">个人信息</el-header>
		<el-main class="serveMain">
			<el-form ref="form" :model="form" :rules="rules">
				<el-form-item label="上传头像" prop="avatar" label-position="top">
					<ossImgUpload @parentParams="parentParams" :url="form.avatar" />
					<div class="el-form-item-msg">请将图片拖到此处，或点击上传PNG、JPEG</div>
				</el-form-item>
				<el-form-item label="账户名称" prop="name" label-position="top">
					<el-input v-model="form.name" :size="size" class="formInput" type="text" placeholder="请输入账户名称"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="mobile" label-position="top">
					<el-input v-model="form.mobile" :size="size" class="formInput" type="text" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				<el-form-item label="验证码" prop="verify_code" label-position="top">
					<div class="login-msg-yzm">
						<el-input v-model="form.verify_code" :size="size" clearable placeholder="请输入验证码"></el-input>
						<el-button style="margin-left:10px;" @click="getYzm" :disabled="disabled" type="primary" :size="size">获取验证码<span v-if="disabled"> ({{ time }})</span></el-button>
					</div>
				</el-form-item>
				<el-form-item label="邮箱" prop="email" label-position="top">
					<el-input v-model="form.email" :size="size" class="formInput" type="text" placeholder="请输入邮箱"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="save" :size="size" :loading="isSave">保 存</el-button>
				</el-form-item>
			</el-form>

			<div class="bindBxo">
				<div class="title" style="margin-top: 5px;">账号绑定</div>
				<div class="boxView">
					<div class="leftImg">
						<div class="leftIcon wechat" v-if="wechat.open_id=='' || wechat.avatar==''"><i class="el-icon"><sc-icon-WechartRound/></i></div>
						<div class="leftIcon" v-else>
							<el-avatar :size="38" :src="wechat.avatar" />
						</div>
						<div class="nameBox">
							<div class="titleName nameRed" v-if="wechat.open_id==''">绑定微信</div>
							<div class="titleName" v-else>{{wechat.nick_name==""?'-':wechat.nick_name}}</div>
							<div class="msg">绑定微信，用于账号登录,客服咨询及其它消息提醒。</div>
						</div>
					</div>
					<div class="rightBtn">
						<el-button type="primary" :size="size" v-if="wechat.open_id==''" @click="bindWechat">绑 定</el-button>
						<el-button type="primary" :size="size" v-else plain @click="secureDingTalk(1)">解 除</el-button>
					</div>
				</div>
				<div class="boxView">
					<div class="leftImg">
						<div class="leftIcon alipay" v-if="dingTalk.open_id=='' || dingTalk.avatar==''"><i class="el-icon"><sc-icon-DingTalk/></i></div>
						<div class="leftIcon" v-else>
							<el-avatar :size="38" :src="dingTalk.avatar" />
						</div>
						<div class="nameBox">
							<div class="titleName nameRed" v-if="dingTalk.open_id==''">绑定钉钉</div>
							<div class="titleName" v-else>{{dingTalk.nick_name==""?'-':dingTalk.nick_name}}</div>
							<div class="msg">绑定钉钉，用于账号登录。</div>
						</div>
					</div>
					<div class="rightBtn">
						<el-button type="primary" :size="size" v-if="dingTalk.open_id==''" @click="bindDingTalk">绑 定</el-button>
						<el-button type="primary" :size="size" v-else plain @click="secureDingTalk(2)">解 除</el-button>
					</div>
				</div>
			</div>
		</el-main>
	</el-container>

	<el-dialog
		v-model="showWechatLogin"
		title="微信绑定"
		:width="500"
		destroy-on-close
	>
		<div class="qrCodeLogin">
			<div class="code_container">
				<object :data="WechatLoginCode" width="430" height="430" type="text/html"></object>
			</div>
			<p class="error" v-if="bind_wechat_error!=''">{{bind_wechat_error}}，请先解绑原账号绑定</p>
			<p class="msg">
				请使用微信扫一扫绑定
			</p>
			<div class="qrCodeLogin-result" v-if="isWechatLoginResult">
				<el-result
					icon="success"
					title="绑定成功"
					sub-title="您可以使用微信扫码登录了"
				></el-result>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: "editAccount",
	data(){
		return{
			size:"small",
			isSave:false,
			disabled:false,
			time:60,
			form:{
				avatar:"",
				mobile:"",
				verify_code:"",
				email:"",
			},
			rules:{
				mobile:[
					{required:true,message:"手机号不能为空"}
				],
				verify_code:[
					{required:true,message:"验证码不能为空"}
				],
				email:[
					{required:true,message:"邮箱不能为空"}
				]
			},

			wechat:{
				avatar:'',
				nick_name:'',
				open_id:''
			},
			dingTalk:{
				avatar:'',
				nick_name:'',
				open_id:'',
			},
			WechatLoginCode:'',
			showWechatLogin:false,
			isWechatLoginResult: false,
			bind_wechat_error:'',
		}
	},
	created() {
		// 监听缓存变化 addEventListener
		window.addEventListener('storage',this.wechatStorageChange);
	},
	mounted() {
		this.getUserInfo();
		this.getInfo();
	},
	methods:{
		async bindWechat(){
			this.isWechatLoginResult = false;
			const res = await this.$API.auth.bindWechat.post();
			if(res.code == 200){
				const url = JSON.parse(JSON.stringify(res.data.qrcode));
				localStorage.setItem('bindWechat','2');
				this.WechatLoginCode = url;
				this.showWechatLogin = true;
			}
		},
		async bindDingTalk(){
			const res = await this.$API.auth.bindDingTalk.post();
			if(res.code == 200){
				const url = JSON.parse(JSON.stringify(res.data.redirect));
				localStorage.setItem('bindDingTalk','2');
				window.open(url);
			}
		},
		wechatStorageChange(e){
			let dingTalk = localStorage.getItem('bindDingTalk');
			let wechat = localStorage.getItem('bindWechat');
			if(e.key == 'DINGTALK_LOGIN_MESSAGE'){
				if(dingTalk == 2 && typeof e.newValue =="string" && e.newValue!=''){
					this.dingTalkBind(e.newValue)
				}
				localStorage.removeItem("DINGTALK_LOGIN_MESSAGE");
			}

			if(e.key == 'WECHAT_LOGIN_MESSAGE'){
				if(wechat == 2 && typeof e.newValue =="string" && e.newValue!=''){
					this.wechatBind(e.newValue);
				}
				localStorage.removeItem("WECHAT_LOGIN_MESSAGE");
			}
		},
		async secureDingTalk(num){
			let params = {app_type:num}
			const res = await this.$API.auth.unbindUser.post(params);
			if(res.code == 200){
				await this.getUserInfo();
			}
		},
		async getUserInfo(){
			const res = await this.$API.user.getInfo.post();
			if(res.code == 200){
				this.wechat={
					avatar:'',
					nick_name:'',
					open_id:''
				}
				this.dingTalk={
					avatar:'',
					nick_name:'',
					open_id:''
				}
				if(res.data && res.data.length){
					res.data.forEach(em=>{
						if(em.app_type == 1){
							this.wechat = em;
						}
						if(em.app_type ==2){
							this.dingTalk = em;
						}
					})
				}
			}
		},

		// 图片上传成功回调
		async parentParams(files) {
			let params = {
				avatar:files
			}
			const res = await this.$API.user.uploadAvatar.post(params);
			if (res.code == 200) {
				this.$store.commit("SET_LOGIN_AVATAR", files);
			}
		},
		async getYzm() {
			const validate = await this.$refs.form.validateField("mobile").catch(() => {});
			if (!validate) {
				return false
			}
			const res = await this.$API.user.verifyCode.post({mobile: this.form.mobile});
			if (res.code === 200) {
				this.$message.success('短信已发送至手机号码');
				this.disabled = true
				this.time = 60
				const t = setInterval(() => {
					this.time -= 1
					if (this.time < 1) {
						clearInterval(t)
						this.disabled = false
						this.time = 0
					}
				}, 1000);
			}
		},
		save(){
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					const res = await this.$API.user.editUser.post(this.form)
					if (res.code === 200) {
						this.$message.success("操作成功");
						await this.getInfo();
					}
				} else {
					return false
				}
			})
		},
		async getInfo() {
			const res = await this.$API.user.getInformation.post();
			if(res.code == 200){
				const userInfo = JSON.parse(JSON.stringify(this.$TOOL.data.get('USER_INFO')));
				// this.form.user = userInfo.login_name;

				this.$store.commit("SET_LOGIN_AVATAR", res.data.avatar);
				this.$store.commit("SET_LOGIN_NAME", res.data.name);

				Object.assign(this.form,res.data);
				Object.assign(userInfo,res.data);

				this.$TOOL.data.set('USER_INFO',userInfo);
			}
		},
	}
}
</script>

<style scoped lang="scss">
.serveMain{
	::v-deep .formInput{
		width: 300px;
	}
}
.login-msg-yzm{
	width: 300px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bindBxo{
	padding: 10px 0;
	.title{
		font-size: 14px;
		font-weight: 500;
		margin: 25px 0 10px 0;
	}
}
.boxView{
	width: 460px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-top: 10px;
	margin-left: 5px;
	.leftImg{
		display: flex;
		align-items: center;
		.leftIcon{
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-items: center;
			margin-right: 10px;
			.el-icon{
				font-size: 34px;
			}
		}
		.titleName{
			margin-bottom: 5px;
			font-size: var(--el-font-size-base);
		}
		.nameRed{
			color: var(--el-color-danger);
		}
		.msg{
			font-size: var(--el-font-size-extra-small);
			color: #837e7e;
		}
	}
}
</style>
