<template>
    <view class="card">
        <view class="card__top top_style title-active">
            <text>{{ item?.currentDate?.split(' ')[0] }}</text>
            <!-- <text class="">
                共计：
                <text class="text-3xl text-[#1296DB]">{{ item.dayTotalMoney }}</text>
                元
            </text> -->
        </view>
        <view class="card__content">
            <view
                class="core"
                v-for="(child, index) in item?.distributorOrderListVo"
                :key="index"
                @click="handleNavigate(child)"
            >
                <view class="title flex-1">
                    <text class="overflow-ellipsis-line mb-2">{{ child.orderNo }}</text>
                    <text class="overflow-ellipsis-line">{{ child.goodsName }}</text>
                </view>
                <view class="money">
                    <text>实付金额</text>
                    <text class="totalPrice">{{ joinSuffix(child.orderAmount) }}</text>
                </view>
                <!-- <view class="money">
                    <text>分销抽佣</text>
                    <text class="totalPrice">{{ joinSuffix(child.commission) }}</text>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { joinSuffix } from '@/utils/util'

interface ChildrenProps {
    createTime: string
    distributorId: number
    goodsName: string
    orderAmount: number
    orderId: number
    orderNo: number
}
interface CardProps {
    currentDate: string
    distributorOrderListVo: ChildrenProps[]
    money: number
    dayTotalMoney: number
}
const props = defineProps({
    item: Object as PropType<CardProps>
})
const emit = defineEmits(['navigate'])
/**跳转地址 */
const handleNavigate = (item: ChildrenProps) => {
    emit('navigate', item)
}
</script>

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

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

        .core {
            @include flex-justify;
            margin-top: 20rpx;
            padding-bottom: 20rpx;
            border-bottom: 1px solid #f7f4f4;

            .totalPrice {
                margin-top: 20rpx;
            }

            &:last-child {
                border-bottom: none;
            }

            .title {
                @include flex-column;
            }

            .money {
                @include flex-column;
                color: #1296db;
                align-items: flex-end;
            }
        }
    }
    .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>
