<template>
    <div>
        <div class="testby">   
            <p style="font-size:28px;color:#333333;margin-top:0">设置交易密码</p>
            <el-divider ></el-divider>
            <p style="color:#A6A6A6;font-size:13px">*请确保交易密码与登录密码不同!</p>
            <p style="color:#A6A6A6;font-size:13px">*密码必须为 6-16 位，字母、数字或字符的组合。</p>
            <p style="color:#A6A6A6;font-size:13px;margin-bottom: 30px;">
                <span>*如果您收不到手机验证码，请先去</span>
                <span style="color:#1989fa">个人信息</span>
                <span>页面验证工作手机。</span>
            </p>
            <el-form ref="sactionform" :model="sactionform" :rules="sactionFormRules" label-width="120px" >
                <el-form-item label="手机号码">
                    <span v-if="userinform.phonenumber">+86 {{userinform.phonenumber}}</span>
                </el-form-item>
                <el-form-item prop="password" label="交易密码">
                    <el-input show-password v-model="sactionform.password" ></el-input>
                </el-form-item>
                <el-form-item prop="newpassword" label="确认交易密码">
                    <el-input show-password v-model="sactionform.newpassword"></el-input>
                </el-form-item>
                <el-form-item label="短信验证码" class="verifybtn" >
                    <el-input v-model="sactionform.code"
                        maxlength="6"
                        auto-complete="off">
                        <el-button slot="suffix" 
                                   @click="getVerify"
                                   :disabled="tranVerify.disabled">
                            <span v-show="tranVerify.show">获取验证码</span>
                            <span v-show="!tranVerify.show" class="count">{{tranVerify.count}} s</span>
                        </el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="but">确认</el-button>
                </el-form-item>
            </el-form>
            
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {isMobile} from "@/util/validate";
    import {getCodeUserLogin,scatpasswd} from "@/api/system/login";
    export default{
        data(){
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                return callback(new Error('请输入密码'));
                }
                if(!/^[a-z0-9][a-z0-9A-Z@#%^.*!~?|]{5,11}$/i.test(value)){
                return callback(new Error('密码格式错误'));
                }
                // if (this.getpasswordForm.repassword !== '') {
                //   this.$refs.getpasswordForm.validateField('repassword')
                // }
                return callback();
          };
          //注册的确认密码
            const validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.sactionform.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            https://www.keyitest.cn/prod-api/captchaUserLogin?phoneNumber=18729807538
            return{
                sactionform:{password:'',newpassword:'',code:'',uuid:''},
                tranVerify:{ show: true, count: 0, timer: null, disabled: false},//注册验证码
                sactionFormRules:{
                    password: [{ required: true, validator:validatePass, trigger: 'blur' },
                        { min: 6, message: '密码长度最少为6位', trigger: 'blur' }],
                    newpassword: [{ required: true, validator:validatePass2, trigger: 'blur' },
                        { min: 6, message: '密码长度最少为6位', trigger: 'blur' }],
                },
            }
        },
        mounted(){
        },
        computed: {
            ...mapGetters(['userinform'])
        },
        methods:{
            // 获取短信验证码
            getVerify() {
                if(!this.sactionform.newpassword){
					this.$message.warning('请输入密码');
                    return;
				}
                let phone = this.userinform.phonenumber;
                if (!phone || !isMobile(phone)) {
                    this.$message.warning('手机格式不对');
                    return;
                }
                this.tranVerify.disabled = true;
                // 获取注册验证码的接口
                getCodeUserLogin(phone).then((res)=> {
                    if(res.code==200){
                        this.sactionform.uuid=res.uuid;
                        this.$message.success('短信发送成功，请注意查收')             
                        const TIME_COUNT = 60; //更改倒计时时间
                        if (!this.timer) {
                            this.tranVerify.count = TIME_COUNT;
                            this.tranVerify.show = false;
                            this.tranVerify.timer =
                            setInterval(() => {
                                if (this.tranVerify.count > 0 && this.tranVerify.count <= TIME_COUNT) {
                                    this.tranVerify.count--;
                                } else {
                                    this.tranVerify.disabled = false;
                                    this.tranVerify.show = true;
                                    clearInterval(this.tranVerify.timer); // 清除定时器
                                    this.tranVerify.timer = null;
                                }
                            }, 1000);
                        }
                    }           
                }).catch((err) => {
                });   
            },
            onSubmit(){
                this.$refs.sactionform.validate((valid) => {
                    if(valid) {     
                        if(!this.sactionform.code){
							this.$message.warning('请输入验证码');
						}else{
                            let data={
								password:this.sactionform.password,
								code:this.sactionform.code,
								uuid:this.sactionform.uuid,
							}
                            let userId=this.userinform.userId
                            scatpasswd(userId,data).then(res=>{
								if(res.code==200){
                                    this.$message.success('设置成功');
                                    this.$router.push(`/console/profile`)
								}else{
                                    this.$message.warning('验证码无效');
								}
							})
                        }
                    }
                })
            },
        },

    }
</script>
<style scoped>
    .testby{
        width:800px;
        height: 500px;
        margin: 50px 0 50px 100px;
        background:#F1F3F8 ;
        border-radius: 10px;
        padding:50px
    }
    .testby>>>.el-input__inner{
        width:300px;
    }
    .but{
        width:300px;
        font-size:16px;
        background-color: #0066EB;
    }
    .testby>>>.el-input{
        width: 300px !important;;
    }
    .verifybtn>>>.el-input{
        width: 300px !important;;
    }
    .verifybtn>>>.el-button{
       
        margin-top:-3px;
        margin-left: -28px;
        width:100%;
        height:50px;
        font-size:15px;
        /* color:#0066EB; */
        background: transparent;
        border:none;
        border-radius:6px;
        z-index:-1
    /* 18798569999 */
  }
  .verifybtn>>>.el-button.is-disabled:hover{
    background: transparent;
  }
</style>