<template>
  <div>
    <!-- Liukexin 20210305 添加标题重置密码 -->
    <div class="login-card-productName">重置密码</div>
    <div class="login-message-panel">
      <div
        class="login-message"
        :class="{ success: isSuccess, error: isError }"
      >
        <span>{{ message }}</span>
      </div>
    </div>
    <!-- Liukexin 20210305 调整表单域标签的位置 ，会置于表单域顶部。-->
    <Form
      label-position="top"
      :model="pwdData"
      class="fromClass"
      :rules="pwdValidate"
      ref="userForm"
    >
      <Row class="login-form-item">
        <iCol span="24">
          <FormItem label="新密码" prop="newPwd"> <!--LiuKexin 20210305 去除：-->
            <iInput
              v-model.trim="pwdData.newPwd"
              type="password"
              placeholder="请输入密码"
              style="width: 100%"
            ></iInput>
          </FormItem>
        </iCol>
      </Row>
      <Row class="login-form-item">
        <iCol span="24">
          <FormItem label="确认密码" prop="confirmPwd"> <!--LiuKexin 20210305 去除：-->
            <iInput
              v-model.trim="pwdData.confirmPwd"
              type="password"
              placeholder="请输入确认密码"
              style="width: 100%"
            ></iInput>
          </FormItem>
        </iCol>
      </Row>
      <Row class="Savebutton">
        <Button type="primary" @click="updatePwd" style="width: 100%"
          ><Icon custom="fa fa-fw fa-save"></Icon>保存</Button
        >
      </Row>
    </Form>
  </div>
</template>
<script>
import { update, verifyPassword } from '@/api/login'
// import { sm2 } from 'sm-crypto'
import 'iview/dist/styles/iview.css'
export default {
  name: '',
  props: {
    formData: {
      type: Object,
    },
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else {
        verifyPassword({ password: value }).then((res) => {
          if (res.data && res.data.state === 'ok') {
            callback()
          } else {
            callback(new Error(res.data.msg))
          }
        })
      }
    }
    const confirmPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空'))
      } else if (this.pwdData.newPwd != value) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      message: '',
      isSuccess: false,
      isError: false,
      confirmPwdMsg: false,
      confirmMsg: '',
      newMsg: '',
      pwdData: {
        newPwd: '',
        confirmPwd: '',
      },
      pwdValidate: {
        newPwd: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          },
          { validator: validatePass, trigger: 'blur' },
        ],
        confirmPwd: [
          {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur',
          },
          {
            validator: confirmPwd,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    //修改密码
    updatePwd() {
      this.isSuccess = false
      this.isError = false
      this.$refs.userForm.validate((valid) => {
        if (!valid) {
          return false
        } else {
          update(this.formData.username, this.pwdData.newPwd)
            .then((res) => {
              if (res.data.state === 'ok') {
                let href =
                  this.formData.callback + '?token=' + this.formData.token
                document.location.href = href
                this.setSuccess()
              } else {
                this.setError(res.data.msg ? res.data.msg : '修改失败')
              }
            })
            .catch(() => {
              this.setError('修改失败')
            })
        }
      })
    },
    // encrypt(data) {
    //   let publicKey =
    //     '04272a7c8997d9883078acc011f450f88d54fdbbd6ddab950d7856a565182aad7e0b5da415f50e1d4433c2b633752dfa3bc04de879311091361db05584d972ff06'
    //   return sm2.doEncrypt(data, publicKey, 0)
    // },
    // encrypt(data) {
    //   let publicKey =
    //     '04272a7c8997d9883078acc011f450f88d54fdbbd6ddab950d7856a565182aad7e0b5da415f50e1d4433c2b633752dfa3bc04de879311091361db05584d972ff06'
    //   return sm2.doEncrypt(data, publicKey, 0)
    // },

    setSuccess(msg = '修改成功') {
      this.message = msg
      this.isSuccess = true
      this.isError = false
    },
    setError(msg = '修改失败') {
      this.message = msg
      this.isSuccess = false
      this.isError = true
    },
  },
}
</script>
<style scoped>
.login-message {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
/**LiuKexin 20210305 '重置密码'样式 */
.login-card-productName {
  font-size: 18px;
  color: #000000;
  text-align: center;
  font-family: 'Microsoft YaHei';
}
/**LiuKexin 20210305 设置表单样式 */
.login-form-item{
  padding-bottom: 8px;
  height: 72px;
}
/**LiuKexin 20210305 保存按钮样式 */
.Savebutton{
  height: 32px;
  margin-top:48px;
}
</style>
