<template>
    <div class="user-setting">
        <div class="row flex-center">
            <el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" class="avatar-upload">
                <el-avatar :size="72" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER" shape="square" :style="{ BackgroundColor: userTheme?.color }"></el-avatar>
                <div class="after-overlayer">上传</div>
            </el-upload>
        </div>
        <div class="q-mt-xl q-mb-md row flex-center items-center" style="height:26px;">
            <template v-if="!isEditorNickname">
                <div>{{ userInfo.nickname }}</div>
                <IconWrite :size="16" class="q-ml-md cusor-pointer" @click="()=>editorNicknameHandler(nicknameRef)"></IconWrite>
            </template>
            <input type="text" ref="nicknameRef" class="nickname" v-model="userInfo.nickname" :autofocus="true" v-show="isEditorNickname" @blur="()=>isEditorNickname=false">
        </div>
        <div class="text-small text-info text-center">用户ID:9020345764199812103</div>
        <div class="q-mt-lg setting-body rounded">
            <div class="setting-item">
                <div>
                    <div class="text-dark">手机</div>
                    <div class="">+86 173****7817</div>
                </div>
                <el-button>更换手机</el-button>
            </div>
            <div class="setting-item">
                <div>
                    <div class="text-dark">邮箱</div>
                    <div class="">绑定邮箱后，可以更方便的登录、管理稿定账号</div>
                </div>
                <el-button>立即绑定</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { nextTick } from "vue";
import { ref } from "vue";
import {USER_DEFAULT_HEADER} from '@/configs/customer'

const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
const userTheme = useUser.getUserTheme
const isEditorNickname = ref(false)
const nicknameRef=ref<HTMLElement>()

const editorNicknameHandler = (target:HTMLElement|undefined)=>{
    isEditorNickname.value=true
    
    nextTick(()=>{
        if(target){
            target.focus()
        }
    })
}
</script>

<style>
.user-setting {
    width: 848px;
    padding-bottom: 24px;
    margin: 0 auto;
}
.user-setting .avatar-upload{
    width:72px;
    height: 72px;
    position: relative;
    border-radius:8px;
    overflow: hidden;
}
.user-setting .avatar-upload .el-upload-dragger{
    padding:0px !important;
    border-radius:8px;
    height: 72px;
}
.user-setting .avatar-upload .after-overlayer{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.2);
    display: none;
    line-height: 72px;
    font-size: 16px;
    color:#FFF;
    text-align: center;
}
.user-setting .avatar-upload:hover .after-overlayer{
    display: block;
}
.user-setting .nickname{
    border:none;
    outline: none;
    padding: 5px;
    width: 180px;
    border-bottom: 1px dashed #000;
    font-size: 16px;
    font-family: pingfangr;
}
.user-setting .setting-body{
    border:1px solid rgba(0,0,0,.08)

}
.user-setting .setting-body .setting-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    font-size: 14px;
    line-height: 22px;
    color: #9da3ac;
    border-bottom:1px solid rgba(0,0,0,.08);
}
.user-setting .setting-body .setting-item:last-child{
    border: none;
}
</style>