<template>
  <div class="app-container">
<!--    <el-card class="Security" style="width:800px;">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span>Security</span>-->
<!--      </div>-->
<!--      <el-form-->
<!--        ref="userAccount"-->
<!--        :model="user"-->
<!--        :rules="userFormRules"-->
<!--        label-width="150px"-->
<!--        style="width:600px;"-->
<!--      >-->
<!--        <el-form-item label="Current Password" prop="OldPassWord">-->
<!--          <el-input v-model="user.OldPassWord" type="password" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="New Password" prop="NewPassWord">-->
<!--          <el-input v-model="user.NewPassWord" type="password" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="Confirm Password" prop="ConfirmPassWord">-->
<!--          <el-input v-model="user.ConfirmPassWord" type="password" />-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" size="small" @click="save">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: 'Please specify', trigger: 'blur' }],
        NewPassWord: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: 'Passwords consist of 6-20 characters',
            trigger: 'blur'
          }
        ],
        ConfirmPassWord: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: 'Passwords consist of 6-20 characters',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  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.$alert('The two passwords differ')
            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: 'Updated successfully',
                type: 'success'
              })
            }
          })
        }
      })
    }
  }
}

</script>
