<template>
    <view class="card">
        <view class="card__top top_style title-active">
            <text>{{ item?.currentDate }}</text>
            <text>
                共计：
                <text class="text-3xl text-[#1296DB]">{{ item?.userVoList.length }}</text>
                人
            </text>
        </view>
        <view class="card__content">
            <view class="header">
                <text>用户账号</text>
                <text>绑定到期时间</text>
            </view>
            <view class="table">
                <view class="core h-8" v-for="user in item?.userVoList" :key="user.id">
                    <text>{{ user.userNo }}</text>
                    <text>{{ user.unBindTime }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

interface ChildrenProps {
    id: number
    userNo: string
    username: string
    unBindTime: string
}
interface UserProps {
    id: number
    currentDate: string
    userVoList: ChildrenProps[]
}
const props = defineProps({
    item: Object as PropType<UserProps>
})
</script>

<style lang="scss" scoped>
.card {
    background-color: $white;
    margin: 20rpx 40rpx 0;
    padding: 20rpx 30rpx;
    border-radius: 16rpx;
    @include flex-column;

    &__content {
        flex: 1;
        margin-top: 20rpx;

        .header {
            @include flex;

            > text {
                flex: 1;
            }
        }

        .table {
            @include flex-column;
            line-height: 1.8;
            margin-top: 15rpx;

            .core {
                @include flex;

                > text {
                    flex: 1;
                }
            }
        }

        .total {
            margin-top: 40rpx;
        }
    }
    .top_style {
        @apply border-0 border-b border-solid border-[#f7f4f4] h-10 flex items-center justify-between;
    }
    .title-active::before {
        left: -30rpx;
        background-color: #1296db;
    }
}
</style>
