<template>
  <span>
    <a-dropdown :class="$style.userinfowrap">
      <div>
        <a-avatar
          :class="$style.userinfo"
          icon="user"
          :src="`api/framework/v1/user-manager/userAvatar/${userInfo.account}` | sdResource"
          alt="avatar"
        />
        {{ userInfo.name }}
        <a-icon type="down" />
      </div>
      <a-menu slot="overlay">
        <a-menu-item class="sd-change-theme" @click="showDrawer">
          <a-icon type="skin" />
          换肤
        </a-menu-item>
        <a-menu-item @click="$router.push('/sd-frame/sd-account-info')">
          <a-icon type="user" />个人中心
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item @click="logout"> <a-icon type="logout" />退出登录 </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-drawer
      title="主题色"
      placement="right"
      :closable="false"
      :visible="visible"
      :class="$style.themeWrapper"
      @close="onClose"
    >
      <div
        v-for="(theme, index) in themes"
        :key="index"
        :class="$style.theme"
        @click="changeTheme(theme)"
      >
        <div :style="{ backgroundColor: theme.color }">
          <a-icon v-show="theme.color === currentTheme" type="check" :class="$style.selected" />
        </div>
        <div>{{ theme.name }}</div>
      </div>
    </a-drawer>
  </span>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import loginService from '@/login/login-service'
import { sdLocalStorage } from '../services/storage-service'
import components from './_import-components/sd-header-user-action-import'
/**
 * 框架通用header,默认带渐变色和logo
 * @displayName SdHeaderUserAction 用于header
 * @since 8.0.12
 */
export default {
  name: 'SdHeaderUserAction',
  components,
  mixins: [storeMixin],
  data() {
    return {
      visible: false,
      themes: [
        {
          name: '幕黑',
          color: '#333',
        },
        {
          name: '姹紫',
          color: '#673AB7',
        },
        {
          name: '海蓝',
          color: '#1890FF',
        },
        {
          name: '光绿',
          color: '#87B94B',
        },
        {
          name: '焰红',
          color: '#F04134',
        },
        {
          name: '缤橙',
          color: '#F4AA16',
        },
      ],
      currentTheme: '#1890FF',
    }
  },
  mounted() {
    const theme = JSON.parse(sdLocalStorage.getItem('theme') || '{}')
    if (theme.color) {
      this.changeTheme(theme)
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    logout() {
      loginService.doLogout()
    },
    onClose() {
      this.visible = false
    },
    changeTheme(theme) {
      sdLocalStorage.setItem('theme', JSON.stringify(theme))
      this.currentTheme = theme.color
      const oldThemeStyle = document.getElementById('theme-style')
      const style = document.createElement('style')
      style.id = 'theme-style'
      style.type = 'text/css'
      style.innerText = `.header_sd-header_common.ant-layout-header{background-image: linear-gradient(90deg, ${
        this.currentTheme
      } 0%, ${
        this.currentTheme === '#1890FF' ? '#0162EB ' : this.currentTheme
      } 100%)} .ant-menu.ant-menu-dark .ant-menu-item-selected{background-color:${
        this.currentTheme
      }}`
      if (oldThemeStyle) {
        document.head.removeChild(oldThemeStyle)
      }
      document.head.appendChild(style)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$link-icon-size: 22px;
$line-height-theme: 66px;
$theme-check: #fff;
$icon-size: 15px;
.userinfowrap {
  display: inline-block;
  padding-right: 10px;
  cursor: pointer;
  &:hover {
    // 悬浮的颜色，与主题无关
    /* stylelint-disable-next-line */
    background-color: rgba(0, 0, 0, 0.2);
  }
  span {
    margin: 0 10px;
  }
}
.theme-wrapper {
  :global(.ant-drawer-body) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
  }
  .theme {
    width: 66px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .theme div:first-child {
    width: 100%;
    height: 66px;
    margin-bottom: 5px;
    font-size: $font-size-lg;
    line-height: $line-height-theme;
    color: $theme-check;
    text-align: center;
    border-radius: 5px;
  }
  .theme div:last-child {
    text-align: center;
  }
}
// 换肤菜单默认隐藏
/*:global(.sd-change-theme) {
  display: none;
}*/
</style>

<docs>

```vue
<sd-header ><sd-header-user-action /><a-button type="link">通用</a-button></sd-header>
```
</docs>
