<template>
    <div class="equipCard" @click="cardClick">
        <div class="avatar">
            <div class="showImg">
                <img :src="url" class="">
            </div>
        </div>

        <div class="desc">
            <div class="title">
                {{ name }}
            </div>
            <div class="tag">
                <div class="item" v-for="(v,i) in tags" :key="i">
                    {{ v }}
                </div>
            </div>
            <div class="company">
                {{ company }}
            </div>
            <div class="price">
                ￥<span>{{price}}</span>/{{timeUnit}}
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    const props:any = defineProps({
        url:{
            type: String,
            default: 'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701536400&t=117e17eae3082b7b524f890245f7826f'
        },
        name:{
          type: String,
          default: '测试装备'
        },
        tags:{
            type: Array,
            default: ['待租','合肥市']
        },
        company:{
            type: String,
            default: '安徽某科技有限公司'
        },
        price:{
            type: [String , Number],
            default: 99
        },
        timeUnit:{
            type: String,
            default: '月'
        },
        id:{
            type: [String, Number],
            default: ''
        }
    })

    const emit = defineEmits(['onClick'])
    const cardClick = () => {
        const data = {
            id:props.id
        }
        emit('onClick',data)
    }
</script>
<style lang="scss" scoped>
.equipCard{
    width: 100%;
    background: #F7F9FA;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px 15px 8px 15px;
    display: flex;
    align-items: center;
    .avatar{
        width: 37%;
        overflow: hidden;
        border-radius: 15px;
        .showImg{
            width: 100%;
            padding-bottom: 100%;
            position: relative;
            img{
                position: absolute;
                left: 0;
                top: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }

    }
    .desc{
        box-sizing: border-box;
        margin-left: 10px;
        flex: 1;
        overflow: hidden;
        .title{
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tag{
            display: flex;
            margin-top: 8px;
            .item{
                background: white;
                font-size: 14px;
                font-weight: 400;
                color: #005AF2;
                padding: 2px 3px;
                border: 1px solid #005AF2;
                margin-right: 10px;
                border-radius: 4px;
            }
        }
        .company{
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #A5A4A4;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .price{
            font-size: 14px;
            font-weight: 400;
            color: #FF4800;
            margin-top: 20px;
            span{
                font-size: 25px;
                font-weight: 600;
            }
        }
    }
}
</style>
