<template>
    <!--重置密码dialog-->
    <el-dialog title="设置签章密码" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :show-close="false"
        :close-on-press-escape="false" width="30%">
        <el-form :model="form" :rules="rules" ref="resetPwdForm" class="resetPwd-form">
            <el-form-item label="手机号码：" :label-width="formLabelWidth" prop="account">
                <span>{{phone}}</span>
            </el-form-item>
            <el-form-item label="请输入验证码：" :label-width="formLabelWidth" prop="code">
                <el-input v-model="form.code" autocomplete="off" style="width: 50%;"></el-input>
                <el-button :disabled="msgKey" type="primary" @click="getCode">{{msgText}}</el-button>
            </el-form-item>
            <el-form-item label="请设置新密码：" :label-width="formLabelWidth" prop="pwd">
                <el-input type="number" maxlength="6" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" v-model="form.pwd" autocomplete="off" show-password placeholder="请输入六位数字密码"></el-input>
            </el-form-item>
            <el-form-item label="请再次输入新密码：" :label-width="formLabelWidth" prop="pwd2">
                <el-input type="number" maxlength="6" onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" v-model="form.pwd2" autocomplete="off" show-password placeholder="请再次输入六位数字密码"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitResetPwd">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { mapGetters } from 'vuex'
    import {getCode,resetPwd} from '@/api/manage/econtract'
    export default {
        data() {
            const validatePwd = (rule, value, callback) => {
                if (value != this.form.pwd) {
                    callback(new Error('两次输入密码不一致'));
                }
                else {
                    callback();
                }
            };
            const validPwdNums = (rule, value, callback) => {
                if (value.length != 6 || isNaN(Number(value))) {
                    callback(new Error('请输入6位数的数字密码'));
                }
                else {
                    callback();
                }
            }
            return {
                form: {
                    name: '',
                    region: '',
                    code: '',
                    pwd: '',
                    pwd2: '',
                },
                formLabelWidth: '150px',
                dialogFormVisible: false,
                msgKey: false,
                msgText: '获取验证码',
                msgTime: 120,
                phone: '',
                rules: {
                    code: [
                        {
                            required: true, message: '请输入验证码', trigger: 'blur'
                        }
                    ],
                    pwd: [
                        {
                            required: true, message: '请输入密码', trigger: 'blur'
                        },
                        {
                            validator: validPwdNums, trigger: 'blur'
                        }
                    ],
                    pwd2: [
                        {
                            required: true, message: '请输入确认密码', trigger: 'blur'
                        },
                        {
                            validator: validatePwd, trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            open() {
                this.phone = this.userInfo.account;
                var pat = /(\d{3})\d*(\d{4})/;
                this.phone = this.phone.replace(pat, '$1****$2');
                this.dialogFormVisible = true;
            },
            /*获取验证码*/
      getCode() {
        this.msgKey = true;
        this.msgText = "发送中...";
        getCode(this.userInfo.account)
          .then(() => {
            this.msgText = "剩余" + 120 + "s";
            this.msgKey = true;
            const time = setInterval(() => {
              this.msgTime--;
              this.msgText = "剩余" + this.msgTime + "s";
              if (this.msgTime <= 0) {
                this.msgTime = 120;
                this.msgText = "重新获取";
                this.msgKey = false;
                clearInterval(time);
              }
            }, 1000);
          })
          .catch(() => {
            this.msgText = "重新获取";
            this.msgKey = false;
          });
          
      },
            /*设置签章密码*/
            submitResetPwd() {
                this.$refs.resetPwdForm.validate(valid => {
                    if (valid) {
                        resetPwd(this.userInfo.account, this.form.pwd, this.form.code).then(() => {
                            this.$message.success('签章密码设置成功');
                            this.dialogFormVisible = false;
                        })
                            .catch((err) => {
                                this.$message.error(err);
                            })
                    }
                })
            },
        },
        computed: {
            ...mapGetters(['userInfo'])
        }
    }
</script>
<style>
    .resetPwd-form .el-form-item {
        margin-bottom: 30px!important;
    }
</style>
