<template>
    <div class="box">
        <div class="dialog_footer" v-for="(item, index) in props.flowingwater.list" :key="index">
            <div class="dialog_footer_left">
                <span>{{ item.biz_name }}</span>
                <span>{{ dayjs(item.create_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </div>
            <div class="dialog_footer_right">
                <span :class="{ active: item.biz_code == 'cashMemberIn' }">
                    <template v-if="item.biz_code == 'cashMemberIn'">+</template>
                    <template v-else>-</template>
                    ￥{{ (Math.floor(item.amount * 100) / 100).toFixed(2) }}
                </span>
                <span>余额：￥{{ (Math.floor(item.balance * 100) / 100).toFixed(2) }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { dayjs } from 'element-plus'

const props = defineProps({
    flowingwater: {
        type: Object,
        default: {}
    }
})
</script>

<style scoped lang="scss">
.box {
    height: 400px;
    overflow: auto;

    .dialog_footer:nth-child(1) {
        margin-top: 0;
    }

    .dialog_footer {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;

        .dialog_footer_left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            span:nth-child(1) {
                font-size: 18px;
                font-weight: 500;

            }

            span:nth-child(2) {
                margin-top: 10px;
                color: #999;
                font-size: 12px;
            }
        }

        .dialog_footer_right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            span:nth-child(1) {
                font-size: 16px;

                &.active {
                    color: #fc3d3d;
                }

            }

            span:nth-child(2) {
                margin-top: 10px;
                font-size: 14px;
                color: #999;
            }
        }
    }
}
</style>