<template>
    <view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx">
        <view class="flex items-center justify-between pb-10rpx">
            <view class="text-30rpx">{{ title }}</view>
            <view class="text-24rpx" :style="{color: statusColor}">{{ statusText }}</view>
        </view>
        <template v-if="body && body.length > 0">
            <uv-line />
            <view class="body text-hex-999999 text-28rpx">
                <view v-for="(item, i) in body" :key="i" class="body-item flex mt-10rpx">
                    <view class="label mr-10rpx">{{ item.label }}</view>
                    <view class="value">{{ item.value }}</view>
                </view>
            </view>
        </template>
        <template v-if="images && images.length > 0">
            <uv-scroll-list :indicator="false">
              <view class="space-x-15rpx flex">
                <view v-for="(url, index) in images.slice(0, 3)" :key="index">
                  <image :src="url" mode="heightFix" style="height: 160rpx"></image>
                </view>
              </view>
            </uv-scroll-list>
        </template>
        <slot name="footer"></slot>
    </view>
</template>
<script setup>
    import { ref } from 'vue'

    const props = defineProps({
        title: [String, Number],
        statusText: [String, Number],
        statusColor: {
            type: String,
            default: '#3c9cff'
        },
        body: Array,
        images: Array,
    })
</script>
<style scoped>
    .uv-scroll-list {
        padding-bottom: 0;
    }
</style>