<template>
    <card title="新品首推">
        <block v-for="(item1, idx) in lists" :key="item1.id">
            <view
                class="goods-item mr-[20rpx] mb-[20rpx]"
                @click="goPage(`/pages/goods/index?id=${item1.id}`)"
            >
                <view class="info-img">
                    <u-image
                        :src="item1.image"
                        class="goods-image"
                        width="300"
                        height="300"
                        border-radius="15"
                    ></u-image>
                </view>

                <view class="info-column">
                    <view style="text-align: left">
                        <view class="goods-title">{{ item1.name }}</view>
                        <!-- <view class="goods-scribingPrice">¥ {{ numFilter(item1.scribingPrice) }}</view> -->
                    </view>
                    <view class="price-wrap">
                        ¥
                        <span class="price">{{ numFilter(item1.price) }}</span>
                    </view>
                </view>
            </view>
        </block>
    </card>
</template>

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

withDefaults(
    defineProps<{
        lists: any // 商品数据
    }>(),
    {
        lists: []
    }
)

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

//截取当前数据到小数点后两位
const numFilter = (value: string) => {
    const realVal = parseFloat(value).toFixed(2)
    return realVal
}
</script>

<style lang="scss" scoped>
.goods-item {
    display: inline-block; //让每个子项可以方便换行
    // 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;
    width: 47%; //这样可以每行最多两个goods item

    .info-img {
        width: 100%;

        .goods-image {
            //图片质量选择器，选择最适合你的游戏图片质量的选择器
            width: 100%; //让图片可以整体显示在页面上
            //border-radius: 10rpx; //因为是 u-image 故需要传入参数变更圆角
        }
    }

    .info-column {
        text-align: left;
        padding-top: 20rpx;
        padding-left: 5rpx;

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

        .goods-scribingPrice {
            font-size: 0.775rem;
            color: #808695;
            text-decoration: line-through;
        }

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

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