<template>
    <div id="ResetPwd">
        <!-- <span class="re-span" @click="visible = true">忘记密码?</span> -->
        <el-dialog title="重置密码" :visible.sync="visible" width="550px" :before-close="onClose">
            <el-form ref="resetForm" :label-position="labelPosition" label-width="80px" :model="resetForm" :rules="rules">
                <el-form-item label="手机号码" prop="tel" required>
                    <el-input v-model.number="resetForm.tel" class="login-input" type="tel" auto-complete="off" maxlength="11" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item class="verify" label="验证码" prop="ver">
                    <el-input v-model="resetForm.ver" class="login-input" placeholder="请输入验证码" />
                    <div v-if="!sendBtn" class="verify-d ta-c c-ff5c5c" @click="smsCode()">获取验证码</div>
                    <div v-if="sendBtn" class="verify-d ta-c c-ff5c5c">{{ sendTime }}</div>
                </el-form-item>
                <el-form-item class="pwd" label="新密码" prop="pwd">
                    <el-input v-model.number="resetForm.pwd" auto-complete="new-password" class="login-input new-pwd" show-password :type="passwordType ? 'text' : 'password'" placeholder="请输入新密码" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="handleClose('resetForm')">重置</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import User from '@/api/api_user';
import appInfo from '@/tool/appInfo';
export default {
    name: 'ResetPwd',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const checkTel = (rule, value, callback) => {
            console.log(value, 'value');
            if (!value) {
                return callback(new Error('电话号码不能为空'));
            }
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
                console.log(value);
            } else {
                if (value.toString().length < 11) {
                    callback(new Error('必须满11位'));
                } else {
                    callback();
                }
            }
        };
        return {
            retrievePwd: false,
            rules: {
                tel: [
                    {
                        validator: checkTel,
                        trigger: 'blur'
                    }
                ],
                pwd: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ],
                ver: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ]
            },
            // visible: false,
            labelPosition: 'right',
            resetForm: {
                tel: '',
                ver: '',
                pwd: ''
            },
            passwordType: true,
            sendTime: 59,
            sendBtn: false,
            timer: null
        };
    },
    mounted() {},
    methods: {
        onClose() {
            this.$emit('update:visible', false);
        },
        // 发送验证码
        smsCode() {
            console.log('发送验证码');
            const params = {
                saasId: appInfo.app.saasId,
                platformCode: appInfo.app.platformCode,
                sceneCode: '1002035', //  场景Code（写死）
                // mobile: '13600002000',
                mobile: this.resetForm.tel + '',
                producerCode: 0, //  验证码生成方式0-系统生成,1-调用方生成
                codeLength: 6, //   验证码长度producerCode=0时填写
                periodOfValidity: 120 //  有效期
            };
            User.smsCode(params)
                .then(res => {
                    console.log(res);
                    this.$message.success('发送短信成功');
                    this.sendBtn = true;
                    this.timer = setInterval(() => {
                        this.sendTime -= 1;
                        if (this.sendTime === 0) {
                            this.sendBtn = false;
                            this.sendTime = 59;
                            clearInterval(this.timer);
                        }
                    }, 1000);
                })
                .catch(() => {});
        },
        // 验证验证码
        verification() {
            const params = {
                saasId: appInfo.app.saasId,
                platformCode: appInfo.app.platformCode,
                sceneCode: '1002035', //  场景Code
                mobile: this.resetForm.tel + '',
                verufucationCode: this.resetForm.ver + '' //  验证码
            };
            User.verifySMSCode(params)
                .then(res => {
                    console.log(res);
                })
                .catch(() => {});
        },
        // 重置密码
        // {
        //     password:"fh123456!",
        //     mobile:"18310551408",
        //     saasId:"ff5a67337b6611e89feafa163eb3e537",
        //     ff5a67337b6611e89feafa163eb3e537
        //     platformCode:"12"
        // },
        reset() {
            const params = {
                saasId: appInfo.app.saasId,
                verifyCode: this.resetForm.ver,
                refereeFlag: 0, // 带推荐人传1，否0  int类型
                refereeCode: '', // 推荐人工号
                platformCode: appInfo.app.platformCode,
                mobile: this.resetForm.tel + '',
                password: this.resetForm.pwd + ''
            };
            User.retrievePassword(params)
                .then(res => {
                    if (res.statu === 'SUCCESS') {
                        this.retrievePwd = true;
                        this.$message.success('修改密码成功');
                    }
                })
                .catch(() => {
                    this.$message.error('修改密码失败');
                });
        },
        // 确认按钮
        handleClose(done) {
            this.$refs[done].validate(valid => {
                if (valid) {
                    this.$confirm('确认修改？')
                        .then(_ => {
                            console.log('发送修改密码请求');
                            this.verification();
                            if (this.retrievePwd) {
                                console.log('验证验证码正确');
                                this.reset();
                            } else {
                                console.log('验证码不正确');
                                this.reset();
                            }

                            done();
                        })
                        .catch(_ => {});
                } else {
                    console.log('error submit!!');
                    this.$message.error('请输入正确的格式');
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
#ResetPwd {
	.el-form-item.verify {
		.verify-d {
			position: absolute;
			right: 10px;
			top: 6px;
			width: 80px;
			height: 24px;
			line-height: 24px;
			font-size: 14px;
			border: 1px solid #d40000;
			border-radius: 12px;
			cursor: pointer;
		}
	}
}
</style>
