<template>
    <view class="goods-item" @click="handleGoodItem(attributes!)">
        <view class="info-img">
            <!-- <u-image :src="attributes.image" class="goods-image" width="300" height="300" border-radius="15"></u-image> -->
            <image :src="attributes!.image" class="goods-image"></image>
        </view>

        <view class="info-column">
            <view style="text-align: left">
                <view class="goods-title overflow-ellipsis-line ellipsis-line1">
                    {{ attributes!.name }}
                </view>
            </view>
            <view class="price-wrap mt-[20rpx]">
                ¥
                <span class="price">{{ attributes!.price }}</span>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

interface GoodProp {
    id: Number
    name: string
    remarks: string
    category: string
    unit: string
    image: string
    price: number
    scribingPrice: number
    status: number
    statusDesc: string
}
const props = defineProps({
    attributes: Object as PropType<GoodProp>
})
const emit = defineEmits(['handleGoodItem'])

const handleGoodItem = (row: GoodProp) => {
    // emit('handleGoodItem', row.id)
    uni.navigateTo({
        url: `/pages/goods/index?id=${row.id}`
    })
}
</script>
<style lang="scss" scoped>
.goods-item {
    // display: inline-block; //让每个子项可以方便换行
    // padding: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    padding: 20rpx;
    // background-color: pink;
    // height: 200px;
    // width: 47%; //这样可以每行最多两个goods item

    .info-img {
        width: 100%;
        height: 300rpx;
        border-radius: 12rpx;
        overflow: hidden;

        .goods-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .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 {
            color: red;

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