<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-08-18 17:54:48
 * @FilePath: \housekeeping-uniapp\src\components\widgets\my-subscribe\my-subscribe.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="my-subscribe bg-white mx-[25rpx] mt-[20rpx] rounded-lg">
        <view
            v-if="content.title"
            class="title px-[30rpx] py-[20rpx] font-medium text-xl title-active"
        >
            <view class="flex justify-between items-center">
                <view>{{ content.title }}</view>
                <view class="text-muted inline text-sm" @click="toOrderLists(0)">
                    全部订单
                    <u-icon name="arrow-right" />
                </view>
            </view>
        </view>
        <view class="flex pt-[20px] pb-[10px]">
            <view
                v-for="(item, index) in content.data"
                :key="index"
                :class="{ 'flex-1': item.display }"
                @click="handleClick(item.link)"
            >
                <view
                    v-if="item.display"
                    class="order-menu-item flex flex-col items-center mb-[15px]"
                >
                    <u-image width="52" height="52" :src="getImageUrl(item.image)" alt="" />
                    <view class="mt-[15rpx]">{{ item.name }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
    userInfo: {
        type: Object,
        default: () => ({})
    }
})
const { getImageUrl } = useAppStore()
const handleClick = (link: any) => {
    uni.reLaunch({ url: link })
}

// 点击查看跳转至订单详情页
const toOrderLists = (type: number) => {
    uni.reLaunch({ url: `/pages/order/index?type=${type}` })
}
</script>

<style lang="scss">
.order-menu-item {
    flex: auto;
    text-align: center;
    position: relative;
    image {
        width: 60rpx;
        height: 60rpx;
    }
    &--text {
        color: #f36161;
        font-size: 30rpx;
    }
}
// 徽章
.badge {
    width: 30rpx;
    height: 30rpx;
    text-align: center;
    line-height: 30rpx;
    top: -10rpx;
    right: 25rpx;
    color: #ffffff !important;
    border-radius: 50%;
    position: absolute;
    font-size: 26rpx !important;
    background-color: #f36161;
}
</style>
