<template>
    <v-timeline-item :color="props.item.color" small>
        <v-layout pt-1>
            <v-flex lg4 class="text-lg-right">
                <strong> {{ props.item.title }} </strong>
                <div class="caption"> {{ props.item.date }} </div>
            </v-flex>
            <v-flex lg4 class="text-lg-right">
                <div class="caption"> مبلغ پرداخت شده </div>
                <span class="Price En cyan--text">
                    <span class="Unit"> IRT </span> {{ props.item.paid }}
                </span>
            </v-flex>
            <v-flex lg4 class="text-lg-right">
                <div class="caption"> بدهی مانده </div>
                <span class="Price En red--text">
                    <span class="Unit"> IRT </span> {{ props.item.total_price - props.item.paid }}
                </span>
            </v-flex>
        </v-layout>
    </v-timeline-item>
</template>


<script>

export default {
    props: {
        props: { default: "" },
    },
    data () {
        return {
        }
    }

};
</script>
<style lang="scss">

</style>

