<template>
  <div class="work-platform-user-bar">
    <el-dropdown class="user panel-item" trigger="click" @command="handleCommand">
      <div class="user-avatar">
        <el-avatar :size="30" :src="require('@/assets/user-avatar.jpeg')"></el-avatar>
        <label>{{ userinfo.name }}</label>
        <div class="el-icon--right"><i class="el-icon-arrow-down"></i></div>
      </div>
      <template slot="dropdown">
        <el-dropdown-menu>
          <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
          <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
          <el-dropdown-item divided command="doLogout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dialog title="修改密码" :visible.sync="changePwdDialogVisible" width="500px">
      <el-form :model="changePwdRuleForm" :rules="changePwdRules" ref="changePwdRuleForm" v-if="changePwdDialogVisible">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="changePwdRuleForm.oldPassword" type="password" placeholder="输入旧密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="changePwdRuleForm.newPassword" type="password" placeholder="输入新密码" />
        </el-form-item>
        <el-form-item label="再次输入" prop="repeat">
          <el-input v-model="changePwdRuleForm.repeat" type="password" placeholder="再次输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitChangePwd" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="个人信息" :visible.sync="userinfoDialogVisible" width="500px">
      <el-form :model="userinfoRuleForm" :rules="userinfoRules" ref="userinfoRuleForm" v-if="userinfoDialogVisible">
        <el-form-item label="用户名" required>
          <el-input v-model="userinfoRuleForm.username" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userinfoRuleForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="userinfoRuleForm.gender" placeholder="请选择" class="width_100">
            <el-option :value="0" label="女"></el-option>
            <el-option :value="1" label="男"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input v-model="userinfoRuleForm.email" placeholder="请输入邮箱地址" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="userinfoRuleForm.mobile" placeholder="请输入联系方式" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userinfoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUserinfo" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    const validateRepeat = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.changePwdRuleForm.newPassword) {
        callback(new Error("两次输入密码不一致"))
      } else {
        callback()
      }
    }
    return {
      changePwdDialogVisible: false,
      userinfoDialogVisible: false,
      btnLoading: false,
      changePwdRuleForm: {
        oldPassword: '',
        newPassword: '',
        repeat: '',
      },
      userinfoRuleForm: {},
      userinfoRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' },],
      },
      changePwdRules: {
        oldPassword: {
          required: true,
          message: '请输入旧密码'
        },
        newPassword: {
          required: true,
          message: '请输入新密码'
        },
        repeat: [{ validator: validateRepeat, trigger: 'blur', required: true }]
      }
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  mounted() {
  },
  methods: {
    resetChangePwdRuleForm() {
      this.changePwdRuleForm = {
        oldPassword: '',
        newPassword: '',
        repeat: '',
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'doLogout':
          this.$api.logout().then(response => {
            this.$router.push({ path: '/login' })
          })
          break;
        case 'changePwd':
          this.resetChangePwdRuleForm()
          this.changePwdDialogVisible = true
          break;
        case 'userinfo':
          this.userinfoRuleForm = {...this.userinfo}
          this.userinfoDialogVisible = true
          break;
      }
    },
    submitUserinfo() {
      this.$refs.userinfoRuleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$api.editUser(this.userinfoRuleForm).then(response => {
            this.$message.success('修改成功')
            this.userinfoDialogVisible = false
            this.btnLoading = false
            this.$store.commit('SET_USERINFO', this.userinfoRuleForm)
          }).catch(err => {
            this.btnLoading = false
          })
        }
      })
    },
    submitChangePwd() {
      this.$refs.changePwdRuleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$api.changePwd(this.changePwdRuleForm).then(response => {
            this.$message.success('修改成功')
            this.changePwdDialogVisible = false
            this.btnLoading = false
          }).catch(err => {
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.work-platform-user-bar {
  display: flex;
  align-items: center;
  height: 100%;

  .panel-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .user label {
    color: #fff;
  }

  .panel-item {
    padding: 0 10px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .panel-item i {
    font-size: 16px;
  }

  .panel-item:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  .user-avatar {
    height: 49px;
    display: flex;
    align-items: center;
  }

  .user-avatar label {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    cursor: pointer;
    color: #383838;
  }

  .bell-bar {
    margin-right: 10px;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    position: relative;
  }
  .bell-bar:hover {
    background-color: rgba(153, 148, 148, 0.35);
  }
  .bell-bar .el-icon-bell {
    font-size: 20px;
    z-index: 20;
  }
  .bell-bar .current-num {
    position: absolute;
    background: red;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    text-align: center;
    top: 20px;
    left: 20px;
  }
}
</style>
