<template>
    <div :class="bem()">
        <Popover
            tag="div"
            v-if="isLogined"
            :arrow="false"
            placement="bottom-end">
            <div :class="bem('nick')">
                <div :class="bem('username')"><slot/></div>
                <Icon name="triangle-down"/>
            </div>
            <div slot="content">
                <div role="ul" :class="bem('menus')">
                    <GdLink url="/me/templets" :class="bem('menu')">作图记录</GdLink>
                    <GdLink url="/me/collection-templets" :class="bem('menu')">收藏夹</GdLink>
                    <div :class="bem('menu')" @click="goUserPreference">偏好设置</div>
                    <div :class="bem('menu')" @click="logout">退出</div>
                </div>
            </div>
        </Popover>
        <Button
            v-else
            type="text"
            @click="login">登录/注册</Button>
    </div>
</template>

<script>
import Button from '../Button';
import Popover from '../Popover';
import Icon from '../Icon';
import GdLink from './Link';
import UserPreference from '../UserPreference/index.js';

import { REQUEST_URL } from '../_utils/constant.js';
import { componentMixin, createComponentName } from '../_utils/component.js';
export default {
    name: createComponentName('header-user'),
    components: {
        Popover,
        Icon,
        Button,
        GdLink
    },
    mixins: [componentMixin],
    props: {
        isLogined: {
            type: Boolean,
            default: false,
        },
        // 触发退出
        logout: {
            type: Function,
            required: true,
        },
        // 触发登录
        login: {
            type: Function,
            required: true,
        },
        user: {
            type: Object
        }
    },
    beforeCreate() {
        this.url = REQUEST_URL;
    },
    methods: {
        goUserPreference() {
            if (this.user) {
                UserPreference.open({
                    visible: true,
                    user: this.user,
                    on: {
                        success: () => {
                            setTimeout(() => {
                                location.reload();
                            }, 300);
                        }
                    }
                });
            }
        }
    },
};
</script>

<style lang="less">
@import "../_styles/base.less";

@b: ~"@{prefix}-header-user";

.@{b} {
  height: 66px;
  display: flex;
  align-items: center;
  cursor: default;
  flex: 0 0 auto;
  overflow: hidden;

  & &__nick {
    height: 66px;
    display: flex;
    align-items: center;
  }

  & .@{button}--text {
    color: #000000;
  }


  &__username > *,
  & &__username {
    max-width: 98px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }


  .@{icon} {
      margin: 0 @margin-xsm;
      flex: 0 0 auto;
  }
}

.@{b}__menus {
  padding: 8px 0;
  width: 160px;

  & .@{b}__menu {
    padding: @margin-sm - 2  @margin-xlg - 6;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    display: block;

    &:hover {
      background: @color-stroke;
      color: @color-primary;
    }
  }

//   .@{b}__menu + .@{b}__menu {
//     // margin-top: @margin-sm;
//   }
}
</style>

