<!-- 敏感信息授权按钮组件 -->
<template>
	<div>
		<el-button class="grant-btn" type="text" @click="grantPrivilege">敏感信息授权</el-button>
		<el-dialog append-to-body title="敏感信息短信授权" v-model:visible="dialogVisible">
			<el-form>
				<el-form-item label="手机号">
					<el-row>{{ mobile }}</el-row>
				</el-form-item>
				<el-form-item label="验证码">
					<el-col :span="11">
						<el-input type="number" style="display: inline-block" maxlength="6" placeholder="请输入验证码" v-model="form.code"></el-input>
					</el-col>
					<el-col :span="5">
						<el-button style="display: inline; margin-left: 5px" plain type="text" @click.prevent="getCode()">{{ title }}</el-button>
					</el-col>
				</el-form-item>
				<el-alert :closable="false">验证通过后将去除脱敏，有效期为30分钟，请尽快操作</el-alert>
				<el-alert type="warning" :closable="false"
					>手机号码登记后统一维护，如有修改，请联系相关部门。教职工(组织人事处) 学生(班主任) 驻校人员(后勤处)</el-alert
				>
			</el-form>

			<template v-slot:footer>
				<span class="dialog-footer" style="text-aligin: center">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="checkCode">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import request from '@/router/axios';
export default {
	name: 'sensitive',
	data() {
		return {
			dialogVisible: false,
			second: '', //倒计时
			disabled: false, //是否禁用按钮
			timer: null, //计时器
			form: {
				code: '',
			},
			mobile: '**',
		};
	},
	computed: {
		title() {
			return this.disabled ? `重新获取 ( ${this.second} ) s` : '获取验证码';
		},
	},
	methods: {
		grantPrivilege() {
			this.dialogVisible = true;
			this.form.code = '';
			this.getMobile();
		},
		getCode() {
			// console.log('点击')

			let that = this;
			let s = 60; //倒计时间
			if (!that.timer) {
				that.second = s;
				that.disabled = true;

				that.timer = setInterval(() => {
					if (that.second > 0 && this.second <= s) {
						that.second--;
					} else {
						that.disabled = false;
						clearInterval(that.timer);
						this.timer = null;
					}
				}, 1000);

				that.sendCode();
			}
		},
		getMobile() {
			request({
				url: '/admin/mobile/getMobile',
				method: 'get',
			}).then((response) => {
				console.log(response.data);
				if (response.data.data) {
					this.mobile = response.data.data;
				} else {
					this.$message.error(response.data.msg);
				}
			});
		},
		sendCode() {
			request({
				url: '/admin/mobile/codeSensitive',
				method: 'get',
			}).then((response) => {
				console.log(response.data);
				if (response.data.data) {
					this.$message.success('短信发送成功');
				} else {
					this.$message.error(response.data.msg);
				}
			});
		},
		checkCode() {
			request({
				url: '/admin/mobile/checkSensitiveCode',
				method: 'post',
				data: { code: this.form.code },
			}).then((response) => {
				console.log(response.data);
				if (response.data.data) {
					this.dialogVisible = false;
					this.$message.success('校验通过');
				} else {
					this.$message.error('校验失败');
				}
			});
		},
	},
};
</script>
<style scoped lang="scss">
.wrapper {
	display: inline-block;
}
.grant-btn {
	marigin: 0px 5px !important;
	color: #f39217;
}
</style>
