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

const userForm=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem('user_info')):{}

</script>

<template>
  <div class="user-container" id="user-container">
    <div class="fixed-header">
      <span @click="$router.replace('/')" style="cursor: pointer;">
        HORIZON INSIGHTS
      </span>
    </div>
    <div class="user-info-box">
      <img src="@/assets/icons/avatar.svg" class="user-avatar">
      <div class="user-info">
        <el-form :model="userForm" id="mobile-form-field" label-position="top">
          <el-form-item label="User Name" size="large">
            {{ userForm.Name }}
          </el-form-item>
          <el-form-item label="Email Address" size="large">
            {{ userForm.Email }}
          </el-form-item>
          <el-form-item label="Mobile Phone No" size="large">
            <div class="phone-form-item" @click="bindPhone">
              <template v-if="!userForm.Mobile">
                <img src="@/assets/icons/add-square.svg" style="height: 16px;margin-right: 8px;">
                <span>Add a phone number to your account</span>
              </template>
              <template v-else>
                +{{ userForm.CountryCode+' '+userForm.Mobile }}
                <img src="@/assets/icons/edit.svg" style="height: 16px;margin-left: 20px;">
              </template>
            </div>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="form-button" size="large" @click="loginOut">Sign out</el-button>
        <el-button class="form-button" size="large" style="margin-left: 0;" @click="passwordChange">Update password</el-button>
      </div>
    </div>
  </div>
</template>
  
<style lang="scss" scoped>
  .user-container{
    padding: 50px 30px 30px;
    .user-info-box{
      padding-top: 50px;
      text-align: center;
      .user-avatar{
        height: 60px;
      }
      .user-info{
        margin-top: 20px;
        .phone-form-item{
          display: flex;
          align-items: center;
          span{
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #1856A7;
          }
        }
        .form-button{
          width: 100%;
          margin-top: 20px;
        }
      }
    }
  }
</style>
<style lang="scss">
.user-container{
  .el-form-item__label{
    padding: 0;
    margin-right: 14px;
    color: #333333;
  }
  .el-form-item__content{
    color: #333333;
  }
}
</style>