<template>
  <div class="app-container">
    <el-card class="Security" style="width:800px;">
      <div slot="header" class="clearfix">
        <span>{{ $t('admin:Security') }}</span>
      </div>
      <el-form
        ref="userAccount"
        :model="user"
        :rules="userFormRules"
        label-width="150px"
        style="width:600px;"
      >
        <el-form-item :label="$t('admin:OldPassWord')" prop="OldPassWord">
          <el-input :maxLength="32" v-model="user.OldPassWord" type="password" show-password auto-complete="new-password"/>
        </el-form-item>
        <el-form-item class="my_new_pwd" :label="$t('admin:NewPassWord')" prop="NewPassWord">
          <el-input :maxLength="32" v-model="user.NewPassWord" type="password" show-password auto-complete="new-password"/>
        </el-form-item>
        <el-form-item class="my_new_pwd" :label="$t('admin:ConfirmPassWord')" prop="ConfirmPassWord">
          <el-input :maxLength="32" v-model="user.ConfirmPassWord" type="password" show-password auto-complete="new-password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="save">{{ $t('common:button:save') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { modifyPassword } from '@/api/admin'
import store from '@/store'
import { mapGetters } from 'vuex'
import md5 from 'js-md5'
export default {
  data() {
    return {
      user: {},
      userFormRules: {
        OldPassWord: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
        NewPassWord: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
          {
            required: true,
            trigger: 'blur',
            validator: this.$validatePassword
          },
        ],
        ConfirmPassWord: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
          {
            required: true,
            trigger: 'blur',
            validator: this.$validatePassword
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.userId === '' ? store.dispatch('user/getInfo') : ''
  },
  methods: {
    save() {
      this.$refs.userAccount.validate(valid => {
        if (valid) {
          if (this.user.NewPassWord !== this.user.ConfirmPassWord) {
            this.$message.error('两次密码不相同')
            return
          }
          const param = {
            UserId: this.userId,
            NewPassWord: md5(this.user.NewPassWord),
            OldPassWord: md5(this.user.OldPassWord)
          }
          modifyPassword(param).then(res => {
            if (res.IsSuccess) {
              this.$message({
                message: this.$t('common:message:updatedSuccessfully'),
                type: 'success'
              })
            }
          })
        }
      })
    }
  }
}

</script>
<style lang="scss" scoped>
>>>.is-error.my_new_pwd{
  margin-bottom: 40px;
}
</style>
