<template>
    <view class="content">
        <view class="base-info">
            <view class="image">
                <image
                    :src="userInfo.avatar"
                    mode="aspectFill"
                    @error="imageError"
                    class="w-full h-full rounded-[50%]"
                />
            </view>
            <view class="info">
                <text>{{ userInfo.nickname }}</text>
                <text class="strong">{{ userInfo.mobile }}</text>
                <text class="strong">{{ roles }}</text>
            </view>
            <view class="icon" @click="handleViewInfo">
                <TIcon name="icon-right" :size="24" />
            </view>
        </view>
        <slot name="status" />
        <view class="group">
            <u-cell-group :border="false">
                <u-cell
                    v-for="(group, index) in parseGroupList"
                    :key="index"
                    :title="group.title"
                    :url="group.url"
                    :isLink="group.isLink"
                    :border="group.border"
                    size="large"
                    @click="handleClick(group)"
                >
                    <template #value v-if="group.value == 'roles'">
                        <view class="flex items-center">
                            <text class="text-sm mr-1">{{ roles }}</text>
                            <u-icon name="arrow-right" color="#aaacb1" size="18"></u-icon>
                        </view>
                    </template>
                </u-cell>
            </u-cell-group>
        </view>
        <view class="logout" @click="logoutHandle">
            <view class="btn">退出登录</view>
        </view>
        <RolesPopup :show="show" v-model="activeRoleId" @close="handleClose" />
    </view>
</template>

<script setup lang="ts">
import { useToggle } from '@/hooks/useLockFn'
import { PropType, computed, onMounted, ref, unref } from 'vue'
import { AgreementEnum } from '@/enums/agreementEnums'
import { apiConfig } from '@/api/app'
import { useUserStore } from '@/stores/user'
import { navigateTo } from '@/utils/util'
import { useTabBarStore } from '@/stores/tabbar'
import cache from '@/utils/cache'
import { ROLEINDEX } from '@/enums/cacheEnums'
import RolesPopup from '@/components/roles-popup.vue'
import defaultAvatar from '@/static/images/avatar.jpg'

interface IGroup {
    title: string
    value: string
    isLink: boolean
    border?: boolean
    url?: string
}

const props = defineProps({
    groupList: {
        type: Array as PropType<IGroup[]>,
        default: () => []
    }
})
const { show, handleToggle } = useToggle()

const userStore = useUserStore()
const { userInfo } = userStore
const tabBarStore = useTabBarStore()
const roleIndex = ref(cache.get(ROLEINDEX))
const roles = computed(() => {
    const roleArr = userInfo.roles
    return roleArr[roleIndex.value || 0]?.name
})

const activeRoleId = computed(() => {
    const roleArr = userInfo.roles
    return roleArr[roleIndex.value || 0]?.id
})

const newGroupList = ref(props.groupList)
const originGroupList = [
    { title: '联系客服', value: 'customer', isLink: false },
    {
        title: '隐私协议',
        value: '',
        isLink: true,
        url: `/bundle/pages/agreement/index?type=${AgreementEnum.PRIVACY}`
    },
    {
        title: '用户注册协议',
        value: '',
        isLink: true,
        border: false,
        url: `/bundle/pages/agreement/index?type=${AgreementEnum.SERVICE}`
    }
]
const parseGroupList = computed(() => [...newGroupList.value, ...originGroupList])

const handleViewInfo = () => {
    uni.navigateTo({
        url: '/bundle/pages/profile/personal-info'
    })
}

const handleClose = (ind: number) => {
    ind && (roleIndex.value = ind)
    handleToggle(true)
}

const customerPhone = ref('')
// 联系客服
const handleClick = async group => {
    if (group.value == 'customer') {
        if (!unref(customerPhone)) {
            const res = await apiConfig()
            customerPhone.value = res?.servicePhone
        }
        uni.makePhoneCall({
            phoneNumber: unref(customerPhone)
        })
    } else if (group.value == 'roles') {
        handleToggle(false)
    }
}

const logoutHandle = () => {
    uni.showModal({
        content: '是否退出登录？',
        confirmColor: '#4173FF',
        success: ({ cancel }) => {
            if (cancel) return
            userStore.logout()
            tabBarStore.setActiveTabBar(0)
            navigateTo({ path: '/bundle/pages/login/login' }, 'reLaunch')
        }
    })
}

const imageError = () => {
    userInfo.avatar = defaultAvatar
}

const judgeShow = () => {
    if (userInfo?.roles.length > 1) {
        newGroupList.value.push({ title: '切换角色', value: 'roles', isLink: false })
    }
}

onMounted(() => {
    judgeShow()
})
</script>
<style lang="scss" scoped>
.content {
    .base-info {
        @include flex-align;
        gap: 24rpx;
        margin: 60rpx 32rpx 40rpx 64rpx;
        .image {
            width: 128rpx;
            height: 128rpx;
            border-radius: 999px;
        }
        .info {
            flex: 1;
            @include flex-direction;
            gap: 16rpx;
            .strong {
                font-size: 24rpx;
                color: $gray-2;
            }
        }
        .icon {
            width: 48rpx;
            height: 48rpx;
            @include flex-center;
        }
    }
    .group {
        background-color: $white-1;
        margin: 20rpx 32rpx 40rpx 32rpx;
        border-radius: 16rpx;
    }
    .logout {
        @include flex-center;
        margin: 0 32rpx;
        height: 100rpx;
        background-color: $white-1;
        color: $red-1;
        border-radius: 16rpx;
    }
}
</style>
