<template>
    <view class="card flex justify-between" @click="goPage">
        <view class="flex">
            <u-image :src="image" width="140" height="140"></u-image>
            <view class="ml-[20rpx]">
                <view class="normal font-medium text-xl">{{ name }}</view>
                <view class="mt-[24rpx]">
                    <price :price="price" :desc="unit_name"></price>
                </view>
            </view>
        </view>
        <view>
            <button
                class="evaluate bg-white text-sm text-muted leading-[60rpx] h-[60rpx] rounded-full"
                @click="goPage"
            >
                去评价
            </button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Price from '@/components/price/index.vue'

const props = withDefaults(
    defineProps<{
        name: string | null
        image: string | null
        unit_name: any
        price: any
        goodsId: string | number
    }>(),
    {
        name: '',
        image: '',
        unit_name: '',
        price: '',
        goodsId: ''
    }
)

const goPage = () => {
    uni.navigateTo({
        url: `/bundle/pages/evaluate_submit/index?id=${props.goodsId}`
    })
}
</script>

<style lang="scss" scoped>
.card {
    border-radius: 14rpx;
    background-color: white;
    margin: 20rpx 20rpx 0 20rpx;
    padding: 30rpx;
}
.evaluate {
    border: 1px solid $u-type-primary;
    color: $u-type-primary;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
}
</style>
