<!-- 修改密码 -->
<template>
  <div>
    <el-dialog :title="$t('common.changePwd')" width="30%" :close-on-click-modal="false"  :visible.sync="dialogVisible" class="checkout-app-dialog">
      <el-form status-icon :model="form" ref="form" label-width="80px" :rules="formRules">
        <el-form-item :label="$t('common.oldPwd')" prop="oldPassword">
          <el-input :placeholder="$t('common.enterOldPwd')" maxlength="15" v-model="form.oldPassword"></el-input>
        </el-form-item>

        <password :label="$t('common.newPwd')" v-model="form.newPassword" prop="newPassword"></password>

        <el-form-item :label="$t('common.rePwd')" prop="rePassword">
          <el-input :placeholder="$t('common.reEnterNewPwd')" maxlength="15" v-model="form.rePassword" type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="save">{{$t('common.save')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import authcenterApi from '@/api/authcenterApi'
import password from '@/components/element/Password'
import { redirctLogin } from '@/utils/auth'
export default {
  components: {
    password
  },
  props: {
    // 控制dialog显示
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  data () {
    return {
      form: {},
      formRules: {
        oldPassword: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].common['enterOldPwd'], trigger: 'blur' }
        ],
        rePassword: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].common['reEnterNewPwd'], trigger: 'blur' },
          { validator: this.validatePwd, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    save () {
      let $this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          authcenterApi.user.changePwd($this.form).then(res => {
            this.$alert(this.$i18n.messages[this.$i18n.locale].common['changePwdSucAndRelogin'], this.$i18n.messages[this.$i18n.locale].common['successfully'], {
              confirmButtonText: this.$i18n.messages[this.$i18n.locale].common['Determine'],
              callback: () => {
                redirctLogin()
              }
            })
          })
        }
      })
    },
    validatePwd (rule, value, callback) {
      if (value === this.form.newPassword) {
        callback()
      } else {
        callback(new Error(this.$i18n.messages[this.$i18n.locale].common['twoPwdMustSame']))
      }
    }
  },
  watch: {
    dialogVisible () {
      let $this = this
      this.$nextTick(() => {
        $this.$refs.form.clearValidate()
        this.form = {}
      })
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (value) {
        this.$emit('update:visible', value)
      }
    }
  }
}
</script>
