<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="120px" style="margin-top: 10px;">
        <el-form-item :label="$t('system.user.table.account')">
          <el-input v-model="form.account" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.password')">
          <el-button size="small" type="primary" disabled @click="openChangePwdDlg">
            {{ $t('system.profile.change') }}
          </el-button>
        </el-form-item>
        <el-form-item :label="$t('system.user.table.userName')">
          <el-input v-model="form.userName" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.jobNumber')">
          <el-input v-model="form.jobNumber" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.mobile')">
          <el-input v-model="form.mobile" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.email')">
          <el-input v-model="form.email" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.role')">
          <el-input v-model="form.roleName" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.deptName')">
          <el-input v-model="form.department" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.userType')">
          <el-input :value="userTypeFilter(form.userType)" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.sex')">
          <el-input :value="this.sexValueFilter(form.sex)" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.status')">
          <el-input :value="this.statusFilter(form.status)" readonly />
        </el-form-item>
        <el-form-item :label="$t('system.user.table.isLeave')">
          <el-input :value="this.leaveFilter(form.isLeave)" readonly />
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog :close-on-click-modal="false" :title="$t('system.profile.title')" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="userForm" :model="user" label-width="150px" class="demo-ruleForm">
        <el-form-item :label="$t('system.profile.old')" prop="oldPassword" :rules="[{ required: true, message: this.$t('system.profile.valid.old'), trigger: 'blur' }]">
          <el-input v-model="user.oldPassword" type="password" />
        </el-form-item>
        <el-form-item :label="$t('system.profile.new')" prop="newPassword" :rules="[{ required: true, message: this.$t('system.profile.valid.new'), trigger: 'blur' }]">
          <el-input v-model="user.newPassword" type="password" />
        </el-form-item>
        <el-form-item :label="$t('system.profile.confirm')" prop="confirmPassword" :rules="[{ required: true, message: this.$t('system.profile.valid.confirm'), trigger: 'blur' }]">
          <el-input v-model="user.confirmPassword" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('common.btn.cancel') }}</el-button>
        <el-button :loading="changePwdBtnLoading" type="primary" @click="save()">{{ $t('common.btn.submit') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailInfo, changePassword } from '../../api/system/user'
import md5 from 'js-md5'

export default {
  name: 'Profile',
  data() {
    return {
      form: {
        account: null,
        userName: null,
        jobNumber: null,
        department: null,
        mobile: null,
        email: null,
        roleName: null,
        userType: null,
        sex: null,
        status: null,
        isLeave: null
      },
      dialogFormVisible: false,
      user: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      },
      changePwdBtnLoading: false
    }
  },
  computed: {
    userTypeList: function() {
      return [
        {
          value: 0,
          label: this.$t('system.user.userType.noGm')
        },
        {
          value: 1,
          label: this.$t('system.user.userType.gm')
        }
      ]
    },
    isLeaveList: function() {
      return [
        {
          value: 0,
          label: this.$t('system.user.leaveEnum.onJob')
        },
        {
          value: 1,
          label: this.$t('system.user.leaveEnum.quit')
        }
      ]
    },
    statusList: function() {
      return [
        {
          value: 0,
          label: this.$t('system.user.userStatus.normal')
        },
        {
          value: 1,
          label: this.$t('system.user.userStatus.frozen')
        }
      ]
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getDetailInfo().then(res => {
        this.form.account = res.data.account
        this.form.userName = res.data.userName
        this.form.mobile = res.data.mobile
        this.form.userType = res.data.userType
        this.form.status = res.data.status
        this.form.department = res.data.deptName
        this.form.isLeave = res.data.isLeave
        this.form.jobNumber = res.data.jobNumber
        this.form.email = res.data.email
        this.form.roleName = res.data.roles.map(item => item.roleName).join(',')
        this.form.sex = res.data.sex
      }, () => {
      })
    },
    openChangePwdDlg() {
      if (this.$refs.userForm !== undefined) {
        this.$refs.userForm.resetFields()
      }
      this.user = {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      }
      this.dialogFormVisible = true
    },
    save() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.changePwdBtnLoading = true
          const tmp = {}
          tmp.oldPassword = md5(this.user.oldPassword)
          tmp.newPassword = md5(this.user.newPassword)
          tmp.confirmPassword = md5(this.user.confirmPassword)
          changePassword(tmp).then(res => {
            this.$message.success(this.$t('common.operationOk'))
            this.dialogFormVisible = false
            this.changePwdBtnLoading = false
          }, () => {
            this.changePwdBtnLoading = false
          })
        }
      })
    },
    leaveFilter(status) {
      const leave = this.isLeaveList.find(item => item.value === status)
      if (leave) {
        return leave.label
      }
    },
    statusFilter(status) {
      const obj = this.statusList.find(item => item.value === status)
      if (obj) {
        return obj.label
      }
    },
    userTypeFilter(value) {
      const type = this.userTypeList.find(item => item.value === value)
      if (type) {
        return type.label
      }
    },
    sexValueFilter(status) {
      switch (status) {
        case 0:
          return this.$t('common.gender.secrecy')
        case 1:
          return this.$t('common.gender.male')
        case 2:
          return this.$t('common.gender.female')
      }
    }

  }
}
</script>

<style scoped>

</style>
