<template>
    <div class="content">
        <Row>
            <Col span="12" offset="4">
                <template>
                    <Form :model="formItem" :label-width="150" :rules="ruleCustom">
                        <FormItem label="旧密码：" prop="oldpassword">
                            <Input type="password" v-model="formItem.oldpassword"></Input>
                        </FormItem>
                        <FormItem label="新密码：" prop="newpassword">
                            <Input type="password" v-model="formItem.newpassword"></Input>
                        </FormItem>
                        <FormItem label="确认密码：" prop="repassword">
                            <Input type="password" v-model="formItem.repassword"></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" :loading="btnLoading" @click="updatePassword">修改密码</Button>
                        </FormItem>
                    </Form>
                </template>
            </Col>
        </Row>
    </div>
</template>

<script>
import { updatePwd } from '../../../api/system/system'

export default {
  name: 'WlUpdatePassword',
  data () {
    const pwdcheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else {
        callback()
      }
    }
    const newpwdcheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度在8-16位之间！'))
        } else {
          let zg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
          if (!zg.test(value)) {
            callback(new Error('密码为数字和字母组合！'))
          }
          callback()
        }
      }
    }
    const repwdcheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else {
        if (value !== this.formItem.newpassword) {
          callback(new Error('两次密码不相同！'))
        }
        callback()
      }
    }
    return {
      btnLoading: false,
      formItem: {
        oldpassword: '',
        newpassword: '',
        repassword: ''
      },
      ruleCustom: {
        oldpassword: [
          { validator: pwdcheck, trigger: 'blur' }
        ],
        newpassword: [
          { validator: newpwdcheck, trigger: 'blur' }
        ],
        repassword: [
          { validator: repwdcheck, trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    updatePassword () {
      this.btnLoading = true
      const data = this.formItem
      updatePwd(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.btnLoading = false
          this.$Message.success('修改成功')
        } else {
          this.btnLoading = false
          this.$Message.error(ret.data.errmsg)
        }
      })
    }
  }

}
</script>

<style scoped>
    .content {
        padding-top: 50px;
    }
</style>
