<template>
    <el-dialog v-bind="$attrs" v-on="$listeners" width="40%" append-to-body>
        <div class="body">
            手机号码：
            <el-input v-model="account" type="text" class="password_input"/>
            <el-button type="primary" v-on:click="sendVerificationCode" :disabled="isDisabled">{{content}}</el-button>
            <br>
            验证码：
            <el-input v-model="code" auto-complete="off" type="text" class="password_input"/>
            <br>
            新密码：
            <el-input v-model="newPwd" auto-complete="off" type="password" show-password clearable
                      class="password_input"/>
            <br>
            再次输入新密码：
            <el-input v-model="againNewPwd" auto-complete="off" type="password" show-password clearable
                      class="password_input"/>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" icon="el-icon-circle-check"
                       @click="onSubmit">{{$t('dialog.update')}}</el-button>
            <el-button icon="el-icon-circle-close"
                       @click="$emit('update:visible', false)">{{$t('dialog.cancle')}}</el-button>
         </span>
    </el-dialog>
</template>
<script>
    import {AxiosRequestData} from "../../../data/axios_request";
    import cache from '@/utils/cache';

    export default {
        props: {
            json: {
                type: Object
            },
            disabled: {
                type: Boolean,
                default: true
            }
        },
        data() {
            const emptyErrorMsg = this.$t('updateUserPassword.emptyErrorMsg')
            return {
                editPassword: {
                    name: '',
                },
                rules: {
                    originalPwd: [
                        {required: true, message: emptyErrorMsg, trigger: 'blur'}
                    ],
                    newPwd: [
                        {required: true, message: emptyErrorMsg, trigger: 'blur'}
                    ],
                    againNewPwd: [
                        {required: true, message: emptyErrorMsg, trigger: 'blur'}
                    ]
                },
                loading: false,
                account: '',
                token: '',
                code: '',
                newPwd: '',
                againNewPwd: '',

                isDisabled: false, //控制按钮是否可以点击（false:可以点击，true:不可点击）
                content: '获取短信验证码', // 发送验证码按钮的初始显示文字
                timer: null,
                count: '',
                model: {},
            }
        },
        created() {
            let user = JSON.parse(cache.getLocal('user'));
            this.account = user.account;
            this.token = cache.getToken();
        },
        methods: {
            onSubmit() {
                if (this.newPwd === this.againNewPwd) {
                    this.changePassword();
                } else {
                    let errorMsg = this.$t('updateUserPassword.sameErrorMsg')
                    this.$message.error(errorMsg)
                }
            },
            //修改用户密码
            async changePassword() {
                if (this.code == '') {
                    this.$message({
                        message: '验证码不能为空！',
                        type: 'warning'
                    });
                    return;
                }
                if (this.account && this.token) {
                    const url = '/auth/comm/user/forgotpwd';
                    let response = await AxiosRequestData(
                        url,
                        this.token,
                        {
                            mobile: this.account,
                            password: this.newPwd,
                            confirmPassword: this.againNewPwd,
                            smsCode: this.code,
                            reqChannel: 4,
                        },
                        false,
                        1,
                    );
                    if (response) {
                        if (response.code == 0) {
                            this.$message({
                                message: '密码修改成功！',
                                type: 'success'
                            });
                            this.$emit('update:visible', false)
                        } else {
                            this.$message.error('密码修改失败！');
                        }
                    }
                }
            },
            // 发送验证码
            sendCode() {
                // 控制倒计时及按钮是否可以点击
                const TIME_COUNT = 60
                this.count = TIME_COUNT
                this.timer = window.setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        // 倒计时时不可点击
                        this.isDisabled = true
                        // 计时秒数
                        this.count--
                        // 更新按钮的文字内容
                        this.content = this.count + 's后重新获取'
                    } else {
                        // 倒计时完，可点击
                        this.isDisabled = false
                        // 更新按钮文字内容
                        this.content = '获取短信验证码'
                        // 清空定时器!!!
                        clearInterval(this.timer)
                        this.timer = null
                    }
                }, 1000)
            },
            //发送验证码
            async sendVerificationCode() {
                if (!this.account || this.account == '') {
                    this.$message({
                        message: '请输入手机号',
                        type: 'warning'
                    });
                    return
                }
                if (!(/^1[34578]\d{9}$/.test(this.account))) {
                    this.$message({
                        message: '请输入正确的手机号',
                        type: 'warning'
                    });
                    return
                }
                const url = '/sms/getSmscode';
                let token = null;
                let response = await AxiosRequestData(
                    url,
                    token,
                    {
                        phoneNo: this.account,
                    },
                    false,
                    1,
                );
                if (response) {
                    if (response.code == 0) {
                        this.$message({
                            message: '验证码发送成功！',
                            type: 'success'
                        });
                        this.sendCode()
                    } else {
                        this.$message.error('验证码发送失败！')
                    }
                } else {
                    this.$message.error('验证码发送失败！')
                }
            }
        }
    }
</script>
<style scoped>
    .body {
        flex: 1;
    }

    .invoice_radio {
        margin: 5px;
    }

    .invoice_button {
        margin: 5px;
    }

    .password_input {
        width: 250px;
        margin: 5px;
    }
</style>
