<template>
    <div class="product-info" :class="{ product2: list }" @click="goDetail">
        <van-image width="104" height="104" fit="cover" :src="getImg(info.pic)" />
        <div class="content">
            <div class="text1 van-ellipsis">{{ info.name }}</div>
            <div class="badges">
                <div class="badge">{{ category.name }}</div>
            </div>
            <div class="flex1"></div>
            <div class="datas">
                <div class="data">
                    <div class="val">{{ info.currentPrice }}</div>
                    <div class="name">当前价(元)</div>
                </div>
                <div class="data">
                    <div class="val">3%</div>
                    <div class="name">日化收益</div>
                </div>
                <div class="data">
                    <div class="val">{{ info.premium || 0 }}</div>
                    <div class="name">明日可得(元)</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
    info: {
        type: Object,
        default: () => {
            return {}
        }
    },
    list: {
        type: Boolean,
        default: false
    }
})
const category = computed(() => {
    return props.info.category || {}
})

const router = useRouter()
const goDetail = () => {
    router.push({
        path: '/productDetail',
        query: {
            id: props.info.id
        }
    })
}
</script>

<style lang="less" scoped>
.product-info {
    .f();
    .van-image {
        flex-shrink: 0;
    }
}

.content {
    align-self: stretch;
    padding: 6px 10px;
    flex-grow: 1;
    overflow: hidden;
    .f-col();

    .text1 {
        font-size: 14px;
        color: var(--ion-color-step-900);
        line-height: 24px;
        font-weight: bold;
    }

    .badges {
        .f();
        margin-top: 2px;
        .badge {
            font-size: 10px;
            color: #392d19;
            line-height: 16px;
            background: var(--ion-color-step-0) 66;
            border-radius: 2px;
            padding: 0 2px;
        }
        .badge + .badge {
            margin-left: 6px;
        }
    }
}

.flex1 {
    flex-grow: 1;
}

.datas {
    .f();
    .data {
        width: 33%;
        .f-col();
        align-items: center;
        .val {
            font-size: 13px;
            font-weight: bold;
            color: var(--ion-color-light-contrast);
            line-height: 24px;
        }
        .name {
            font-size: 11px;
            color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
            line-height: 17px;
            white-space: nowrap;
        }

        &:nth-child(1) {
            align-items: flex-start;
            .val {
                color: var(--red);
            }
        }

        &:nth-child(2) {
            .val {
                color: var(--green);
            }
        }
    }
}

.product2 {
    .content {
        .badges {
            .badge {
                color: #4078de;
                background: #e9effb;
            }
        }
    }
}
</style>
