<template>
    <card title="热门服务">
        <block v-for="item1 in lists" :key="item1.id">
            <view
                class="goods-item mr-[20rpx]"
                @click="goPage(`/pages/goods/index?id=${item1.id}`)"
            >
                <view class="image-column">
                    <u-image :src="item1.image" class="good-img" width="250" height="250" border-radius="20"></u-image>
                </view>

                <view class="info-column">
                    <view style="text-align: left;">
                        <view class="goods-title">{{ item1.name }}</view>
                        <view class="goods-desc">{{ item1.remarks || ' ' }}</view>
                    </view>
                    <!-- <view class="price-wrap">¥<span class="price">{{ item1.price }}</span> 起</view> --> 
                    <view class="order-wrap"> <span class="price">{{ item1.orderNum }}</span> 人预约过</view>
                </view>
            </view>
        </block>
    </card>
</template>

<script lang="ts" setup>
import Card from './card.vue'

defineProps({
    lists: {
        type: Array,
        default: []
    }
})

const goPage = (url: string) => {
    uni.navigateTo({ url: url })
}
</script>

<style lang="scss" scoped>
// 商品列表
/*.goods-item {
    width: 200rpx;
    display: inline-block;

    &--text {
        // line-1
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .goods-title {
            // width: 180rpx;
            font-weight: 500;
            color: #222;
            font-size: 30rpx;
        }

        .goods-desc {
            color: #888;
            font-size: 24rpx;
        }
    }
}*/
.goods-item {
    display: flex;
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    //box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx;


    .image-column {
        width: 38%;

        .good-img{
            width: 100%;
            //border-radius: 20rpx; //u-image故从属性中传入
            border-radius: 25px;
            border-radius: 50%;
        }
    }

    .info-column {
        display: flex;
        flex-direction: column;
        border-radius: 10rpx;

        text-align: left;
        padding-left: 26rpx;
        margin-bottom: 20rpx;

        .goods-title {
            font-size: 1.1rem;
            margin-bottom: 10rpx;
        }

        .goods-desc {
            font-size: 0.775rem;
            color: #808695;
        }

        .order-wrap {
            margin-top: auto;
            color: red;

            .price {
                font-size: 1.1rem; //¥
            }
        }
    }
}
</style>
