<script setup>
import {bindPhone,loginOut,passwordChange,signUp} from '@/utils/common.js'

const props=defineProps({
  userInfo:{}
})

const yb_token = localStorage.getItem('yben_token')
</script>

<template>
  <el-popover
  popper-class="user-info-popper"
  placement="top-start"
  trigger="click">
    <template #reference>
        <div class="user-info-hover">
            <img src="@/assets/icons/avatar.svg" />
            <span>{{userInfo.Name||''}}</span>
        </div>
    </template>
    <div class="user-info-message" v-if="yb_token">
        <div class="user-info-item">User Name：<span><span>{{userInfo.Name}}</span></span></div>
        <div class="user-info-item">Email Address：<span>{{userInfo.Email}}</span></div>
        <div class="user-info-item">Mobile Phone No：
            <span style="display: inline-flex;align-items: center;" v-if="userInfo.Mobile" @click="bindPhone">
                <span>+{{ userInfo.CountryCode+' '+userInfo.Mobile }}</span>
                <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" />
            </span>
            <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
            @click="bindPhone" v-else>
                <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
                <span>Add a phone number to your account</span>
            </span>
        </div>
        <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
            <el-button type="primary" @click="loginOut" size="large" style="min-width: 100px;background-color:#1856A7 ;">Sign out</el-button>
            <el-button plain @click="passwordChange" size="large" style="min-width: 100px;padding: 12px;">Update password</el-button>
        </div>
    </div>
    <div class="user-info-message" v-else>
        <div class="user-info-item">Please log in/sign up first</div>
        <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
            <el-button type="primary" @click="loginOut" size="large" style="min-width: 100px;background-color:#1856A7 ;">Log In</el-button>
            <el-button plain @click="signUp" size="large" style="min-width: 100px;padding: 12px;">Sign Up</el-button>
        </div>
    </div>
  </el-popover>
</template>
  
<style lang="scss">
  .user-info-popper{
    width: unset!important;
    .user-info-message{
        padding: 28px;
        .user-info-item{
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
    }
  }
</style>
<style lang="scss" scoped>

.user-info-hover{
  display: flex;
  align-items: center;
  img{
      height: 30px;
      width: 30px;
      margin-right: 10px;
  }
  span{
      font-weight: 500;
      font-size: 16px;
      line-height: 18px;
      color: #666666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 130px;
  }
}
</style>