<script setup>
import {defineAsyncComponent, ref} from "vue";
import Right from "../../static/icons/right.png";
import Avatar from "../../static/images/Avatar.png";
import XNav from "../../components/XNav.vue";
import {useUserStore} from "../../pinia/UserStore/index.js";
import {onShow} from "@dcloudio/uni-app";
import {showToast, uploadFile} from "../../utils/uils.js";
import Api from "../../api/index.js";

// #ifdef APP-PLUS
import EditNickName from './components/EditNickName.vue';
import EditWxCode from './components/EditWxCode.vue';
import EditPhone from './components/EditPhone.vue';
import EditPassWord from './components/EditPassWord.vue';
// #endif

// #ifndef APP-PLUS
const EditNickName = defineAsyncComponent(() => import('./components/EditNickName.vue'));
const EditWxCode = defineAsyncComponent(() => import('./components/EditWxCode.vue'));
const EditPhone = defineAsyncComponent(() => import('./components/EditPhone.vue'));
const EditPassWord = defineAsyncComponent(() => import('./components/EditPassWord.vue'));
// #endif

const UserStore = useUserStore();

const showTool = ref(false);
const tool = ref('EditWxCode');
const tools = [
    {
        key: 'EditNickName',
        component: EditNickName,
    },
    {
        key: 'EditWxCode',
        component: EditWxCode,
    },
    {
        key: 'EditPhone',
        component: EditPhone,
    },
    {
        key: 'EditPassWord',
        component: EditPassWord,
    }
];

const openTools = (key) => {
    tool.value = key;
    showTool.value = true;
}

onShow(() => {
    UserStore.getUserInfo();
})

const updateAvatar = async () => {
    const [res] = await uploadFile({count: 1});
    const {data} = res;
    const {msg} = await Api.system.saveInfo({avatar: data});
    showToast(msg);
    await UserStore.getUserInfo();
}
</script>

<template>
    <!--编辑信息-->
    <x-nav></x-nav>

    <view class="bg-[#fff] !mt-[20rpx]">
        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="updateAvatar">
            <view class="title">头像</view>
            <image class="!size-[64rpx] !ml-auto rounded-[50%]" mode="aspectFill"
                   :src="UserStore?.userInfo?.avatar"></image>
            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
        </view>
        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditNickName')">
            <view class="title">昵称</view>
            <view class="!ml-auto whitespace-nowrap value">{{ UserStore?.userInfo?.nickname }}</view>
            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
        </view>
        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
    </view>

    <view class="bg-[#fff] !mt-[20rpx]">
        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditPhone')">
            <view class="title">手机号</view>
            <view class="!ml-auto whitespace-nowrap value">{{ UserStore?.userInfo?.mobile }}</view>
            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
        </view>
        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditWxCode')">
            <view class="title">微信号</view>
            <view class="!ml-auto whitespace-nowrap value">{{ UserStore?.userInfo?.wechat }}</view>
            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
        </view>
        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditPassWord')">
            <view class="title">登录密码</view>
            <view class="!ml-auto whitespace-nowrap value">**********</view>
            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
        </view>
        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
    </view>

    <view class="bg-[#fff] !mt-[20rpx] !flex justify-center items-center py-3" @click="UserStore.logout">
        退出登录
    </view>

    <component :is="tools.find(v=>v.key===tool).component" v-model:show="showTool"></component>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0;
}

.value {
    color: rgb(134, 144, 156);
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0;
}
</style>
