HomeAccounting

1
<template>
2
    <span class="sum">
3
        <span>{{ inputValue }}</span>
4
        &nbsp;
5
        <span class="converted" v-if="convertedValue">
6
            ({{ convertedValue }} <span>RUB</span>)
7
        </span>
8
    </span>
9
</template>
10

11
<script>
12
    import Currency from '../../../classes/DB/models/Currency';
13

14
    export default {
15
        name: "bills-price-output",
16
        props: {
17
            sum: {
18
                type: Number,
19
                default: 0,
20
            },
21
            currencyCode: {
22
                type: Number,
23
                default: 0,
24
            },
25
        },
26

27
        data: () => ({
28
            currencyInfo: {},
29
        }),
30
        methods: {
31
            getCurrencyInfo() {
32
                let currency = new Currency();
33
                let currencyInfo = currency.getCurrency(this.currencyCode);
34

35
                currencyInfo.then((result) => {
36
                    this.currencyInfo = result;
37
                });
38

39
            },
40
            sumFormat(sum) {
41
                let number =  sum.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
42
                return number.replace(/\./, ',');
43
            },
44
        },
45
        computed: {
46
            convertedValue() {
47

48
                const defaultCurrency = this.$store.getters.getDefaultCurrency;
49

50
                if(this.currencyInfo !== '' && this.currencyCode !== defaultCurrency) {
51
                    let sum = this.currencyInfo.value / this.currencyInfo.nominal * this.sum;
52
                    let rounded = Math.ceil((sum)*100)/100;
53
                    return this.sumFormat(rounded)
54
                }
55
                else {
56
                    return 0;
57
                }
58
            },
59
            inputValue() {
60
                return this.sumFormat(this.sum);
61
            },
62
        },
63
        watch: {
64
            currencyCode() {
65
                this.getCurrencyInfo();
66
            }
67
        },
68
        mounted() {
69
            this.getCurrencyInfo();
70
        }
71
    }
72
</script>
73

74
<style scoped>
75
    span.converted {
76
        font-size: 0.9em;
77
        color: rgba(125, 116, 116, 0.87);
78
    }
79

80
    span.converted > span {
81
        text-transform: uppercase;
82
        font-weight: bold;
83
        color: rgba(106, 226, 66, 0.87);
84
    }
85
</style>