<template>
    <view class="component-service-preview-item">
        <image class="cover-image" mode="aspectFill" :src="data.cover" @click="clickItem(data.id)"></image>
        <view class="item-box" @click="clickItem(data.id)">
            <view class="title limit-line clamp-1">{{ data.name }}</view>
            <view class="text-box"> 已服务{{ data.times || 0 }}次 </view>
            <view class="price">¥ {{ utils.formatNumber(data.price || 0, 2) }}元</view>
        </view>
    </view>
</template>

<script>
export default {
    name: "component-service-preview-item",
    data() {
        return {
            utils: this.$utils,
        };
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        clickItem(id) {
            this.$emit("clickItem", id);
        },
    },
};
</script>

<style lang="less" scoped>
.component-service-preview-item {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    .cover-image {
        width: 130rpx;
        height: 130rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        border: 2rpx solid #d8d8d8;
        flex-shrink: 0;
    }
    .item-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-left: 50rpx;
        .title {
            font-size: 26rpx;
            font-weight: bold;
            color: #010101;
        }
        .text-box {
            display: inline-block;
            font-size: 22rpx;
            color: #333333;
        }
        .price {
            font-size: 30rpx;
            color: #ec7655;
        }
    }
}
</style>