<template>
    <view class="set-page">
        <!-- 个人信息卡片 -->
        <navigator url="/pages/user_data/user_data" hover-class="none">
            <view class="set-card" style="margin-top: 20rpx">
                <view class="set-card__item set-card__user">
                    <image class="set-card__avatar" :src="defaultAvatar" mode="aspectFill" />
                    <view class="set-card__user-info">
                        <text class="set-card__nickname">{{ userInfo.nickname || '用户' }}</text>
                        <text class="set-card__account">账号：{{ userInfo.account }}</text>
                    </view>
                    <u-icon name="arrow-right" size="20" color="#737373" />
                </view>
            </view>
        </navigator>

        <!-- 账号安全卡片 -->
        <view class="set-card">
            <view class="set-card__item set-card__item--border" @tap="handlePwd">
                <text class="set-card__label">登录密码</text>
                <u-icon name="arrow-right" size="20" color="#737373" />
            </view>
            <!--  #ifdef H5 || MP-WEIXIN -->
            <view v-if="isWeixin" class="set-card__item" @tap="bindWechatLock">
                <text class="set-card__label">绑定微信</text>
                <view class="set-card__right">
                    <text class="set-card__value">{{ userInfo.is_auth ? '已绑定' : '未绑定' }}</text>
                    <u-icon v-if="userInfo.is_auth == 0" name="arrow-right" size="20" color="#737373" />
                </view>
            </view>
            <!-- #endif -->
        </view>

        <!-- 协议与关于卡片 -->
        <view class="set-card">
            <navigator :url="`/pages/agreement/agreement?type=${AgreementEnum.PRIVACY}`" hover-class="none">
                <view class="set-card__item set-card__item--border">
                    <text class="set-card__label">隐私政策</text>
                    <u-icon name="arrow-right" size="20" color="#737373" />
                </view>
            </navigator>
            <navigator :url="`/pages/agreement/agreement?type=${AgreementEnum.SERVICE}`" hover-class="none">
                <view class="set-card__item set-card__item--border">
                    <text class="set-card__label">服务协议</text>
                    <u-icon name="arrow-right" size="20" color="#737373" />
                </view>
            </navigator>
            <navigator url="/pages/as_us/as_us" hover-class="none">
                <view class="set-card__item">
                    <text class="set-card__label">关于我们</text>
                    <view class="set-card__right">
                        <text class="set-card__value">v{{ appVersion }}</text>
                        <u-icon name="arrow-right" size="20" color="#737373" />
                    </view>
                </view>
            </navigator>
        </view>

        <!-- 退出登录 -->
        <view class="set-logout" @tap="showLogout = true">
            <text>退出登录</text>
        </view>

        <u-action-sheet :list="list" v-model="show" @click="handleClick"
            :safe-area-inset-bottom="true"></u-action-sheet>

        <u-popup class="pay-popup" v-model="showLogout" round mode="center" borderRadius="10" :maskCloseAble="false">
            <view class="set-popup">
                <text class="set-popup__title">温馨提示</text>
                <text class="set-popup__desc">是否清除当前登录信息，退出登录？</text>
                <view class="set-popup__actions">
                    <view class="set-popup__btn set-popup__btn--cancel" @tap="showLogout = false">
                        <text>取消</text>
                    </view>
                    <view class="set-popup__btn set-popup__btn--confirm" @tap="logoutHandle">
                        <text>确认</text>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, ref, onMounted } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { AgreementEnum } from '@/enums/agreementEnums'
import { isWeixinClient } from '@/utils/client'
import { mnpAuthBind, oaAuthBind } from '@/api/account'
import { useLockFn } from '@/hooks/useLockFn'
import { useRouter } from "uniapp-router-next";
import manifest from '@/manifest.json'
// #ifdef H5
import wechatOa from '@/utils/wechat'
// #endif

const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()

const appVersion = ref(manifest.versionName || '1.0.0')
// #ifdef APP-PLUS
onMounted(() => {
    const appId = plus.runtime.appid || ''
    plus.runtime.getProperty(appId, (info: any) => {
        if (info.version) {
            appVersion.value = info.version
        }
    })
})
// #endif
const userInfo = computed(() => userStore.userInfo)
const defaultAvatar = computed(() => {
    const logo = appStore.config?.website?.shop_logo
    if (!logo) return '/static/images/avatar.png'
    if (logo.startsWith('http')) return logo
    return (appStore.config?.domain || '') + logo
})

const list = ref([
    {
        text: '修改密码'
    },
    {
        text: '忘记密码'
    }
])

const isWeixin = ref(true)
// #ifdef H5
isWeixin.value = isWeixinClient()
// #endif

const show = ref(false)
const showLogout = ref(false)

// 修改/忘记密码
const handleClick = (index: number) => {
    switch (index) {
        case 0:
            router.navigateTo('/pages/change_password/change_password')
            break
        case 1:
            router.navigateTo('/pages/forget_pwd/forget_pwd')
            break
    }
}

const handlePwd = () => {
    if (!userInfo.value.has_password)
        return router.navigateTo('/pages/change_password/change_password?type=set')
    show.value = true
}

// 退出登录
const logoutHandle = () => {
    userStore.logout()
    router.redirectTo('/pages/login/login')
}

const bindWechat = async () => {
    if (userInfo.value.is_auth) return
    try {
        uni.showLoading({
            title: '请稍后...'
        })
        // #ifdef MP-WEIXIN
        const { code }: any = await uni.login({
            provider: 'weixin'
        })
        await mnpAuthBind({
            code: code
        })
        //#endif
        // #ifdef H5
        if (isWeixin.value) {
            wechatOa.getUrl()
        }
        // #endif
        await userStore.getUser()
        uni.hideLoading()
    } catch (e) {
        uni.hideLoading()
        uni.$u.toast(e)
    }
}
const { lockFn: bindWechatLock } = useLockFn(bindWechat)

onShow(() => {
    userStore.getUser()
})

onLoad(async (options) => {
    // #ifdef H5
    const { code } = options
    if (!isWeixin.value) return
    if (code) {
        uni.showLoading({
            title: '请稍后...'
        })
        try {
            await oaAuthBind({ code })
            await userStore.getUser()
        } catch (error) {
        }
        //用于清空code
        router.redirectTo('/pages/user_set/user_set')
    }

    // #endif
})
</script>

<style lang="scss" scoped>
.set-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 60rpx;
}

.set-card {
    margin: 20rpx 16rpx 0;
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;

    &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
        height: 110rpx;

        &--border {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 32rpx;
                right: 32rpx;
                bottom: 0;
                height: 1rpx;
                background: #f2f2f2;
            }
        }
    }

    &__user {
        height: 140rpx;
        justify-content: flex-start;
        gap: 24rpx;
    }

    &__avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 12rpx;
        flex-shrink: 0;
    }

    &__user-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
    }

    &__nickname {
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
    }

    &__account {
        font-size: 24rpx;
        color: #999;
    }

    &__label {
        font-size: 28rpx;
        color: #000;
    }

    &__right {
        display: flex;
        align-items: center;
        gap: 8rpx;
    }

    &__value {
        font-size: 28rpx;
        color: #666;
    }
}

.set-logout {
    margin: 60rpx 16rpx 0;
    height: 92rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5edff;
    border-radius: 12rpx;

    text {
        font-size: 28rpx;
        color: #185dff;
        font-weight: 500;
    }
}

.set-popup {
    width: 560rpx;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    &__title {
        font-size: 34rpx;
        font-weight: 600;
        color: #000;
    }

    &__desc {
        font-size: 28rpx;
        color: #666;
        margin-top: 24rpx;
        margin-bottom: 40rpx;
    }

    &__actions {
        display: flex;
        width: 100%;
        gap: 20rpx;
    }

    &__btn {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40rpx;

        text {
            font-size: 28rpx;
        }

        &--cancel {
            background: #f5f5f5;

            text {
                color: #666;
            }
        }

        &--confirm {
            background: #185dff;

            text {
                color: #fff;
            }
        }
    }
}
</style>
