<template>
    <view class="main">
        <view class="contentBox">
            <view class="contentItem">
                <view class="itemLeft">头像</view>
                <view class="itemRight">
                    <view class="rightImgBox">
                        <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                            <image class="headerImg" :src="WXProfile ||
                                (userInfo && userInfo.MEMBERSHIP_HEADIMAGEURL
                                    ? userInfo.MEMBERSHIP_HEADIMAGEURL
                                    : '')
                                " />
                        </button>
                    </view>
                </view>
            </view>

            <view class="contentItem">
                <view class="itemLeft">昵称</view>
                <view class="itemRight">
                    <view class="phoneBox">
                        {{ userInfo.MEMBERSHIP_NAME }}
                    </view>
                </view>
            </view>

            <view class="contentItem">
                <view class="itemLeft">手机号码</view>
                <view class="itemRight">
                    <view class="phoneBox">
                        {{ phone }}
                    </view>
                </view>
            </view>

            <view class="contentItem" @click="handleChangePhone">
                <view class="itemLeft">切换账号</view>
                <view class="itemRight">
                    <view class="rightGoBox">
                        <text class="goText">点击切换</text>
                        <image class="goIcon" src="/static/images/home/rightArrow.svg" />
                    </view>
                </view>
            </view>

            <view class="contentItem" @click="handleGoAddress">
                <view class="itemLeft">地址管理</view>
                <view class="itemRight">
                    <view class="rightGoBox">
                        <text class="goText">点击跳转</text>
                        <image class="goIcon" src="/static/images/home/rightArrow.svg" />
                    </view>
                </view>
            </view>

            <view class="contentItem" @click="handleGoFavoriteStore">
                <view class="itemLeft">我的收藏</view>
                <view class="itemRight">
                    <view class="rightGoBox">
                        <text class="goText">点击跳转</text>
                        <image class="goIcon" src="/static/images/home/rightArrow.svg" />
                    </view>
                </view>
            </view>

            <view class="contentItem" style="border-bottom: 0px;" @click="handleShowPrivacy">
                <view class="itemLeft">隐私协议</view>
                <view class="itemRight">
                    <view class="rightGoBox">
                        <text class="goText">点击查看</text>
                        <image class="goIcon" src="/static/images/home/rightArrow.svg" />
                    </view>
                </view>
            </view>



        </view>

        <view class="btnBox">
            <!-- <view class="saveBtn" style="margin-bottom: 24rpx;">保存修改</view> -->
            <view class="loginOut" @click="handleGoLoginOut">退出登录</view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            userInfo: {},// 用户信息
        }
    },
    computed: {
        ...mapGetters({
            user: "user",
        }),
        phone() {
            if (this.user.MEMBERSHIP_MOBILEPHONE) {
                let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
                let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
                return a + "****" + b;
            } else {
                return "";
            }
        },
    },
    onLoad() {
        // 拿用户信息
        this.handleGetUserDetail();
    },
    methods: {
        // 收藏的商品
        handleGoFavoriteStore() {
            uni.navigateTo({
                url:
                    "/pages/useConfig/FavoriteStore"
            });
        },
        // 切换账号
        handleChangePhone() {
            uni.showModal({
                content: '切换账号需要退出当前账号，是否确认？',
                success: function (res) {
                    if (res.confirm) {
                        uni.clearStorageSync()
                        _this.$store.commit('RESET_ALL_STATE')
                        setTimeout(() => {
                            try {
                                // 尝试使用reLaunch完全重启应用
                                uni.reLaunch({
                                    url: '/pages/index/index'
                                })
                            } catch (e) {
                                // 如果reLaunch失败，则使用switchTab
                                uni.switchTab({
                                    url: '/pages/index/index'
                                })
                            }
                        }, 100);
                    } else if (res.cancel) {
                    }
                }
            });
        },
        // 退出登录
        handleGoLoginOut() {
            let _this = this
            uni.showModal({
                content: '确定退出登录？',
                success: function (res) {
                    if (res.confirm) {
                        uni.clearStorageSync()
                        _this.$store.commit('RESET_ALL_STATE')
                        setTimeout(() => {
                            try {
                                // 尝试使用reLaunch完全重启应用
                                uni.reLaunch({
                                    url: '/pages/index/index'
                                })
                            } catch (e) {
                                // 如果reLaunch失败，则使用switchTab
                                uni.switchTab({
                                    url: '/pages/index/index'
                                })
                            }
                        }, 100);
                    } else if (res.cancel) {
                    }
                }
            });
        },
        // 点击跳转地址管理
        handleGoAddress() {
            uni.navigateTo({
                url:
                    "/pages/myAddress/address/index"
            });
        },
        // 打开隐私协议
        handleShowPrivacy() {
            wx.openPrivacyContract()
        },
        // 拿到用户详情
        async handleGetUserDetail() {
            const userData = await this.$api.getCoop({
                action_type: "GetMembershipInfo",
                WechatUserId: this.user.WechatUserId,
            });
            this.userInfo = userData.Data;
            this.$forceUpdate();
            console.log("this.userInfo", this.userInfo);
        },

        // 用户上传头像
        async onChooseAvatar(e) {
            let _this = this;
            uni.uploadFile({
                url: "https://api.eshangtech.com/EShangApiMain/Picture/UploadPicture", // 你的接口 URL
                filePath: e.detail.avatarUrl,
                name: "file", // 表单中的文件字段名
                formData: {
                    Tabletype: "1005", // 表单中其他数据
                },
                success: async (uploadRes) => {
                    let data = uploadRes.data ? JSON.parse(uploadRes.data) : "";
                    let url = data.Result_Data.ImageUrl;
                    if (url) {
                        let req = {
                            membershipId: this.user.MEMBERSHIP_ID,
                            headImgUrl: url,
                        };
                        _this.WXProfile = url;
                        const userInfoData = await _this.$api.$get(
                            "/WeChat/UpdateMemberInfo",
                            req
                        );
                        if (userInfoData.Result_Code === 100) {
                            _this.handleGetUserDetail();
                        }
                    }
                },
            });
        },
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .contentBox {
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 32rpx;
        margin-top: 16rpx;

        .contentItem {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32rpx 0;
            border-bottom: 2px solid #F5F5F5;

            .itemLeft {
                width: 40%;
                font-size: 28rpx;
            }

            .itemRight {
                width: 60%;

                .rightImgBox {
                    display: flex;
                    justify-content: flex-end;

                    .avatarBtn {
                        width: 104rpx;
                        height: 104rpx;
                        padding: 0;
                        border-radius: 50%;
                        margin: 0;

                        .headerImg {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                }

                .rightGoBox {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    .goText {
                        font-size: 24rpx;
                        color: #a1a1a1;
                    }

                    .goIcon {
                        width: 26rpx;
                        height: 26rpx;
                        margin-left: 8rpx;
                    }
                }

                .phoneBox {
                    font-size: 24rpx;
                    color: #a1a1a1;
                    text-align: right;
                }


            }
        }
    }

    .btnBox {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;

        .saveBtn {
            width: 100%;
            border-radius: 48rpx;
            background-color: #07C160;
            font-weight: 400;
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            padding: 24rpx 0;
        }

        .loginOut {
            width: 100%;
            border-radius: 48rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #07C160;
            text-align: center;
            font-style: normal;
            padding: 24rpx 0;
            border: 1px solid #07C160;
            box-sizing: border-box;
        }
    }
}
</style>
