<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <el-avatar :src="avatar"></el-avatar>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退 出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import store from '@/store'

const { useModel } = store

export default {
  setup(props) {
    const { user, logout } = useModel('user')
    const route = useRoute()
    const router = useRouter()

    const avatar = computed(() => {
      return user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    })

    const handleCommand = command => {
      if (command === 'logout') {
        logout().then(() => {
          router.push({
            name: 'login',
            query: {from: encodeURIComponent(route.path)}
          })
        })
      }
    }

    return {
      user,
      avatar,
      handleCommand
    }
  }
}
</script>

<style lang="less" scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
