<script setup lang="ts">
    import { lists } from './constant/index'
    import View from '@/components/Layout/View.vue'

    const url = '/static/images/mine/provincial.png'
    const bgUrl = '/static/header/mine.png'
</script>

<template>
    <View>
        <template #container>
            <Header title="我的" class="h-405" :url="bgUrl">
                <template #content>
                    <view
                        class="w-200 h-250 pos-absolute left-50% z-1 bottom-0% transform lh-8"
                        style="transform: translateX(-50%)"
                    >
                        <image :src="url" class="w-144 h-144" />
                        <text class="letter-spacing-1">18771683288</text>
                    </view>
                </template>
            </Header>
            <view class="bg-#F0F2F5">
                <fui-list>
                    <fui-list-cell arrow v-for="(item, index) in lists.slice(0, 4)" :key="index" class="border-bottom">
                        <FuiIcon custom-prefix="font_family" :name="`icon-${item.icon}`" color="#333333" size="42" />
                        <text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
                    </fui-list-cell>
                </fui-list>
                <fui-list style="margin-top: 20rpx">
                    <fui-list-cell arrow v-for="(item, index) in lists.slice(4, 6)" :key="index" class="border-bottom">
                        <FuiIcon custom-prefix="font_family" :name="`icon-${item.icon}`" color="#333333" size="42" />
                        <text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
                    </fui-list-cell>
                </fui-list>
                <fui-list style="margin-top: 20rpx">
                    <fui-list-cell
                        arrow
                        v-for="(item, index) in lists.slice(6, 10)"
                        :key="index"
                        class="border-bottom pos-relative"
                    >
                        <FuiIcon custom-prefix="font_family" :name="`icon-${item.icon}`" color="#333333" size="42" />
                        <text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text>
                        <text v-if="item.suffix" class="text-#1890FF pos-absolute right-70">
                            {{ item.suffix }}
                        </text>
                    </fui-list-cell>
                </fui-list>
            </view>
            <view class="p-6 pt-5 pb-2">
                <fui-button background="#fff" radius="50rpx" color="#1890FF">退出当前账号</fui-button>
            </view>
        </template>
    </View>
</template>
