<!-- 个人资料页面 -->

<template>
    <div class="box">

        <!-- 头部区域 -->
        <div class="box-top">

            <div class="box-top-left">
                <!-- 头像 -->
                <el-upload class="avatar-uploader" action="http://106.55.102.172:8010/user/upload"
                    :show-file-list="false" :on-success="act_handleAvatarSuccess"
                    :before-upload="act_beforeAvatarUpload" :data="{ directory: 'VRONE-IMG' }">
                    <img v-if="g_userStore.userInfo.user.avatar" :src="g_userStore.userInfo.user.avatar" class="avatar"
                        style="width: 180px;height: 180px;" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>

                <!-- 用户信息 -->
                <div class="box-top-userData">
                    <p>账号：{{ g_userStore.userInfo.user.userName }}</p>
                    <p>手机号：{{ g_userStore.userInfo.user.phone }}</p>
                </div>
            </div>

            <div class="box-top-right">

                <div class="wallet">
                    <p>账户余额</p>
                    <h1>￥{{ g_userStore.userInfo.user.money }}</h1>
                    <el-button type="warning" @click="act_recharge">充值</el-button>
                </div>

            </div>
        </div>

        <!-- 内容区域 -->
        <div class="box_content">
            <div class="box-contnent-item">
                <div class="box-contnent-item-left">
                    <svg t="1715263789314" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5344" width="80" height="80">
                        <path
                            d="M983.757 313.037a509.542 509.542 0 0 0-109.67-162.611A510.106 510.106 0 0 0 512.306 0.512a509.542 509.542 0 0 0-361.779 149.914A510.106 510.106 0 0 0 0.666 512.154a509.952 509.952 0 0 0 149.862 361.728 510.106 510.106 0 0 0 361.78 149.862 509.542 509.542 0 0 0 361.778-149.862A510.106 510.106 0 0 0 1024 512.205a508.774 508.774 0 0 0-40.192-199.168zM512.358 968.704c-251.75 0-456.55-204.8-456.55-456.55s204.8-456.5 456.55-456.5c251.7 0 456.5 204.8 456.5 456.5s-204.8 456.55-456.5 456.55zM773.786 381.44c0-5.069-1.28-8.806-1.28-12.544L613.17 512.102 771.38 655.31c1.28-3.738 1.28-7.475 1.28-12.544V381.44h1.127zM512.307 560.589l241.664-224.051c-8.806-6.144-19.865-9.933-36.147-9.933H306.79c-15.001 0-26.214 3.737-36.147 11.264l241.664 222.72z m74.701-22.272l-61.03 61.03a18.842 18.842 0 0 1-13.67 5.069 18.893 18.893 0 0 1-13.671-5.12l-61.03-60.98-165.684 149.402c8.807 6.144 19.866 9.882 34.816 9.882h410.88c15.002 0 26.215-3.738 34.816-9.882L587.008 538.317zM253.184 368.896a35.533 35.533 0 0 0-2.406 12.544v261.53c0 5.017 1.33 8.806 1.33 12.544l159.284-143.207-158.208-143.36z"
                            p-id="5345"></path>
                    </svg>
                </div>
                <div class="box-contnent-item-right">
                    <p>我的邮箱</p>
                    <p v-if="g_userStore.userInfo.user.email">{{ g_userStore.userInfo.user.email }}</p>
                    <p v-else>绑定邮箱后可使用邮箱登录</p>
                    <div class="box-contnent-item-funBox">
                        <el-button type="primary" v-if="g_userStore.userInfo.user.email"
                            @click="act_updateMail">修改</el-button>
                        <el-button type="primary" v-else @click="act_updateMail">绑定</el-button>
                    </div>
                </div>
            </div>

            <!-- <div class="box-contnent-item">
                <div class="box-contnent-item-left">
                    <svg t="1715263919672" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4373" width="80" height="80">
                        <path
                            d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32z m96 736H416a64 64 0 0 1-64-64V320a64 64 0 0 1 64-64h192a64 64 0 0 1 64 64v384a64 64 0 0 1-64 64z m32-448a32 32 0 0 0-32-32H416a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32V320z m-80 32h-96a16 16 0 0 1 0-32h96a16 16 0 0 1 0 32z m-48 256a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m0 64a16 16 0 1 0-16-16 16 16 0 0 0 16 16z"
                            fill="#2c2c2c" p-id="4374"></path>
                    </svg>
                </div>
                <div class="box-contnent-item-right">
                    <p>我的手机</p>
                    <p v-if="g_userStore.userInfo.user.phone">{{ g_userStore.userInfo.user.phone }}</p>
                    <p v-else>绑定手机后可使用手机号登录</p>
                    <div class="box-contnent-item-funBox">
                        <el-button type="info" v-if="g_userStore.userInfo.user.phone">已绑定</el-button>
                        <el-button type="primary" v-else @click="act_updatePhone">绑定</el-button>
                    </div>
                </div>
            </div> -->

            <div class="box-contnent-item">
                <div class="box-contnent-item-left">
                    <svg t="1715264273038" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6181" width="80" height="80">
                        <path
                            d="M780.8 354.579692H665.6v-42.979692c0-121.929846-99.090462-219.430154-221.020154-219.430154S223.559877 189.670154 223.559877 311.6v42.979692H108.359877c-24.615385 0-44.359877 19.744615-44.359877 44.359846v531.692308c0 24.615385 19.744615 44.359846 44.359877 44.359846h672.44015c24.615385 0 44.359846-19.744615 44.359846-44.359846V398.939538c0-24.615385-19.744615-44.359846-44.359873-44.359846zM311.559877 311.6c0-73.157538 59.862154-133.020154 133.020146-133.020154s133.020154 59.862615 133.020154 133.020154v42.979692H311.559877V311.6zm424.44015 574.31c0 8.205128-6.595128 14.800246-14.800246 14.800246H108.359877c-8.205128 0-14.800246-6.595118-14.800246-14.800246V398.939538c0-8.205128 6.595118-14.800246 14.800246-14.800246h672.44015c8.205118 0 14.800246 6.595118 14.800246 14.800246v486.970462z"
                            p-id="6182"></path>
                        <path
                            d="M444.579892 541.538462c0-24.615385-19.744615-44.359846-44.359877-44.359847s-44.359846 19.744615-44.359846 44.359847c0 17.083077 9.671877 31.852308 23.670154 39.403077v101.156923c0 11.421538 9.267692 20.689231 20.689692 20.689231s20.689231-9.267692 20.689231-20.689231V580.941538c13.998277-7.550769 23.670154-22.319877 23.670646-39.403076z m173.292308 0c0-24.615385-19.744615-44.359846-44.359877-44.359847s-44.359846 19.744615-44.359846 44.359847c0 17.083077 9.671877 31.852308 23.670154 39.403077v101.156923c0 11.421538 9.267692 20.689231 20.689692 20.689231s20.689231-9.267692 20.689231-20.689231V580.941538c13.998277-7.550769 23.670154-22.319877 23.670646-39.403076z"
                            p-id="6183"></path>
                    </svg>
                </div>
                <div class="box-contnent-item-right">
                    <p>修改密码</p>
                    <p>定期修改密码可以保护账号安全</p>
                    <div class="box-contnent-item-funBox">
                        <el-button type="primary" @click="act_showPasswordDialog">修改</el-button>
                    </div>
                </div>
            </div>

            <div class="box-contnent-item">
                <div class="box-contnent-item-left">
                    <svg t="1715264273038" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6181" width="80" height="80">
                        <path
                            d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32z m96 736H416a64 64 0 0 1-64-64V320a64 64 0 0 1 64-64h192a64 64 0 0 1 64 64v384a64 64 0 0 1-64 64z m32-448a32 32 0 0 0-32-32H416a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32V320z m-80 32h-96a16 16 0 0 1 0-32h96a16 16 0 0 1 0 32z m-48 256a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m0 64a16 16 0 1 0-16-16 16 16 0 0 0 16 16z"
                            fill="#2c2c2c" p-id="4374"></path>
                    </svg>
                </div>
                <div class="box-contnent-item-right">
                    <p>实名认证</p>
                    <p>根据国家法律政策实名认证</p>
                    <div class="box-contnent-item-funBox">
                        <el-button type="info">已实名</el-button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 添加密码修改对话框 -->
    <el-dialog v-model="g_passwordDialogVisible" title="修改密码" width="500px" :close-on-click-modal="false">
        <el-form :model="g_passwordForm" :rules="g_passwordRules" ref="g_passwordFormRef" label-width="100px">
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="g_passwordForm.newPassword" type="password" placeholder="请输入新密码" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="g_passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码"
                    show-password />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="g_passwordDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="act_submitPasswordForm">确定</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore } from "@/store/index";
import { recharge, updateEmail, updatePassword, updateAvatar, getUserInfo } from '@/http/api/pages/User/index'

/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取 Pinia 实例
const g_userStore = useUserStore();


// 头像
const g_imageUrl = ref('');

// 密码修改相关变量
const g_passwordDialogVisible = ref(false);
const g_passwordFormRef = ref(null);
const g_passwordForm = reactive({
    newPassword: '',
    confirmPassword: ''
});

const g_passwordRules = {
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== g_passwordForm.newPassword) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
};


/************************************************
 * 生命周期函数
 ************************************************/



/************************************************
* 事件处理
*
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/

// 头像上传成功
const act_handleAvatarSuccess = (response, uploadFile) => {
    console.log(response, uploadFile);
    if (response.code == 200) {
        var url = response.data.url;
        if (url.indexOf('http') == -1) {
            url = 'https://' + url;
        }
        updateAvatar({
            id: Number(g_userStore.userInfo.user.id),
            avatar: url,
        }).then(response => {
            if (response.code == 200) {
                act_refreshUserInfo(() => ElMessageBox.alert(`头像上传成功！`, ''));
            } else {
                ElMessageBox.alert('头像上传失败！' + (response.msg || '请稍后重试'));
            }
        })
    } else {
        ElMessage.error('头像上传失败！' + (response.msg || '请稍后重试'));
    }
}

// 上传图片
const act_beforeAvatarUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('头像图片必须是JPG格式!')

        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('头像图片大小不能超过2MB!')
        return false
    }
    return true
}

const act_recharge = () => {
    ElMessageBox.prompt('请输入要充值的金额', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern:
        //     /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '错误金额',
    }).then(({ value }) => {
        recharge({
            userId: Number(g_userStore.userInfo.user.id),
            paymentMethod: Number(1),
            recharge: Number(value),
        }).then(response => {
            if (response.code == 200) {
                act_refreshUserInfo(() => ElMessageBox.alert(`充值成功！充值金额：${value} 元`, ''));
            } else {
                ElMessageBox.alert(`充值失败！请稍候再试！`, '')
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '充值取消',
        })
    })
}

const act_updateMail = () => {
    ElMessageBox.prompt('请输入邮箱', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(({ value }) => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(value)) {
            ElMessage.error(`邮箱填写格式错误！`);
            return;
        }

        updateEmail({
            id: Number(g_userStore.userInfo.user.id),
            email: value,
        }).then(response => {
            if (response.code == 200) {
                act_refreshUserInfo(() => ElMessageBox.alert(`更新成功！`, ''));
            } else {
                ElMessageBox.alert(`更新失败！请稍候再试！`, '')
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '更新取消',
        })
    })
}

const act_updatePhone = () => {
    ElMessageBox.prompt('请输入手机号', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(({ value }) => {
        update({
            id: Number(g_userStore.userInfo.user.id),
            phone: value,
        }).then(response => {
            if (response.code == 200) {
                act_refreshUserInfo(() => ElMessageBox.alert(`更新成功！`, ''));
            } else {
                ElMessageBox.alert(`更新失败！请稍候再试！`, '')
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '更新取消',
        })
    })
}

const act_showPasswordDialog = () => {
    g_passwordDialogVisible.value = true;
    // 重置表单
    g_passwordForm.newPassword = '';
    g_passwordForm.confirmPassword = '';
};

const act_submitPasswordForm = () => {
    g_passwordFormRef.value.validate((valid) => {
        if (valid) {
            updatePassword({
                id: Number(g_userStore.userInfo.user.id),
                password: g_passwordForm.newPassword
            }).then(response => {
                if (response.code == 200) {
                    ElMessage.success('密码修改成功！');
                    g_passwordDialogVisible.value = false;
                    // 可以选择是否要求用户重新登录
                    // g_userStore.clearProfile();
                    // window.location.href = "/login";
                } else {
                    ElMessage.error('密码修改失败！' + (response.msg || '请稍后重试'));
                }
            }).catch(error => {
                ElMessage.error('密码修改失败！' + error.message);
            });
        }
    });
};

const act_refreshUserInfo = (callback) => {
    getUserInfo(g_userStore.userInfo.user.id)
        .then(response => {
            if (response.code == 200) {
                g_userStore.setUserInfo(response.data);
                callback && callback();
            } else {
                ElMessage({
                    type: 'warn',
                    message: '用户信息更新失败！请退出重试！',
                })
                g_userStore.clearProfile();
                window.location.href = "/login";
            }
        })
}

</script>

<style scoped>
.box {
    flex: 1;
    padding: 8PX;
    background-color: rgb(240, 240, 240);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.box-top {
    margin-bottom: 16px;
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    grid-gap: 10px;
    align-content: flex-start;
}

.box-top-left {
    flex: 1;
    margin-left: 16px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}

.box-top-userData {
    margin: 0px 16px;
}

.box-top-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wallet {
    width: 300px;
    height: 200px;
    background-color: rgb(255 251 216);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.box_content {
    flex: 1;
    padding: 16px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.box-contnent-item {
    width: 350px;
    height: 150px;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 2px solid rgb(216 216 216);
    border-radius: 8px;
}

.box-contnent-item-left {
    width: 100px;
    height: 100px;
    margin: 0px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    background-color: rgb(210, 210, 210);
}
</style>