<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" shape="square" class="bg-transparent"></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 class="setting-item">
                <div>
                    <div class="text-dark">微信</div>
                    <div class="">已绑定</div>
                </div>
                <el-button>解出绑定</el-button>
            </div>
            <div class="setting-item">
                <div>
                    <div class="text-dark">QQ</div>
                    <div class="">绑定QQ后，可以通过QQ授权登录</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 class="q-mt-lg setting-body rounded">
            <div class="setting-item">
                <div>
                    <div class="text-dark">推送内容</div>
                    <div class="">开启后，我们将会通过服务邮箱或微信公众号向你推送最新的功能更新与模板更新。</div>
                </div>
                <el-switch v-model="pushAdStatus" />
            </div>
        </div>
    </div>
</template>

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

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

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>