<template>
    <NavBar title="个人中心" />

    <view class="avatar">
        <wd-img 
            v-if="avatar" 
            :src="BASE_URL + avatar" 
            width="160rpx"
            height="160rpx"
            round
        />
    </view>
    
    <wd-cell-group border>
        <wd-cell 
            v-for="(item, index) in list" 
            :title="item.title" 
            :is-link="item.isLink"
            :to="item.url"
            @click="item.onClick"
        />
    </wd-cell-group>
    
    <wd-message-box />
    <wd-toast />
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
import { getPageConfig } from '@/api/modules/config';
import { BASE_URL } from '@/config/api.config';
import { ref } from 'vue';

const message = useMessage()
const toast = useToast()

const {
    yaoList
} = storeToRefs(useUserStore())

const avatar = ref<string>('')
getPageConfig().then(res => {
    avatar.value = res.avatar.formats.medium.url
})

const list = [
    {
        title: '历史记录',
        isLink: true,
        url: '/pages/user/history'
    },
    {
        title: '清空缓存',
        isLink: true,
        onClick: () => {
            message
                .confirm({
                    title: '提示',
                    msg: '此操作将删除所有历史数据，是否确定？'
                })
                .then(() => {
                    yaoList.value = []
                    toast.success('清除缓存成功')
                })
        }
    },
    {
        title: '建议反馈',
        isLink: true,
        url: '/pages/user/suggestion'
    }
]
</script>

<style lang="scss" scoped>
.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 48rpx auto;
}
</style>