<template>
    <view class="my-task bg-white mx-[25rpx] mt-[20rpx] rounded-lg">
        <view
            v-if="content.title"
            class="title px-[30rpx] py-[20rpx] font-medium text-xl border-light border-solid border-0 border-b"
        >
            <view class="flex justify-between items-center">
                <view class="my_title">{{ content.title }}</view>
                <view class="text-muted inline text-xs" @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="62" height="62" :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: `/bundle/pages/service_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;
    }
}
// .my_title {
//     width: 180rpx;
//     height: 55rpx;
//     border-radius: 45rpx;
//     background-color: #f36161;
// }
// 徽章
.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>
