<!--
 * @Author: 王翠碧 1254597151@qq.com
 * @Date: 2023-05-23 22:05:21
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-10-05 10:26:41
 * @FilePath: \uniapp\src\pages\user\user.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="user">
        <u-image
            :src="getImageUrl(userInfoBgImage)"
            class="bg-image"
            mode="scaleToFill"
            height="100%"
            v-if="userInfoBgImage"
        />
        <div class="user-block">
            <view v-for="(item, index) in state.pages" :key="index">
                <template v-if="item.name == 'user-info'">
                    <w-user-info
                        :content="item.content"
                        :styles="item.styles"
                        :user="userInfo"
                        :is-login="isLogin"
                    />
                </template>
                <template v-if="item.name == 'my-service'">
                    <w-my-service :content="item.content" :styles="item.styles" />
                </template>
                <template v-if="item.name == 'my-subscribe'">
                    <w-my-subscribe
                        :content="item.content"
                        :userInfo="userInfo"
                        :styles="item.styles"
                    />
                </template>
                <!-- <template v-if="item.name == 'my-coupon' && item.content.data.length > 0">
                    <w-my-service :content="item.content" :styles="item.styles" />
                </template> -->
                <!-- <template v-if="item.name == 'my-task' && userInfo.staff === true">
                    <w-my-task :content="item.content" :userInfo="userInfo" :styles="item.styles" />
                </template> -->

                <!-- <template v-if="item.name == 'user-banner'">
                <w-user-banner :content="item.content" :styles="item.styles" />
            </template> -->
            </view>
        </div>
        <view :style="{ paddingBottom: safeArea + 'px' }"></view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { getDecorate } from '@/api/shop'
import { useUserStore } from '@/stores/user'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { reactive, ref, unref } from 'vue'
import { useAppStore } from '@/stores/app'

const { getImageUrl } = useAppStore()

const state = reactive<{
    pages: any[]
}>({
    pages: []
})
const safeArea = ref(0)
let userInfoBgImage = ref('')

const getData = async () => {
    const data = await getDecorate({ id: 2 })
    state.pages = JSON.parse(data.pages)
    state.pages.forEach(page => {
        if (page.name === 'my-coupon') {
            page.content = {
                ...page.content,
                data: unref(userInfo).distributorId
                    ? page.content.data
                    : page.content.data.filter(item => item.link.pageName !== 'distributor')
            }
        }
        if (page.name === 'user-info') {
            const url = page.content?.data[0]?.image
            userInfoBgImage = url ?? ''
        }
    })
}

const titleHeight = ref(0)
const barHeight = ref(0)
const getTitleHeight = () => {
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    uni.getSystemInfo({
        success: res => {
            const { statusBarHeight }: { statusBarHeight?: any } = res
            console.log(statusBarHeight)
            barHeight.value = statusBarHeight
            // 标题栏高度
            const navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
            // 顶部自定义导航总高度
            titleHeight.value = statusBarHeight + navHeight
        }
    })
}
const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)
onShow(() => {
    userStore.getUser()
    getData()
    getTitleHeight()
    calculateSafeArea()
})
/**计算安全距离 */
function calculateSafeArea() {
    const device = uni.getSystemInfoSync()
    const offset = device.screenHeight - device.safeArea!.height
    safeArea.value = offset
}
</script>

<style lang="scss">
.user {
    // padding-bottom: 100rpx;
    // overflow: auto;
    // padding-bottom: 200rpx;
    background-color: #f8f8f9;
    // background: linear-gradient(to bottom, #06a9ff 260rpx, transparent 0);
    //   background: linear-gradient(70deg, pink, #06a9ff);
    height: 100vh;
    position: relative;

    .bg-image {
        width: 100%;
        height: 460rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;

        .u-image {
            height: 100%;

            image {
                border-radius: 0 0 28rpx 28rpx !important;
            }
        }
    }

    .user-block {
        position: relative;
        z-index: 2;
    }
}
</style>
