<template>
  <el-dialog
    title="修改密码"
    :visible.sync="visible"
    width="360px"
    @close="handleClose">
    <div class="form-wrap">
      <el-form
        :model="form"
        ref="form"
        label-width="80px">
        <el-form-item
          label="昵称"
          prop="nickName">
          {{ form.nickName }}
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="name">
          {{ form.name }}
        </el-form-item>
        <el-form-item
          verify
          label="旧密码"
          prop="oldPassword">
          <el-input
            v-if="hide1"
            v-model="form.oldPassword"
            type="password"></el-input>
          <el-input
            v-else
            v-model="form.oldPassword"></el-input>
          <i
            @mousedown="hide1=false"
            @mouseup="hide1=true"
            class="el-icon-view"
            :class="{active:!hide1}"></i>
        </el-form-item>
        <el-form-item
          verify
          label="新密码"
          prop="password">
          <el-input
            v-if="hide"
            v-model="form.password"
            type="password"></el-input>
          <el-input
            v-else
            v-model="form.password"></el-input>

          <i
            @mousedown="hide=false"
            @mouseup="hide=true"
            class="el-icon-view"
            :class="{active:!hide}"></i>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getSelf } from '@/api/systemSetting/account'
import { updatePassword } from '@/api/login'
import { encrypt } from '@/utils'

export default {
  created () {
    getSelf().then(res => {
      this.form.id = res.id
      this.form.nickName = res.nickName
      this.form.name = res.name
    })
  },
  computed: {
    myAccount () {
      return this.$store.state.app.myAccount
    }
  },
  data () {
    return {
      form: {
        name: '',
        nickName: '',
        oldPassword: '',
        password: ''
      },
      hide: true,
      hide1: true,
      visible: false
    }
  },
  methods: {
    show () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    handleClose () {
      this.visible = false
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { oldPassword, password } = this.form
          const params = {}
          params.oldPassword = encrypt(oldPassword)
          params.newPassword = encrypt(password)

          updatePassword(params).then(res => {
            if (res.code === '200') {
              this.$message.success('更新成功。')
              this.handleClose()
              return
            }

            this.$message.error(res.msg || '更新失败')
          })
        }
      })
    }
  },
  watch: {
    myAccount: {
      handler (val) {
        if (val) {
          this.form = val
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap{
    padding: 20px;
}
.el-icon-view{
    cursor: pointer; font-size: 1.2em; margin-left: 10px;
}
.el-icon-view.active{
color: red
}
::v-deep .el-dialog .el-form-item{
    display: block;
}
</style>
