<template>
    <v-layout row wrap>
        <v-flex xs12 class="left" fill-height pa-1>
            <filter-pr></filter-pr>
            <v-card class="mt-2">
                <v-data-table 
                    class="elevation-1"
                    hide-actions xs12 
                    :headers="headers"
                    :loading="false"
                    :items="list_pr.records"
                >
                    <template v-slot:items="props">
                        <tr>
                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDate }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestNumber }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.S_RegionalName }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
                            <td class="text-xs-center pa-2">{{ `${props.item.PurchaseRequestDetailQty} ${props.item.UnitRequest || ''}` }}</td>
                            <td class="text-xs-center pa-2">
                                <template v-if="Array.isArray(props.item.StockQtyArray)">
                                    <div v-for="(stock, index) in props.item.StockQtyArray" :key="index">
                                        <span class="grey lighten-3 rounded pa-1 caption">
                                            {{ `${stock.QtyTotal} ${stock.ItemUnitName || ''}` }}
                                        </span>
                                    </div>
                                </template>
                                <template v-else>
                                    0 (No Data)
                                </template>
                            </td>
                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailIsCito }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailStatus }}</td>
                            <td class="text-xs-center pa-2">
                                <v-btn 
                                    small round
                                    color="primary" 
                                    :outline="isInList(props.item.PurchaseRequestFlagStatus, 'TF')"
                                    :disabled="props.item.M_BranchCode == ''"
                                    @click="changeFlag(props.item, 'TF')"
                                >TF</v-btn>
                                <v-btn 
                                    small round
                                    color="primary" 
                                    :outline="isInList(props.item.PurchaseRequestFlagStatus, 'PO')"
                                    @click="changeFlag(props.item, 'PO')"
                                >PO</v-btn>
                            </td>
                        </tr>
                    </template>
                </v-data-table>
                <div class="text-xs-center pt-2">
                    <v-pagination v-model="pagination" :length="length_page" :total-visible="7"></v-pagination>
                </div>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<style scoped>
.stock-item {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 2px 0;
}
</style>

<script>
    module.exports = {
        components: {
            "filter-pr": httpVueLoader("./filter-pr.vue")
        },
        mounted() {
            let params = {
                currpage: this.pagination,
                startdate: this.startdate,
                enddate: this.enddate,
                regional: this.selected_regional.S_RegionalID,
                branch: !this.selected_branch ? "" : this.selected_branch.M_BranchCode,
            }
            this.$store.dispatch("listingpr/getlistingpurchase", params)
            this.$store.dispatch("listingpr/getbranch", { regionalID: this.selected_regional.S_RegionalID })
        },
        data() {
            return {
                headers: [
                    {
                        text: "Tanggal Request",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "8%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Nomor Request",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "8%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Regional",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "10%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Cabang",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "10%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Item",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "25%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Request",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "6%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Stok Gdg Reg",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "6%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Cito",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "4%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Status",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "8%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "Flag",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "15%",
                        class: "blue lighten-3 white--text",
                    },
                ],
            }
        },
        computed: {
            list_pr() {
                return this.$store.state.listingpr.list_pr
            },
            length_page() {
                let total = this.list_pr.total;
                if (total == undefined || total == 0) {
                    return 1
                }

                return Math.ceil(total/ 10)
            },
            selected_regional() {
                return this.$store.state.listingpr.selected_regional
            },
            selected_branch() {
                return this.$store.state.listingpr.selected_branch
            },
            startdate() {
                return this.$store.state.listingpr.startdate
            },
            enddate() {
                return this.$store.state.listingpr.enddate
            },
            pagination: {
                get() {
                    return this.$store.state.listingpr.pagination
                },
                set(data) {
                    let params = {
                        currpage: data,
                        startdate: this.startdate,
                        enddate: this.enddate,
                        regional: this.selected_regional.S_RegionalID,
                        branch: !this.selected_branch ? "" : this.selected_branch.M_BranchCode,
                    }

                    this.$store.commit("listingpr/update_pagination", data)
                    this.$store.dispatch("listingpr/getlistingpurchase", params)
                }
            },
            detaildialog: {
                get() {
                    return this.$store.state.listingpr.detaildialog
                },
                set(data) {
                    this.$store.commit("listingpr/update_detaildialog", data)
                }
            }
        },
        methods: {
            isInList(status, val) {
                if (status == "") {
                    return true
                }

                let li = status.split(",")
                if (li.includes(val)) {
                    return false
                }
                return true
            },
            async changeFlag(item, status) {
                let flag = ""
                let li = item.PurchaseRequestFlagStatus.split(",")
                if (li.includes(status)) {
                    // const updated = li.filter(item => item !== status)
                    // flag = updated.join(",")
                    // console.log("already on read: ", status)
                    return
                } else {
                    li.push(status)
                    flag = li.join(",")
                }
                
                let params = {
                    reqnumber: item.PurchaseRequestNumber,
                    requestflagid: item.PurchaseRequestFlagID,
                    reqdetailid: item.PurchaseRequestDetailID,
                    regionalid: item.S_RegionalID,
                    branchcode: item.M_BranchCode,
                    qty: item.PurchaseRequestDetailQty,
                    UnitIDRequest: item.UnitIDRequest,
                    // stock: item.StockQty,
                    stock: item.StockQtyArray,
                    status: flag
                }
                if (item.PurchaseRequestFlagID == "new") {
                    // console.log("new : ", params)
                    this.$store.dispatch("listingpr/addflagstatus", params)
                } else {
                    // console.log("edit : ", params)
                    this.$store.dispatch("listingpr/editflagstatus", params)
                }
            }
        },
        watch: {
            
        },
    }
</script>