<template>
<div style="width: 100%;">
    <v-layout row wrap>
        <!-- left side -->
        <v-flex xs6 class="left" fill-height pa-1>
            <v-toolbar color="primary" dark>
                <v-toolbar-title class="white--text">
                    APPROVED PURCHASE REQUEST [ {{ levelname }} ]
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn 
                    v-if="(flag == 'G')" dark
                    @click="goBack()" color="orange darken-2" title="Kembali ke listing pending approval" 
                >
                    <v-icon dark left>arrow_back</v-icon>
                    Back
                </v-btn>
            </v-toolbar>

            <v-card class="pa-2">
                <v-layout row>
                    <v-flex xs3 class="pr-1">
                        <v-menu
                            v-model="menuStartDate" lazy offset-y
                            :nudge-right="40" max-width="290px" min-width="290px"
                            :close-on-content-click="false" full-width
                        >
                            <template v-slot:activator="{on}">
                                <v-text-field
                                    :value="startDateFormatted" label="Tanggal Awal"
                                    readonly outline hide-details v-on="on"
                                ></v-text-field>
                            </template>
                            <v-date-picker 
                                no-title v-model="fStartDate" 
                                @input="menuStartDate = false"
                            ></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs3 class="px-1">
                        <v-menu
                            v-model="menuEndDate" lazy offset-y
                            :nudge-right="40" max-width="290px" min-width="290px"
                            :close-on-content-click="false" full-width
                        >
                            <template v-slot:activator="{on}">
                                <v-text-field
                                    :value="endDateFormatted" label="Tanggal Akhir"
                                    readonly outline hide-details v-on="on"
                                ></v-text-field>
                            </template>
                            <v-date-picker 
                                no-title v-model="fEndDate" 
                                @input="menuEndDate = false"
                            ></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs2 class="px-1">
                        <v-autocomplete
                            v-model="fStatus" :items="statusOptions" label="Status"
                            item-text="title" item-value="title" outline hide-details
                        ></v-autocomplete>
                    </v-flex>
                    <v-flex xs3 class="px-1">
                        <v-text-field
                            v-model="fSearch" placeholder="Nomor Request"
                            outline hide-details label="Cari..."
                        ></v-text-field>
                    </v-flex>
                    <v-flex xs class="pl-1">
                        <v-btn dark color="primary" @click="mainTableSearch()">
                            <v-icon>search</v-icon>
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>

            <v-card class="pa-2 mt-2">
                <v-data-table
                    :headers="headers" :items="mainTable"
                    hide-actions class="elevation-1"
                >
                    <template slot="items" slot-scope="props">
                        <tr :class="{ 'amber lighten-4': isSelected(props.item) }" @click="selectMe(props.item)">
                            <td class="text-xs-center pa-2">
                                {{ props.item.PurchaseRequestDirectNumber }}
                                <v-chip small style="border-radius: 5px; flex-grow: 0">
                                    {{ props.item.M_RequesterFullName }}
                                </v-chip>
                            </td>
                            <td class="text-xs-left pa-2">
                                <span class="font-weight-medium">Permintaan: </span><br>
                                <span>{{ props.item.PurchaseRequestDirectDate }}</span><br>
                                <span class="font-weight-medium">Pelaksanaan: </span><br>
                                <span>{{ props.item.PurchaseRequestDirectDateUse }}</span>
                            </td>
                            <td class="text-xs-left pa-2">
                                {{ props.item.PurchaseRequestDirectDescription }}
                            </td>
                            <td class="text-xs-left pa-2">
                                <span class="font-weight-medium"> Estimasi: </span><br>
                                <span>Rp. {{ oneMoney(props.item.PurchaseRequestDirectTotalEstimation) }}</span><br>
                                <span class="font-weight-medium"> Realisasi: </span><br>
                                <span>Rp. {{ oneMoney(props.item.PurchaseRequestDirectTotalRealitation) }}</span>
                            </td>
                            <td class="text-xs-center pa-2">
                                <v-chip 
                                    :text-color="props.item.PurchaseRequestDirectStatus === 'Draft' ? 'black':'white'"
                                    :color="getChipStatusColor(props.item.PurchaseRequestDirectStatus)" small 
                                >
                                    {{ props.item.PurchaseRequestDirectStatus }}
                                </v-chip>
                            </td>
                            <td class="text-xs-center pa-2" style="white-space: nowrap;">
                                <div v-if="props.item.PurchaseRequestDirectStatus != 'Draft'">
                                    <v-btn
                                        v-if="props.item.PurchaseRequestDirectStatus == 'Pending'"
                                        small color="black" title="Edit" @click="{}"
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">edit</v-icon>
                                    </v-btn>
                                    <v-btn
                                        v-if="['Approved', 'Paid', 'Completed'].includes(props.item.PurchaseRequestDirectStatus)"
                                        small color="blue" title="Detail"
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">visibility</v-icon>
                                    </v-btn>
                                    <v-btn
                                        v-if="['Approved', 'Paid', 'Completed'].includes(props.item.PurchaseRequestDirectStatus)"
                                        small color="primary" title="Cetak PDF" @click="printout(props.item)"
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">print</v-icon>
                                    </v-btn>
                                </div>
                            </td>
                        </tr>
                    </template>
                </v-data-table>
                <v-divider></v-divider>
                <div class="text-xs-center">
                    <v-pagination 
                        class="mt-2" v-model="mainTableCurrentPage" 
                        :length="mainTableTotalPage ?? 1" total-visible="5"
                    ></v-pagination>
                </div>
            </v-card>
        </v-flex>

        <!-- right side -->
        <v-flex xs6 class="right" fill-height pa-1>
            <v-card class="pa-2">
                <p>
                    Nama Pengambil:
                    <strong>{{ selectedMainTable.M_RequesterFullName ?? "-" }}</strong>
                </p>
                <v-data-table
                    :headers="detail_headers" :items="detailTable" 
                    hide-actions class="elevation-1"
                >
                    <template slot="items" slot-scope="props">
                        <tr>
                            <td class="text-xs-center pa-2">
                                {{ props.item.RowNumber }}
                            </td>
                            <td class="text-xs-left pa-2">
                                <p class="mb-0">{{ props.item.PurchaseRequestDirectDescription }}</p>
                                <strong>Kategori: {{ props.item.PurchaseDirectCategoryName }}</strong>
                            </td>
                            <td class="text-xs-left pa-2">
                                {{ props.item.PurchaseRequestDirectDetailAmountRequest }}  
                                <strong>{{ props.item.ItemUnitName }}</strong>
                            </td>
                            <td class="text-xs-left pa-2">
                                {{ 
                                    props.item.PurchaseRequestDirectDetailAmount ?? 
                                    props.item.PurchaseRequestDirectDetailAmountRequest 
                                }}
                                <strong>{{ props.item.ItemUnitName }}</strong>
                            </td>
                            <td class="text-xs-left pa-2">
                                <p class="mb-0">
                                    Rp. {{ oneMoney(props.item.PurchaseRequestDirectDetailEstimationPrice) }} / 
                                    <strong>{{ props.item.ItemUnitName }}</strong>
                                </p>
                                <p class="mb-0">
                                    TOTAL : 
                                    <strong>Rp. {{ oneMoney(props.item.PurchaseRequestDirectDetailTotalEstimationPrice) }}</strong>
                                </p>
                            </td>
                            <td class="text-xs-center pa-2">
                                <div v-if="!(selectedMainTable.PurchaseRequestDirectStatus != 'Pending')">
                                    <v-btn
                                        v-if="props.item.isAttachemnt == true"
                                        color="grey" title="Lihat nota pembayaran" small
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                        @click="openDialogPreviewNota(props.item)"
                                    >
                                        <v-icon small color="white">description</v-icon>
                                    </v-btn>
                                    <v-btn
                                        color="black" title="Edit" small @click="updateDetail(props.item)"
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">edit</v-icon>
                                    </v-btn>
                                    <v-btn
                                        color="red" title="Delete" small @click="deleteDetail(props.item)"
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">delete</v-icon>
                                    </v-btn>
                                </div>
                                <div v-else>
                                    <v-btn
                                        v-if="props.item.isAttachemnt == true"
                                        color="grey" title="Lihat nota pembayaran" small
                                        style="min-width: 25px; height: 25px; margin: 0;"
                                        @click="openDialogPreviewNota(props.item)"
                                    >
                                        <v-icon small color="white">description</v-icon>
                                    </v-btn>
                                </div>
                            </td>
                        </tr>
                    </template>
                </v-data-table>
                <v-layout row wrap class="mt-2">
                    <v-text-field
                        v-if="selectedMainTable.PurchaseRequestDirectStatus == 'Pending'"
                        v-model="xNote" label="Catatan" hide-details outline 
                        :disabled="!(Object.keys(selectedMainTable).length > 0)"
                    ></v-text-field>
                    <span v-else-if="selectedMainTable.PurchaseRequestDirectStatus == 'Approved'">
                        Catatan: {{ selectedMainTable.PurchaseRequestDirectNote ?? "-" }}
                    </span>
                    <v-spacer></v-spacer>
                    <v-btn
                        v-if="selectedMainTable.PurchaseRequestDirectStatus == 'Pending'"
                        color="error" outline @click="rejectRequest(selectedMainTable)"
                    >Reject</v-btn>
                    <v-btn
                        v-if="selectedMainTable.PurchaseRequestDirectStatus == 'Pending'"
                        color="primary" dark @click="approveRequest(selectedMainTable)"
                    >Approve</v-btn>
                    <v-btn
                        v-if="selectedMainTable.PurchaseRequestDirectStatus == 'Approved'"
                        color="orange" dark @click="unApproveRequest(selectedMainTable)"
                    >Un-Approve</v-btn>                    
                </v-layout>
            </v-card>
        </v-flex>

        <!-- utility -->
        <one-dialog-edit-req></one-dialog-edit-req>
        <one-dialog-attachment></one-dialog-attachment>

        <!-- dialog delete -->
        <template>
            <v-dialog v-model="dialogAlertDeleteDetail" max-width="30%" persistent>
                <v-card>
                    <v-card-title class="headline grey lighten-2" primary-title>
                        Peringatan !!
                    </v-card-title>

                    <v-card-text class="my-2">
                        {{ msgAlertDeleteRequest }}
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn 
                            @click="dialogAlertDeleteDetail = false"
                            color="error" flat outline
                        >Tutup</v-btn>
                        <v-btn
                            color="primary" dark
                            @click="closeAndDeleteDetail()"
                        >Ya</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>

        <!-- dialog reject -->
        <one-dialog-alert
            :status="dialogAlertRejectRequest"
            :msg="msgAlertDeleteOrReject"
            @forget-dialog-alert="dialogAlertRejectRequest = false"
            @close-dialog-alert="closeAndRejectRequest()"
        ></one-dialog-alert>

        <!-- dialog un-approve -->
        <template>
            <v-dialog v-model="dialogAlertUnapprove" max-width="30%" persistent>
                <v-card>
                    <v-card-title class="headline grey lighten-2" primary-title>
                        Peringatan !!
                    </v-card-title>
                    <v-card-text class="my-2">
                        {{ msgAlertUnapproveRequest }}
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn 
                            @click="dialogAlertUnapprove = false"
                            color="error" flat outline
                        >Tutup</v-btn>
                        <v-btn
                            color="primary" dark
                            @click="closeAndUnapprove()"
                        >Ya</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>
        
        <!-- alert success -->
        <template>
            <v-snackbar
                v-model="snackbar" :timeout="5000" :multi-line="false"
                :vertical="false" :top="true" color="orange"
            >
                {{ msgSnackbar }}
                <v-btn flat @click="updateAlertSuccess()">Tutup</v-btn>
            </v-snackbar>
        </template>

        <!-- alert info -->
        <template>
            <one-dialog-info :status="opendialoginfo" :msg="msginfo"
            @close-dialog-info="opendialoginfo = false"></one-dialog-info>
        </template>

        <!-- dialog print -->
        <one-dialog-print
            :title="printtitle"
            :width="printwidth"
            :height="600"
            :status="openprint"
            :urlprint="urlprint"
            @close-dialog-print="openprint = false"
        ></one-dialog-print>
    </v-layout>
</div>
</template>

<style scoped>
    .date-type-table {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
</style>

<script>
module.exports = {
    mounted() {
        this.$store.dispatch("manager/getlevel");
        this.$store.dispatch("manager/search");
    },
    components: {
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
        "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
        "one-dialog-attachment": httpVueLoader("./formDialogAttachtment.vue"),
        "one-dialog-edit-req": httpVueLoader("./formEditRequest.vue"),
        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    data() {
        return {
            urlprint: "",
            printtitle: "",
            printwidth: "60%",
            openprint: false,
            msgAlertDeleteOrReject: "",
            dialogAlertRejectRequest: false,
            dialogAlertDeleteDetail: false,
            dialogAlertUnapprove: false,
            msgAlertDeleteRequest: "",
            msgAlertUnapproveRequest: "",
            menuStartDate: false,
            menuEndDate: false,
            xStatusNota: "",
            headers: [
                {
                    text: "NO. PD", align: "center", sortable: false,
                    value: "no", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "TANGGAL", align: "left", sortable: false,
                    value: "date", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "KETERANGAN", align: "left", sortable: false,
                    value: "description", width: "30%", class: "blue lighten-3 white--text",
                },
                {
                    text: "TOTAL", align: "left", sortable: false,
                    value: "description", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "STATUS", align: "center", sortable: false,
                    value: "status", width: "10%", class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI", align: "center", sortable: false,
                    value: "action", width: "15%", class: "blue lighten-3 white--text",
                },
            ],
            detail_headers: [
                {
                    text: "NO", align: "center", sortable: false,
                    value: "no", width: "5%", class: "blue lighten-3 white--text",
                },
                {
                    text: "KETERANGAN", align: "center", sortable: false,
                    value: "requestDate", width: "25%", class: "blue lighten-3 white--text",
                },
                {
                    text: "JMLH REQUEST", align: "center", sortable: false,
                    value: "requestDate", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "requestDate", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "requestDate", width: "20%", class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI", align: "center", sortable: false,
                    value: "action", width: "20%", class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    computed: {
        flag() {
            return this.$store.state.manager.flag;
        }, 
        status() {
            return this.$store.state.manager.status;
        },
        xstartdate() {
            return this.$store.state.manager.xstartdate;
        },
        levelname() {
            return this.$store.state.manager.levelname;
        },
        startDateFormatted() {
            return this.formatDate(this.fStartDate)
        },
        endDateFormatted() {
            return this.formatDate(this.fEndDate)
        },
        statusOptions() {
            return this.$store.state.manager.statusOptions;
        },
        mainTable() {
            return this.$store.state.manager.mainTable;
        },
        detailTable() {
            return this.$store.state.manager.detailTable;
        },
        fStartDate: {
            get() {
                return this.$store.state.manager.fStartDate;
            },
            set(val) {
                this.$store.commit("manager/updateFStartDate", val);
            },
        },
        fEndDate: {
            get() {
                return this.$store.state.manager.fEndDate;
            },
            set(val) {
                this.$store.commit("manager/updateFEndDate", val);
            },
        },
        fStatus: {
            get() {
                return this.$store.state.manager.fStatus;
            },
            set(val) {
                this.$store.commit("manager/updateFStatus", val);
            },
        },
        fSearch: {
            get() {
                return this.$store.state.manager.fSearch;
            },
            set(val) {
                this.$store.commit("manager/updateFSearch", val);
            },
        },
        mainTableCurrentPage: {
            get() {
                return this.$store.state.manager.mainTableCurrentPage;
            },
            set(val) {
                this.$store.commit("manager/updateMainTableCurrentPage", val);
                this.$store.commit("manager/updateMainTableLastId", -1);
                this.$store.dispatch("manager/search");
            },
        },
        mainTableTotalPage: {
            get() {
                return this.$store.state.manager.countMainTable;
            },
            set(val) {
                this.$store.commit("manager/updateCountMainTable", val);
            },
        },
        selectedMainTable: {
            get() {
                return this.$store.state.manager.selectedMainTable;
            },
            set(val) {
                this.$store.commit("updateSelectedMainTable", val);
            },
        },
        xNote: {
            get() {
                return this.$store.state.manager.xNote;
            },
            set(val) {
                this.$store.commit("manager/updateXNote", val);
            },
        },
        xPRID: {
            get() {
                return this.$store.state.manager.xPRID;
            },
            set(val) {
                this.$store.commit("manager/updateXPRID", val);
            },
        },
        xPRDID: {
            get() {
                return this.$store.state.manager.xPRDID;
            },
            set(val) {
                this.$store.commit("manager/updateXPRDID", val);
            },
        },
        xStatus: {
            get() {
                return this.$store.state.manager.xStatus;
            },
            set(val) {
                this.$store.commit("manager/updateXStatus", val);
            },
        },
        xDescriptionDetail: {
            get() {
                return this.$store.state.manager.xDescriptionDetail;
            },
            set(val) {
                this.$store.commit("manager/updateXDescriptionDetail", val);
            },
        },
        opendialoginfo: {
            get() {
                return this.$store.state.manager.open_dialog_info
            },
            set(val) {
                this.$store.commit("manager/update_open_dialog_info", val)
            }
        },
        msginfo: {
            get() {
                return this.$store.state.manager.msg_info
            },
            set(val) {
                this.$store.commit("manager/update_msg_info", val)
            }
        },
        snackbar: {
            get() {
                return this.$store.state.manager.alertSuccess;
            },
            set(val) {
                this.$store.commit("manager/updateAlertSuccess", val);
            },
        },
        msgSnackbar: {
            get() {
                return this.$store.state.manager.successMessage;
            },
            set(val) {
                this.$store.commit("manager/updateSuccessMessage", val);
            },
        },
    },
    methods: {
        updateAlertSuccess() {
            this.$store.commit("manager/updateAlertSuccess", false);
        },
        roundToThreeSignificantDigits(digit) {
            // if (num === 0) return 0;
            
            // const absNum = Math.abs(num);
            // const magnitude = Math.floor(Math.log10(absNum)) + 1;
            // if (magnitude <= 3) return num;
            // const factor = Math.pow(10, magnitude - 3);
            // return Math.round(num / factor) * factor;

            const num = parseInt(digit, 10)
            if (isNaN(num) || num <= 0) {
                return '00';
            }

            const scale = 10 ** digit.length;
            const decimal = num / scale
            return Math.round(decimal * 100).toString();
        },
        oneMoney(value) {
            let splitValue = value.toString().split(".");

            if(splitValue.length > 1) {
                let val = splitValue[0]
                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
            } else {
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }
        },
        formatDate(date) {
            if (!date) return null;

            const [year, month, day] = date.split("-");
            return `${day}-${month}-${year}`;
        },
        goBack() {
            window.history.back();
        },
        mainTableSearch() {
            this.$store.dispatch("manager/search");
            this.$store.commit("manager/updateSelectedMainTable", {});
            this.$store.commit("manager/updateDetailTable", []);
        },
        isSelected(item) {
            return (        
                item.PurchaseRequestDirectNumber ==
                this.$store.state.manager.selectedMainTable.PurchaseRequestDirectNumber
            );
        },
        selectMe(item) {
            this.$store.commit("manager/updateSelectedMainTable", item);
            this.$store.dispatch("manager/searchDetail");
        },
        getChipStatusColor(status) {
            switch (status) {
                case "Pending":
                    return "warning";
                case "Approved":
                    return "success";
                case "Rejected":
                    return "error";
                case "Completed":
                    return "info";
                case "Paid":
                    return "success";
                default:
                    return "";
            }
        },
        openDialogPreviewNota(data) {
            const fileBaseUrl = BASE_URL + "/one-media/cashier/";
            const allImageUrls = [];
            for (let index = 0; index < data.dataAttachment.length; index++) {
                const element = data.dataAttachment[index];
                allImageUrls.push(fileBaseUrl + element.PurchaseDirectAttachmentName)
            }

            this.$store.commit("manager/update_imagePreviews", allImageUrls);
            this.$store.commit("manager/update_dialog_form", true);
            this.$store.commit("manager/update_cekFile", false);
            this.$store.commit("manager/update_actAttach", 'preview');
        },
        updateDetail(val) {
            this.$store.commit("manager/updateSelectedDetailTable", val);
            this.$store.commit("manager/updateDialogDetail", true);
        },
        deleteDetail(data) {
            this.xPRID = data.PurchaseRequestDirectDetailPurchaseRequestDirectID;
            this.xPRDID = data.PurchaseRequestDirectDetailID;
            this.xDescriptionDetail = data.PurchaseRequestDirectDescription;

            this.msgAlertDeleteRequest = `Yakin, mau hapus Request [${data.PurchaseRequestDirectDescription}] ?`;
            this.dialogAlertDeleteDetail = true;
        },
        closeAndDeleteDetail() {
            this.$store.dispatch("manager/deleteDetail", {
                PRID: this.xPRID,
                PRDDescription: this.xDescriptionDetail,
                PRDID: this.xPRDID,
            });
            this.dialogAlertDeleteDetail = false
        },
        rejectRequest(data) {
            this.xPRID = data.PurchaseRequestDirectID
            this.xStatus = data.PurchaseRequestDirectStatus

            this.msgAlertDeleteOrReject = `Yakin, mau Reject Purchase Request [${data.PurchaseRequestDirectNumber}] ?`;
            this.dialogAlertRejectRequest = true;
        },
        closeAndRejectRequest() {
            if (this.xStatus === 'Pending') {
                this.$store.dispatch("manager/rejectRequest", {
                    PRNumber: this.selectedMainTable.PurchaseRequestDirectNumber,
                    PRID: this.xPRID,
                });
            }

            this.dialogAlertRejectRequest = false;
        },
        approveRequest(data) {
            this.xPRID = data.PurchaseRequestDirectID;
            this.xStatus = data.PurchaseRequestDirectStatus;
            this.xStatusNota = data.PurchaseRequestDirectNotaStatus;

            if (this.xStatusNota == 'Pending') {
                this.opendialoginfo = true
                this.msginfo = "Bukti Pembayaran belum di approve, silahkan melakukan approve bukti pembayaran!"
            } else {
                this.detailTable.forEach((detail) => {
                    if (!detail.PurchaseRequestDirectDetailAmount) {
                        this.$store.dispatch("manager/updateDetail", {
                            PRID: data.PurchaseRequestDirectID,
                            PRDID: detail.PurchaseRequestDirectDetailID,
                            PRDDescription: detail.PurchaseRequestDirectDescription,
                            PRDAmount: parseFloat(detail.PurchaseRequestDirectDetailAmountRequest),
                            PRDPrice: parseFloat(detail.PurchaseRequestDirectDetailEstimationPrice),
                            PRDTotal: parseFloat(detail.PurchaseRequestDirectDetailTotalEstimationPrice)
                        });
                    }
                });

                if (this.xStatus === 'Pending') {
                    this.$store.dispatch("manager/approveRequest", {
                        PRID: this.xPRID,
                        PRNumber: data.PurchaseRequestDirectNumber,
                        PRNote: this.xNote
                    })
                }
            }
        },
        unApproveRequest(data) {
            this.xPRID = data.PurchaseRequestDirectID
            this.xStatus = data.PurchaseRequestDirectStatus

            this.msgAlertUnapproveRequest = `Yakin, mau unapprove Request [${data.PurchaseRequestDirectNumber}] ?`
            this.dialogAlertUnapprove = true
        },
        closeAndUnapprove() {
            if (this.xStatus === 'Approved') {
                this.$store.dispatch("manager/unApproveRequest", {
                    PRNumber: this.selectedMainTable.PurchaseRequestDirectNumber,
                    PRID: this.xPRID,
                })
            }
            this.dialogAlertUnapprove = false;
        },
        printout(val) {
            this.printwidth = "60%";
            this.printtitle = "";
            let user = one_user();
            let username = user && user.M_StaffName ? user.M_StaffName : "";
            let tm = Date.now();
            this.urlprint = BASE_URL + "/one-api/report/rpt_pr_direct_approval/pdf?id=" + val.PurchaseRequestDirectID + "&username=" + username + "&tm=" + tm;
            this.openprint = true;
        }
    },
}
</script>