<template>
  <div class="page_noPassword">
    <div class="myInput">
      <p class="title">请设置新的登录密码</p>
      <el-form ref="pwdForm" :model="pwdForm" :rules="rules">
          <el-form-item required prop="newpassword">
              <el-input placeholder="请输入新密码" prefix-icon="el-icon-lock" show-password v-model="pwdForm.newpassword" v-on:input="watchNum"></el-input>
          </el-form-item>
          <el-form-item required prop="confirmpassword">
              <el-input placeholder="请再次确认密码" prefix-icon="el-icon-lock"  show-password v-model="pwdForm.confirmpassword" v-on:input="watchNum"></el-input>
          </el-form-item>
      </el-form>
      <!-- <el-input placeholder="请输入新密码" prefix-icon="el-icon-lock" v-model="phone"></el-input>

      <el-input placeholder="请再次确认密码" prefix-icon="el-icon-lock" v-model="psd" show-password></el-input> -->
      <p class="advice">请使用字母、数字和符号两种及以上的组合,6-20个字符</p>
    </div>
    <div class="login" v-show="loginshow" @click="Accomplish('pwdForm')" >完成</div>
    <div class="logintwo" v-show="loginshowone">完成</div>
    <div class="problem">
      遇到问题？点击
      <span @click="contact = true">联系客服</span>
    </div>

    <!-- 弹窗 联系客服 -->
    <el-dialog
      title="客服电话"
      :visible.sync="contact"
      width="19.1875rem"
      top="12.5rem"
      center
      class="myDialog"
    >
      <span class="telephone">0755-86526342</span>
      <span slot="footer" class="dialog-footer">
        <span @click="contact = false">取消</span>
        <span>|</span>
        <span type="primary" @click="contact = false">拨打</span>
      </span>
    </el-dialog>
  </div>
</template>


<script>
 import { checkPassWordTwo } from '@/utils/tools'
 import { Accomplish } from '@/api/login/login'
 import { hex_md5 } from '@/utils/md5'
import { RSA_PKCS1_PADDING } from 'constants'
export default {
   data() {
     var checkPasswordRule = (rule, value, callback) => {
       if (!checkPassWordTwo(value)) {
         callback(new Error('密码长度不能小于6位数'))
       } else {
         callback()
       }
     }

     return {
       phone: '',
       code: '',
       psd: '',
       contact: false,
       pwdForm: {
         newpassword: '',
         confirmpassword: ''
       },
       loginshow: false,
       loginshowone: true,
       rules: {
         newpassword: [{ required: true, message: '请输入密码' }, { validator: checkPasswordRule }],
         confirmpassword: [{ required: true, message: '请输入确认密码' }, { validator: checkPasswordRule }]
       }
     }
   },
   methods: {
     watchNum() {
       if (this.pwdForm.newpassword == '' || this.pwdForm.confirmpassword == '') {
         this.loginshow = false
         this.loginshowone = true
       } else {
         this.loginshow = true
         this.loginshowone = false
       }
     },
     Accomplish(formName) {
       //    if(this.pwdForm.newpassword != this.pwdForm.confirmpassword){
       //      this.$message.error("两次密码输入一致,请重新输入")
       //      return false
       //    }
       const phone = this.$route.query.phone
       console.log('phone', phone)
       this.$refs[formName].validate((valid) => {
         if (valid) {
           Accomplish(phone, hex_md5(this.pwdForm.newpassword), hex_md5(this.pwdForm.confirmpassword)).then(response => {
             if (response.data.state == 1) {
               var admin = response.data.data.admin
               this.$router.push('/login')
             } else {
               this.$message.error('两次输入密码不一致，请重新输入')
             }
           })
         }
       })
     }
   },
   created() {
 
   }
}
</script>

<style lang="scss">
.page_noPassword {
  overflow: hidden;
  .myInput {
    margin-top: 4rem;
    .title {
      font-size: 0.875rem;
      margin-left: 2.25rem;
    }
    .advice {
      width: 19.0625rem;
      margin: 0 auto;
      font-size: 0.875rem;
      margin-top: 1.25rem;
      line-height: 1.25rem;
    }
    .el-input {
      display: block;
      margin: 0 auto;
      width: 19.0625rem;
      border-bottom: 1px solid #e6e6e6;
      color: rgba(155, 155, 155, 1);
      padding-left: 0.75rem;
      box-sizing: border-box;
      height: 3.875rem;
      line-height: 3.875rem;
      padding-top: 0.125rem;
    }
    .el-input__inner {
      border: none;
    }
    .el-input__prefix {
      font-size: 1.5rem;
      color: #acacac;
    }
    .el-input__icon {
      font-size: 1.5rem;
      line-height: 4.25rem;
    }
  }
  .login {
    width: 19.25rem;
    height: 2.875rem;
    background: linear-gradient(
      -90deg,
      rgba(129, 159, 246, 1),
      rgba(81, 119, 238, 1),
      rgba(75, 102, 234, 1)
    );
    border-radius: 1.4375rem;
    margin: 0 auto;
    line-height: 2.875rem;
    text-align: center;
    color: #fff;
    margin-top: 2.875rem;
  }
  .problem {
    margin-top: 1.75rem;
    width: 9.625rem;
    font-size: 0.8125rem;
    margin-left: 3.5625rem;
    span {
      color: #5177ee;
    }
  }
  .myDialog {
    line-height: 50%;
    height: 100%;
    .el-dialog {
      border-radius: 10px;
    }
    .el-dialog__title {
      color: #000000;
    }
    .telephone {
      width: 12.5rem;
      height: 1.125rem;
      font-size: 1.5rem;
      font-weight: 500;
      color: rgba(81, 119, 238, 1);
      margin-left: 2.5rem;
    }
    .dialog-footer {
      //   display: flex;
      //   justify-content: space-around;
      //   align-items: center;
      > span:nth-of-type(1) {
        color: #9b9b9b;
      }
      > span:nth-of-type(2) {
        // width: 0.125rem;
        // height: 1.75rem;
        // line-height: 1.75rem;
        padding: 0 3.125rem;
        color: #e6e6e6;
      }
      > span:nth-of-type(3) {
        color: #000000;
      }
    }
  }
}


  .logintwo{
     width: 19.25rem;
    height: 2.875rem;
     background: #e5e5e5;
    border-radius: 1.4375rem;
    margin: 0 auto;
    line-height: 2.875rem;
    text-align: center;
    color: #fff;
    margin-top: 2.875rem;
  }

  .el-form-item__error{
  margin-left: 2.5rem;
}
</style>
