<template>
    <div class="product-info" :class="{ prim: isChoose }" @click.stop="choose">
        <van-image width="calc(50vw - 26px)" height="calc(50vw - 26px)" radius="2" fit="cover" :src="info.pic" />
        <!-- <img src="@assets/fire3.gif" style="width: 32px; height: 108px" alt="" /> -->
        <div class="content">
            <div class="text1">{{ info.name }}</div>
            <div class="text2">
                <span>{{ info.price }}</span>
                <span>个绿洲核</span>
            </div>
            <div class="text3">已兑{{ info.sale }}次</div>
        </div>
        <img src="@assets/png_xuanzhong.png" v-if="isChoose" class="choose-icon" alt="" />
        <img src="@assets/png-weigouxuan.png" v-else class="choose-icon" alt="" />
    </div>
</template>

<script>
export default {
    props: {
        isChoose: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    methods: {
        choose() {
            this.$emit('choose', this.info.id);
        }
    }
};
</script>

<style lang="less" scoped>
.product-info {
    width: calc(50vw - 24px);
    background: #25283d;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
    position: relative;
    padding: 1px;
    box-sizing: border-box;
    .choose-icon {
        width: 36px;
        height: 36px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
    }
}
.content {
    padding: 6px 8px;
    .text1 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis; //...
    }

    .text2 {
        color: #ffe3a3;
        line-height: 24px;
        span {
            &:first-child {
                font-size: 16px;
                font-weight: bold;
            }
            &:nth-child(2) {
                font-size: 12px;
                margin-left: 2px;
            }
        }
    }

    .text3 {
        font-size: 10px;
        color: #6a6d83;
        line-height: 10px;
    }
}

.prim {
    &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background-color: #25283d;
        z-index: 1;
        border-radius: 4px;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
    }

    & > div {
        z-index: 2;
        position: relative;
    }
}
</style>
