<!--
   @description: 账户安全
   @author: XWl

   /shopmall/mysafe
-->
<template>
  <div>
    <div class="shopmall-page-title">
      账户安全
    </div>
    <div class="mysafe_content">
      <el-form
        ref="fromData"
        :model="fromData"
        :rules="rules"
        label-width="124px"
        status-icon
        class="demo-ruleForm"
        size="medium"
      >
        <el-form-item label="用户名：">
          <el-input v-model="fromData.userName" disabled />
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="fromData.mobilePhone" disabled />
        </el-form-item>
        <el-form-item label="短信验证码:" prop="code">
          <el-input v-model="fromData.code" style="width: 140px" type="text" />
          <el-button
            :disabled="isCodeBut"
            type="purplePlain"
            style="margin-left: 10px;height: 36px;min-width: 140px"
            @click="CodeBut"
          >
            {{ getCodeBut }}{{ isCodeBut?'s':'' }}
          </el-button>
        </el-form-item>
        <el-form-item label="旧密码：" prop="oldPassword">
          <el-input v-model="fromData.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="设置新密码：" prop="password">
          <el-input v-model="fromData.password" type="password" />
        </el-form-item>
        <el-form-item label="确认新密码：" prop="newPassword">
          <el-input v-model="fromData.newPassword" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="purple" size="medium" @click="submitForm('fromData')">
            确认修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { passWord } from '@/assets/js/validate.js'
import { resetPassword, getSmsNumber } from '@/api/shoppingmall/accountInfo'
import { getToken } from '@/assets/js/utils/auth'
import { mapGetters } from 'vuex'
import website from '@/assets/js/config/website' // 获取Encrypt公钥
export default {
  name: 'Mysafe',
  data() {
    const checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.fromData.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      submitFormData: {
        id: '',
        password: '',
        userName: '',
        code: '',
        repeatPassword: ''
      },
      isCodeBut: false, // 是否可以点击Btn
      getCodeBut: '发送验证码', // Btn内容
      fromData: {
        mobilePhone: '',
        id: '',
        password: '',
        userName: '',
        newPassword: '',
        code: '',
        oldPassword: ''
      },
      //  校验
      rules: {
        code: [
          { required: true, message: '短信验证码不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请设置新密码', trigger: 'blur' },
          { validator: passWord, trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: checkPass, trigger: 'blur' }
        ],
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { validator: passWord, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  mounted() {
    // this.fromData = JSON.parse(JSON.stringify(this.$store.state.shopmallUser.info))
    this.getData()
  },
  methods: {
    getData() {
      // 判断是否登录
      if (getToken()) {
        // 数据赋值
        const { userName, mobilePhone, id } = this.info
        this.fromData.userName = userName
        this.fromData.mobilePhone = mobilePhone
        this.fromData.id = id
      }
    },
    //  获取验证码
    CodeBut() {
      this.getCodeBut = 60
      const params = {
        phoneNumber: this.fromData.mobilePhone
      }
      getSmsNumber(params).then(res => {
        if (res.header.ret === '0') {
          this.$message({
            type: 'success',
            message: '验证码发送成功'
          })
        }
      }).catch(() => {

      })
      if (this.isCodeBut === false) {
        this.isCodeBut = true
        const times = setInterval(() => {
          this.getCodeBut--
          if (this.getCodeBut < 0) {
            this.getCodeBut = '重新发送验证码'
            clearInterval(times)
            this.isCodeBut = false
          }
        }, 1000)
      }
    },
    // 确认修改
    submitForm(formName) {
      // 设置公钥
      this.$Encrypt.setPublicKey(website.publicKey)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitFormData.mobiles = this.fromData.mobilePhone
          this.submitFormData.id = this.fromData.id
          this.submitFormData.password = this.$Encrypt.encryptLong(this.fromData.password) // 非对称加密
          this.submitFormData.userName = this.fromData.userName
          this.submitFormData.repeatPassword = this.$Encrypt.encryptLong(this.fromData.newPassword) // 非对称加密
          this.submitFormData.oldPassword = this.$Encrypt.encryptLong(this.fromData.oldPassword) // 非对称加密
          this.submitFormData.code = this.fromData.code
          resetPassword(this.submitFormData).then(res => {
            if (res.header.ret === '0') {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            }
            this.fromData.password = ''
            this.fromData.newPassword = ''
            this.fromData.oldPassword = ''
            this.fromData.code = ''
          })
        }
      })
    }

  }
}
</script>

<style scoped lang="less">
.mysafe_content {
  width: 420px;
  margin: 10vh auto 0;
  .el-form-item {
    margin-bottom: 30px;
  }
}
.btn {
  display: block;
  width: 160px;
  margin: 0 auto;
  height: 40px;
}
</style>
