<script setup>
import {ref,reactive} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {apiSetUserInfo} from '@/api/user'
import { ElMessage } from 'element-plus'
import CryptoJS from '@/api/crypto'


const router=useRouter()
const store=useStore()
const apiUploadUrl=import.meta.env.VITE_APP_API_URL+'/public/upload'

const formRules=ref(null)

const rules=reactive({
    avatar:[{required: true,message: '请上传头像',trigger: 'change'}],
    nickname:[{required: true,message: '请填写昵称',trigger: 'blur'}]
})
const defaultAvatar=new URL('../../assets/icon-upload.png',import.meta.url).href

const formData = reactive({
    avatar:store.state.userInfo.head_img_url,
    nickname:store.state.userInfo.nick_name
})

const handleAvatarSuccess=(e)=>{
    let res
    if(import.meta.env.MODE==='production'){
        res=JSON.parse(CryptoJS.Des3Decrypt(e))
    }else{
        res=e
    }
    if(res.code===200){
        formData.avatar=res.data
    }
}

const handleSave=()=>{
    formRules.value.validate((valid)=>{
        if(valid){
            apiSetUserInfo({
                nick_name:formData.nickname,
                head_img_url:formData.avatar
            }).then(res=>{
                if(res.code===200){
                    ElMessage.success('设置成功')
                    store.dispatch('getUserInfo')
                    setTimeout(() => {
                        router.back()
                    }, 1000);
                }
            })
        }
    })
}

</script>

<template>
    <div class="set-userinfo-page">
        <el-form ref="formRules" :rules="rules" :model="formData" label-width="120px">
            <el-form-item label="头像" prop="avatar">
                <el-upload
                    :headers="{Authorization:$store.state.token}"
                    :action="apiUploadUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                >
                    <div class="avatar-wrap">
                        <div class="avatar-box">
                            <img :src="formData.avatar||defaultAvatar" class="avatar" />
                        </div>
                        <p style="color:#999">点击选择本地图片进行替换</p>
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input style="width:300px" v-model="formData.nickname" placeholder="请填写昵称" />
            </el-form-item>
            <div style="margin-top:140px">
                <div class="global-main-btn btn" @click="handleSave">保存</div>
                <div class="global-plain-btn btn" @click="$router.back()">取消</div>
            </div>
        </el-form>
    </div>  
</template>

<style lang="scss" scoped>
.set-userinfo-page{
    .avatar-wrap{
        text-align:left;
        p{
            margin-top:20px;
        }
    }
    .avatar-box{
         position:relative;
         width:95px;
        height:95px;
        &::after{
                content:'';
                display:block;
                position:absolute;
                width:23px;
                height:23px;
                background-image:url('@/assets/icon-camera.png');
                background-size:cover;
                bottom:-11px;
                right:-11px;
                z-index:2;
        }
        .avatar{
            width:95px;
            height:95px;
            border-radius:4px;
        }
    }
    .btn{
        width:218px;
        margin:20px auto 0 auto;
    }
}
</style>