<template>
  <el-dropdown popper-class="custom-dropdown-popper">
    <div class="user-content">
      <img :src="userData.portrait" class="head-portrait" />
      <span class="user-name">{{ userData.name }}</span>
      <el-icon class="color-#ccc">
        <icon-ep-arrow-down />
      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu class="user-dropdown">
        <el-dropdown-item @click="openInfoDialog" class="menu-item">
          <el-icon><icon-ep-user /></el-icon>
          个人信息
        </el-dropdown-item>
        <el-dropdown-item @click="openPwdDialog" class="menu-item">
          <el-icon><icon-ep-key /></el-icon>
          修改密码
        </el-dropdown-item>
        <el-dropdown-item @click="lockScreen" class="menu-item">
          <el-icon><icon-ep-lock /></el-icon>
          锁定屏幕
        </el-dropdown-item>
        <el-dropdown-item @click="logoutSystem()" class="menu-item">
          <el-icon><icon-ep-switch-button /></el-icon>
          退出系统
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-dialog title="修改密码" :close-on-click-modal="false" append-to-body v-model="pwdDialogVisible" width="600px" v-if="pwdDialogVisible">
    <el-form :model="pwdData" ref="pwdRef" label-width="100px" label-position="right">
      <el-form-item label="原密码：" prop="oldPassword" :rules="[required]">
        <el-input show-password v-model="pwdData.oldPassword" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword" :rules="pwdRule">
        <el-input show-password v-model="pwdData.newPassword" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirmPassword" :rules="pwdRule">
        <el-input show-password v-model="pwdData.confirmPassword" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="pwdDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="modifyPwdSubmit" :loading="loading">确定</el-button>
    </template>
  </el-dialog>
  <InfoDialog ref="infoRef" :data="userData"></InfoDialog>
</template>
<script>
import crypto from 'utils/crypto.js'
import { changePassword } from '@/services/manager'
import { logout } from 'services'
import InfoDialog from './InfoDialog.vue'
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { required, complexPassword } from '@/validate'
import useTokenAndLock from './useTokenAndLock'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  components: {
    InfoDialog
  },
  setup(props, context) {
    const store = useStore()

    // 密码修改
    const pwdData = ref({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    const pwdDialogVisible = ref(false)
    function openPwdDialog() {
      pwdDialogVisible.value = true
      pwdData.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
    function checkPassword() {
      const { newPassword, oldPassword, confirmPassword } = pwdData.value
      if (newPassword === oldPassword) {
        ElMessage.error('新密码不能与原密码相同')
        return false
      }
      if (confirmPassword !== newPassword) {
        ElMessage.error('确认密码与新密码不一致')
        return false
      }

      return true
    }
    const pwdRef = ref()
    const loading = ref(false)
    async function modifyPwdSubmit() {
      const { validate } = pwdRef.value || context.refs.pwdRef
      validate(async () => {
        if (!checkPassword()) return
        loading.value = true
        const res = await changePassword(userData.value.id, {
          password: crypto.encrypt(pwdData.value.newPassword),
          oldPassword: crypto.encrypt(pwdData.value.oldPassword)
        })
        if (res.success) {
          pwdDialogVisible.value = false
          ElMessage.success(res.message)
          store.dispatch('permission/ResetRoutes')
        }
        loading.value = false
      })
    }
    const userData = computed(() => store.getters.userData || {})
    const pwdRule = computed(() => {
      const rule = store.state.app.systemConfig.pwdStrength
      if (rule === 'required') return [required]
      return [required, complexPassword]
    })
    // 登出
    function logoutSystem() {
      ElMessageBox.confirm('您确定要退出该系统吗?', '提示', {
        type: 'warning'
      }).then(async () => {
        const res = await logout()
        if (res.success) {
          store.dispatch('permission/ResetRoutes')
        }
      })
    }
    // 个人信息
    const infoRef = ref()
    function openInfoDialog() {
      infoRef.value.open()
    }
    const { lockScreen } = useTokenAndLock()
    return {
      loading,
      pwdData,
      pwdDialogVisible,
      pwdRef,
      pwdRule,
      openPwdDialog,
      modifyPwdSubmit,
      logoutSystem,
      infoRef,
      openInfoDialog,
      userData,
      required,
      lockScreen
    }
  }
})
</script>
<style lang="scss" scoped>
.user-content {
  margin-right: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .head-portrait {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
}
.user-name {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  margin: 0 2px 0 5px;
  color: #303133;
}
.user-dropdown {
  // background: #2c2e3b;
  // border-color: #2c2e3b;
  color: #303133;
  :deep(.menu-item) {
    color: #303133;
    &:hover {
      background: #f2f3f5 !important;
      color: #3570ee;
    }
  }
}
</style>
