<template>
<v-dialog v-model="dialog_pickjasa" persistent width="60vw">
    <v-card>
        <v-card-title class="headline grey lighten-2">PILIH ORDER JASA</v-card-title>
        <v-card-text>
            <v-layout row wrap>
                <v-flex xs12>
                    <v-autocomplete
                        v-model="temp_selected_order" :loading="loading"
                        :items="list_pojasa.records" hide-no-data
                        :search-input.sync="keyword" cache-items
                        outline label="Cari nomor order jasa" hide-details
                        item-text="PurchaseOrderNumber" return-object
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs12 mt-2>
                    <v-data-table
                        :headers="headers" class="elevation-1" hide-actions
                        :items="temp_selected_order ? [temp_selected_order] : []"
                        :expand="expand" item-key="PurchaseOrderID"
                    >
                        <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.PurchaseOrderNumber }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.T_KontrakJasaJenisKontrak }}</td>
                                <td class="text-xs-center pa-2">
                                    {{ props.item.T_KontrakJasaJenisKontrak == 'once'
                                        ? props.item.T_KontrakJasaEndDate
                                        : props.item.periode
                                    }}
                                </td>
                                <td class="text-xs-center pa-2">
                                    {{ props.item.PurchaseOrderNote }}
                                </td>
                            </tr>
                        </template>
                        <template v-slot:expand="props">
                            <v-card flat>
                                <v-card-text>
                                    <v-data-table
                                        :headers="headers_expand" class="elevation-0"
                                        :items="props.item.detail" hide-actions
                                    >
                                    <template v-slot:items="expnd">
                                    <tr>
                                        <td class="text-xs-center pa-2">
                                            {{ expnd.item.M_ItemCode }}
                                        </td>
                                        <td class="text-xs-center pa-2">
                                            {{ expnd.item.M_ItemDesc }}
                                        </td>
                                        <td class="text-xs-center pa-2">
                                            {{ expnd.item.ItemUnitName }}
                                        </td>
                                        <td class="text-xs-center pa-2">
                                            {{ expnd.item.qty }}
                                        </td>
                                    </tr>
                                    </template>
                                    </v-data-table>
                                </v-card-text>
                            </v-card>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="batalPickPO()" color="error" class="white--text">Batal</v-btn>
            <v-btn @click="simpanReceive()" color="primary" class="white--text">Simpan</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            keyword: "",
            loading: false,
            expand: false,
            temp_selected_order: null,
            headers: [
                {
                    text: " ", align: "center", sortable: false,
                    value: "check", width: "5%", class: "blue lighten-3 white--text",
                },
                {
                    text: "NO PURCHASE ORDER", align: "center", sortable: false,
                    value: "nopo", width: "25%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "SUPPLIER", align: "center", sortable: false,
                    value: "supplier", width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "JENIS KONTRAK", align: "center", sortable: false,
                    value: "type", width: "5%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "PERIODE", align: "center", sortable: false,
                    value: "periode", width: "25%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "CATATAN", align: "center", sortable: false,
                    value: "note", width: "25%", class: "pa-1 blue lighten-3 white--text",
                },
            ],
            headers_expand: [
                {
                    text: "ITEM CODE", align: "center", sortable: false,
                    value: "code", width: "25%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "ITEM", align: "center", sortable: false,
                    value: "item", width: "25%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "UNIT", align: "center", sortable: false,
                    value: "unit", width: "25%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "QTY", align: "center", sortable: false,
                    value: "qty", width: "25%", class: "pa-1 blue lighten-4 black--text",
                },
            ]
        }
    },
    computed: {
        dialog_pickjasa: {
            get() {
                return this.$store.state.roservice.dialog_pickjasa
            },
            set(val) {
                this.$store.commit("roservice/update_dialog_pickjasa", val)
            }
        },
        list_pojasa: {
            get() {
                return this.$store.state.roservice.list_pojasa
            },
            set(val) {
                this.$store.commit("roservice/update_list_pojasa", val)
            }
        },
        data_rojasa: {
            get() {
                return this.$store.state.roservice.data_rojasa
            },
            set(val) {
                this.$store.commit("roservice/update_data_rojasa", val)
            }
        },
        form_rojasa: {
            get() {
                return this.$store.state.roservice.form_rojasa
            },
            set(val) {
                this.$store.commit("roservice/update_form_rojasa", val)
            }
        },
        selected_rojasa: {
            get() {
                return this.$store.state.roservice.selected_rojasa
            },
            set(val) {
                this.$store.commit("roservice/update_selected_rojasa", val)
            }
        },
    },
    methods: {
        searchOrder(keyword) {
            this.loading = true
            setTimeout(() => {
                this.$store.dispatch("roservice/lookupOrderJasa", keyword)
                this.loading = false
            }, 500);
        },
        batalPickPO() {
            this.temp_selected_order = null
            this.list_pojasa = {}
            this.dialog_pickjasa = false
        },
        simpanReceive() {
            var formrojasa = JSON.parse(JSON.stringify(this.form_rojasa));
            const receiveOrder = JSON.parse(JSON.stringify(this.temp_selected_order));

            formrojasa.TJasaID = receiveOrder.T_KontrakJasaID
            formrojasa.reference = receiveOrder.PurchaseOrderNumber
            formrojasa.typekontrak = receiveOrder.T_KontrakJasaJenisKontrak
            formrojasa.startdate = receiveOrder.T_KontrakJasaStartDate
            formrojasa.enddate = receiveOrder.T_KontrakJasaEndDate
            let used = receiveOrder.T_KontrakJasaUsedCount + " / " +  receiveOrder.T_KontrakJasaJumlahPI
            formrojasa.usedcount = used

            this.data_rojasa = receiveOrder.detail;
            this.form_rojasa = formrojasa;

            this.temp_selected_order = null
            this.list_pojasa = {}
            this.dialog_pickjasa = false
        }
    },
    watch: {
        keyword (newVal, oldVal) {
            if (!newVal) return;
            if (newVal === oldVal) return;
            if (newVal.length < 1) return;
            this.searchOrder(newVal);
        },
        dialog_pickjasa(val) {
            if (val) {
                this.$nextTick(() => {
                    setTimeout(() => {
                        let list = this.list_pojasa.records
                        let curr = this.selected_rojasa
                        let form = this.form_rojasa

                        if (list.length > 0) {
                            let current = {}

                            if (curr.PurchaseOrderID) {
                                current = list.find((item) =>
                                    item.PurchaseOrderID == curr.PurchaseOrderID
                                )
                                this.temp_selected_order = current
                            }

                            if (form.reference) {
                                current = list.find((item) =>
                                    item.PurchaseOrderNumber == form.reference
                                )
                                this.temp_selected_order = current
                            }
                        }
                    }, 500);
                })
            }
        }
    },
}
</script>
