<template>
    <v-layout row wrap>
        <v-flex xs12>
            <v-data-table
                :headers="headers" :items="received_order"
                :expand="expand" class="elevation-1" hide-actions
                item-key="M_ItemID"
            >
                <template v-slot:items="props">
                    <tr @click="props.expanded = !props.expanded">
                        <td class="text-xs-center pa-2">
                            <v-icon>{{ props.expanded
                                ? "keyboard_arrow_down"
                                : "keyboard_arrow_right"
                            }}</v-icon>
                        </td>
                        <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
                        <td class="text-xs-center pa-2">{{ props.item.RequestQty }}</td>
                        <td class="text-xs-center pa-2">
                            Rp. {{ formatCurrency(props.item.SupplierPrice) }}
                        </td>
                        <td class="text-xs-center pa-2">
                            <span v-if="props.item.DiskonType == 'P'">
                                {{ props.item.DiskonAmount }}%
                            </span>
                            <span v-else>
                                Rp. {{ formatCurrency(props.item.DiskonAmount) }}
                            </span>
                        </td>
                        <td class="text-xs-center pa-2">
                            Rp. {{ formatCurrency(props.item.EndPrice) }}
                        </td>
                        <td class="text-xs-center pa-2">
                            Rp. {{ formatCurrency(props.item.TempTotal) }}
                        </td>
                    </tr>
                </template>

                <template v-slot:expand="props">
                    <v-card flat>
                        <v-card-text>
                            <v-data-table
                                :headers="b_headers" class="elevation-0"
                                :items="props.item.detail" hide-actions
                                item-key="PurchaseRequestDetailID"
                            >
                                <template v-slot:items="det">
                                <tr>
                                    <td class="text-xs-center pa-2">{{ det.item.M_ItemDesc }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.PurchaseRequestNumber }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.M_BranchName }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.RequestQty }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.ItemUnitName }}</td>
                                    <td class="text-xs-center pa-2">
                                        Rp. {{ formatCurrency(det.item.SupplierPrice) }}
                                    </td>
                                </tr>
                                </template>
                            </v-data-table>
                        </v-card-text>
                    </v-card>
                </template>
            </v-data-table>
        </v-flex>
    </v-layout>
</template>

<script>
module.exports = {
    data() {
        return {
            expand: false,
            headers: [
                {
                    text: "", align: "center", sortable: false,
                    value: "item", width: "5%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "ITEM", align: "center", sortable: false,
                    value: "item", width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "DISKON", align: "center", sortable: false,
                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
                    value: "disc", width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "TOTAL", align: "center", sortable: false,
                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
            ],
            b_headers: [
                {
                    text: "NAMA PRODUK", align: "center", sortable: false,
                    value: "prod", width: "25%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "NO REQUEST", align: "center", sortable: false,
                    value: "noreq", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "REQUESTER", align: "center", sortable: false,
                    value: "req", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "qty", width: "10%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "UNIT", align: "center", sortable: false,
                    value: "unit", width: "10%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "15%", class: "pa-1 blue lighten-4 black--text",
                }
            ]
        }
    },
    computed: {
        received_order: {
            get() {
                return this.$store.state.formView.received_order;
            },
            set(val) {
                this.$store.commit("formView/update_received_order", val)
            }
        },
        summary_order: {
            get() {
                return this.$store.state.formView.summary_order;
            },
            set(val) {
                this.$store.commit("formView/update_summary_order", val)
            }
        }
    },
    methods: {
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
    }
}
</script>
