<template>
    <v-layout column pb-2>
        <v-card class="pa-1 mb-0">
            <v-layout row wrap class="scroll-container" style="max-height:350px;overflow: auto;">
                <v-flex xs12>
                    <v-data-table :headers="headers" :items="reflextests" :loading="isLoading" hide-actions class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-html="props.item.Nat_TestName">
                            </td>
                            <td class="text-xs-left pa-2" v-html="props.item.Nat_ConditionName">
                            </td>
                            <td class="text-xs-left pa-2" v-html="props.item.grupmandatory">
                            </td>
                            <td class="text-xs-left pa-2">
                                <v-icon small class="ml-3" color="primary" @click="editFormReflexTest(props.item)">edit</v-icon>
                                <v-icon small class="ml-3" color="error" @click="deleteFormReflexTest(props.item)">clear</v-icon>
                            </td>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>

            <template>
                <v-layout row justify-center>
                    <v-dialog v-model="dialogreflextest" persistent max-width="750px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">FORM ARGUMENT</span>
                            </v-card-title>
                            <v-card-text class="pt-0 pb-0">
                                <v-form ref="formmultirulereflextest" v-model="validreflextest" lazy-validation>
                                    <v-layout wrap>
                                        <v-flex xs12>
                                            <v-select readonly class="pr-1" item-text="Nat_ConditionName" return-object :items="xkondisiheaders" v-model="xkondisiheader"
                                                label="Kondisi"></v-select>
                                        </v-flex>
                                        <v-flex xs12>
                                            <v-autocomplete label="Argument 1 *" v-model="xautoreflextest" :items="xautoreflextests" :search-input.sync="search_reflextest"
                                                auto-select-first no-filter item-text="Nat_TestName" return-object no-data-text="Cari Argument 1"
                                                small>
                                                <template slot="item" slot-scope="{ item }">
                                                    <v-list-tile-content>
                                                        <v-list-tile-title v-text="item.Nat_TestName"></v-list-tile-title>
                                                    </v-list-tile-content>
                                                </template>
                                            </v-autocomplete>
                                            <p v-if="checkError('requiretest')" class="error pl-2 pr-2" style="color:#fff">Argument 1 harus dipilih dooong</p>
                                        </v-flex>
                                        <v-flex xs12>
                                            <v-select class="pr-1" item-text="Nat_ConditionName" return-object :items="xkondisitests" v-model="xkondisitest" label="Kondisi*"></v-select>
                                            <p v-if="checkError('requirecondition')" class="error pl-2 pr-2" style="color:#fff">Kondisi harus dipilih dooong</p>
                                        </v-flex>
                                        <v-flex>
                                            <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
                                        </v-flex>
                                        <v-flex xs12 pa-2>
                                            <v-layout row>
                                                <v-flex xs5 pa-1>
                                                    <v-autocomplete label="Pemeriksaan Mandatory" v-model="xorderautotest" :items="xorderautotests" :search-input.sync="search_testmandatory"
                                                        auto-select-first no-filter item-text="Nat_TestName" return-object no-data-text="Cari Pemeriksaan"
                                                        outline small>
                                                        <template slot="item" slot-scope="{ item }">
                                                            <v-list-tile-content>
                                                                <v-list-tile-title v-text="item.Nat_TestName"></v-list-tile-title>
                                                            </v-list-tile-content>
                                                        </template>
                                                    </v-autocomplete>
                                                </v-flex>
                                                <v-flex xs5 pa-1>
                                                    <v-select outline class="mini-select" item-text="Nat_ConditionName" return-object :items="xkondisimandatorys" v-model="xkondisimandatory"
                                                        label="Kondisi Mandatory"></v-select>
                                                </v-flex>
                                                <v-flex xs2 pa-1>
                                                    <span @click="addTest()" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row wrap>
                                        <v-flex xs12 pt-2 pb-1>
                                            <table style="
                                        font-family: arial, sans-serif;
                                        border-collapse: collapse;
                                        width: 100%;
                                        border: 0px;
                                    " class="px">
                                                <tr>
                                                    <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="40%" class="pa-2 blue lighten-1 white--text">PEMERIKSAAN MANDATORY
                                                    </td>
                                                    <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="40%" class="pa-2 blue lighten-1 white--text">KONDISI MANDATORY
                                                    </td>
                                                    <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="20%" class="pa-2 blue lighten-1 white--text">HAPUS
                                                    </td>
                                                </tr>
                                                <tr class="mini-input" v-for="(vpx,idx) in xordertests">
                                                    <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;
                                                        text-align:left;
                                                        vertical-align:left;" align="left">{{vpx.Nat_TestName}}

                                                    </td>
                                                    <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" class="text-md-left pl-3">{{vpx.Nat_ConditionName}}</td>
                                                    <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" class="text-md-center pr-2">
                                                        <v-icon color="#c75c3a" @click="deleteDataPx(idx)">delete</v-icon>
                                                    </td>
                                                </tr>
                                                <tfoot>
                                                </tfoot>
                                            </table>
                                        </v-flex>
                                    </v-layout>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="blue darken-1" flat @click="updateDialogFormReflexTest()">Tutup</v-btn>
                                <v-btn color="blue darken-1" flat @click="saveFormReflexTest()">Simpan</v-btn>
                            </v-card-actions>
                            </v-form>
                        </v-card>
                    </v-dialog>
                </v-layout>
            </template>



            <one-dialog-print :title="printtitle" :width="printwidth" :height="500" :status="openprint" :urlprint="urlprint" @close-dialog-print="closePrint"></one-dialog-print>
            <template>

                <v-dialog v-model="dialogdeletealertreflextest" max-width="30%">
                    <v-card>
                        <v-card-title class="headline blue lighten-2 pt-2 pb-2" primary-title>
                            Peringatan !
                        </v-card-title>
                        <v-card-text class="pt-2 pb-2">
                            <v-layout row>
                                <v-flex xs12 d-flex>
                                    <v-layout row>
                                        <v-flex pb-1 xs12>
                                            <v-layout row>
                                                <v-flex pt-2 pr-2 xs12>
                                                    {{msgalertreflextest}}
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout>
                        </v-card-text>
                        <v-divider></v-divider>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="primary" flat @click="dialogdeletealertreflextest = false">
                                Tutup
                            </v-btn>
                            <v-btn color="primary" flat @click="closeDeleteAlertReflexTest()">
                                Yakin lah
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>

            </template>
        </v-card>
    </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }

    table.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }

    .scroll-container {
        scroll-padding: 50px 0 0 50px;
    }

    ::-webkit-scrollbar {
        width: 7px;
    }

    /* this targets the default scrollbar (compulsory) */

    ::-webkit-scrollbar-track {
        background-color: #73baf3;
    }

    /* the new scrollbar will have a flat appearance with the set background color */

    ::-webkit-scrollbar-thumb {
        background-color: #2196f3;
    }

    /* this will style the thumb, ignoring the track */

    ::-webkit-scrollbar-button {
        background-color: #0079da;
    }

    /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

    ::-webkit-scrollbar-corner {
        background-color: black;
    }

    /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
    module.exports = {
        components: {
            'one-date-picker': httpVueLoader('../../common/oneDatePicker.vue'),
            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
        },
        data() {
            return {
                query: "",
                items: [],
                openprint: false,
                urlprint: '',
                printtitle: '',
                printwidth: 600,
                formatreport: 'pdf',
                page: 1,
                reflextestname: '',
                reflextestcode: '',
                search_reflextest: '',
                search_testmandatory: '',
                reflextestnameRules: [
                    v => !!v || 'Argument 1 harus dipilih'
                ],
                kondisitestRules: [
                    v => !!v || 'Kondisi harus dipilih'
                ],
                relasiRules: [
                    v => !!v || 'Relasi harus dipilih'
                ],
                headers: [{
                        text: "PASIEN",
                        align: "LEFT",
                        sortable: false,
                        value: "name",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "PEMERIKSAAN",
                        align: "LEFT",
                        sortable: false,
                        value: "lab",
                        width: "40%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "TOTAL",
                        align: "LEFT",
                        sortable: false,
                        value: "lab",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "AKSI",
                        align: "LEFT",
                        sortable: false,
                        value: "status",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    }
                ],
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 100,
                    sortBy: 'trx_id ASC',
                    totalItems: this.$store.state.review.total_transactions
                },
                statuss: [{
                        waktu: '16-07-2019 10:00',
                        status: 'Order Dibuat',
                        reflextest: 'Nagita Slavina'
                    },
                    {
                        waktu: '16-07-2019 11:00',
                        status: 'Order Dikirim',
                        reflextest: 'Nagita Slavina'
                    },
                    {
                        waktu: '16-07-2019 12:00',
                        status: 'Order dikonfirmasi',
                        reflextest: 'Chacha Frederica'
                    },
                    {
                        waktu: '16-07-2019 13:00',
                        status: 'Telah dibuat Surat Jalan',
                        reflextest: 'Chacha Frederica'
                    },
                    {
                        waktu: '16-07-2019 14:00',
                        status: 'Kurir akan mengambil sampel',
                        reflextest: 'Satria Subiantoro'
                    }
                ],
                color: "success",
                validreflextest: false,
                xid: 0,
                isinput: "N",
                countprice: 0,
                reflextestdetailid: 0,
                reflextestdetailname: "",
                reflextestlang: "",
                reflextesttext: "",
                isadvance: "N",
                reflextestformatadvance: "",
                issenttomultirule: "N",
                menustartdate: false,
                menuenddate: false,
                date: new Date().toISOString().substr(0, 10),

                dialogdeletealertreflextest: false,
                dialogverifyalertreflextest: false,
                dialogreleasealertreflextest: false,
                alertverify: false,
                dialogunreleasealertreflextest: false,
                dialogunverifyalertreflextest: false,
                msgalertreflextest: ""
            };
        },
        mounted() {
            // this.$store.dispatch("review/selectcondition")
            // this.$store.dispatch("review/selectconditionmandatory")
        },
        computed: {
            reflextests() {
                return this.$store.state.review.reflextests
            },
            dialogreflextest() {
                return this.$store.state.review.dialog_form_reflextest
            },
            xerrors() {
                return this.$store.state.review.errors
            },
            isLoading() {
                return this.$store.state.review.search_status == 1
            },
            xkondisiheaders() {
                return this.$store.state.review.kondisiheaders
            },
            xkondisiheader: {
                get() {
                    return this.$store.state.review.selected_kondisiheader
                },
                set(val) {
                    this.$store.commit("review/update_selected_kondisiheader", val)
                }
            },
            xkondisitests() {
                return this.$store.state.review.kondisitests
            },
            xkondisitest: {
                get() {
                    return this.$store.state.review.selected_kondisitest
                },
                set(val) {
                    this.$store.commit("review/update_selected_kondisitest", val)
                }
            },
            xkondisimandatorys() {
                return this.$store.state.review.kondisimandatorys
            },
            xkondisimandatory: {
                get() {
                    return this.$store.state.review.selected_kondisimandatory
                },
                set(val) {
                    this.$store.commit("review/update_selected_kondisimandatory", val)
                }
            },
            xrelasis() {
                return this.$store.state.review.relasis
            },
            xrelasi: {
                get() {
                    return this.$store.state.review.selected_relasi
                },
                set(val) {
                    this.$store.commit("review/update_selected_relasi", val)
                }
            },
            xorderautotests() {
                return this.$store.state.review.orderautotests
            },
            xorderautotest: {
                get() {
                    return this.$store.state.review.orderautotest
                },
                set(val) {
                    this.$store.commit("review/update_orderautotest", val)
                    this.$store.dispatch("review/selectconditionmandatory", {
                        isquantitative: val.Nat_TestIsQuantitative
                    })
                }
            },
            xordertests() {
                return this.$store.state.review.ordertests
            },
            startComputedDateFormatted() {
                return this.formatDate(this.xstartdate)
            },
            xstartdate: {
                get() {
                    return this.$store.state.review.startdate
                },
                set(val) {
                    this.$store.commit("review/update_startdate", val)
                }
            },
            endComputedDateFormatted() {
                return this.formatDate(this.xenddate)
            },
            xenddate: {
                get() {
                    return this.$store.state.review.enddate
                },
                set(val) {
                    this.$store.commit("review/update_enddate", val)
                }
            },
            xbases() {
                return this.$store.state.review.bases
            },
            xbase: {
                get() {
                    return this.$store.state.review.base
                },
                set(val) {
                    this.$store.commit("review/update_base", val)
                }

            },
            xomzettypes() {
                return this.$store.state.review.omzettypes
            },
            xomzettype: {
                get() {
                    return this.$store.state.review.omzettype
                },
                set(val) {
                    this.$store.commit("review/update_omzettype", val)
                }

            },
            xreflextesttypes() {
                return this.$store.state.review.reflextesttypes
            },
            xreflextesttype: {
                get() {
                    return this.$store.state.review.reflextesttype
                },
                set(val) {
                    this.$store.commit("review/update_reflextesttype", val)
                }

            },
            xagingtypes() {
                return this.$store.state.review.agingtypes
            },
            xagingtype: {
                get() {
                    return this.$store.state.review.agingtype
                },
                set(val) {
                    this.$store.commit("review/update_agingtype", val)
                }

            },
            xstatuss() {
                return this.$store.state.review.statuss
            },
            dialogstatusorder() {
                return this.$store.state.review.dialog_status_order
            },
            xautoreflextests() {
                return this.$store.state.review.autoreflextests
            },
            xautoreflextest: {
                get() {
                    return this.$store.state.review.autoreflextest
                },
                set(val) {
                    this.$store.commit("review/update_autoreflextest", val)
                    this.$store.dispatch("review/selectconditiontest", {
                        isquantitative: val.Nat_TestIsQuantitative
                    })
                }
            }
        },
        methods: {
            checkError(value) {
                var errors = this.$store.state.review.errors
                if (errors.includes(value)) {
                    return true
                } else {
                    return false
                }
            },
            updateDialogFormReflexTest() {
                this.$store.commit("review/update_dialog_form_reflextest", false)
            },
            updateDialogStatusOrder() {
                this.$store.commit("review/update_dialog_status_order", false)
            },
            setStatusOrder(val) {
                this.$store.commit("review/update_reflextests", {})
                this.$store.commit("review/update_dialog_status_order", true)
                this.$store.commit("review/update_statuss", val.statuss)
            },
            doPriceList(val) {
                console.log(location)
                var id = val.id
                location.replace("/one-ui/test/vuex/one-md-price/" + "?id=" + id)
            },
            doPrice() {
                console.log(location)
                var id = this.xid
                location.replace("/one-ui/test/vuex/one-md-price/" + "?id=" + id)
            },
            addTest() {
                var oldArr = this.$store.state.review.ordertests
                var arrTest = this.$store.state.review.orderautotest
                var arrValue = this.$store.state.review.selected_kondisimandatory
                var arrAll = _.assignIn(arrTest, arrValue)
                oldArr.push(_.assignIn(arrTest, arrValue))
                this.search_testmandatory = ''
                this.$store.commit("review/update_orderautotests", [])
                this.$store.commit("review/update_orderautotest", {})
                this.$store.commit("review/update_selected_kondisimandatory", {})

            },
            deleteDataPx(idx) {
                var inx = parseInt(idx);
                var xrow = this.$store.state.review.ordertests[inx]
                if (parseInt(xrow.xid) !== 0) {
                    var xdeltest = this.$store.state.review.deleted_ordertests
                    xdeltest.push(xrow)
                    this.$store.commit("review/update_deleted_ordertests", xdeltest)
                }
                var oldArr = this.$store.state.review.ordertests
                oldArr.splice(inx, 1)
                this.$store.commit("review/update_ordertests", oldArr)
            },
            thr_search_reflextest: _.debounce(function () {
                this.$store.dispatch("review/searchreflextest", {
                    tes: this.search_reflextest
                })
            }, 2000),
            thr_search_testmandatory: _.debounce(function () {
                this.$store.dispatch("review/searchmandatorytest", {
                    tes: this.search_testmandatory
                })
            }, 2000),
            doPrint() {
                console.log('doprint')
                this.printwidth = 1028
                this.printtitle = ""
                let reflextest = one_reflextest()
                var id = this.xid
                var d = new Date();
                var n = d.getTime()
                var rptname = 'test_price'
                var formatrpt = this.formatreport

                this.urlprint = "/birt/run?__report=report/one/md/" + rptname + ".rptdesign&__format=" +
                    formatrpt + "&PReflexTestID=" + id + "&reflextestdetailname=" + review.M_ReflexTestReflexTestname +
                    "&tm=" + n

                this.openprint = true
            },
            closePrint() {
                this.openprint = false
            },
            openFormReflexTest(val) {
                this.$store.commit("review/update_errors", [])
                this.$store.commit("review/update_ordertests", [])
                this.xid = val
                this.reflextestname = ''
                this.reflextestcode = ''
                this.$store.commit("review/update_autoreflextests", [])
                this.$store.commit("review/update_autoreflextest", {})
                this.$store.commit("review/update_selected_kondisitest", {})
                this.$store.commit("review/update_dialog_form_reflextest", true)
            },
            editFormReflexTest(data) {
                this.$store.commit("review/update_errors", [])
                this.xid = data.id
                this.$store.commit("review/update_autoreflextests", [{
                    Nat_TestID: data.Nat_TestID,
                    Nat_TestName: data.Nat_TestName
                }])
                this.$store.commit("review/update_autoreflextest", {
                    Nat_TestID: data.Nat_TestID,
                    Nat_TestName: data.Nat_TestName
                })
                this.$store.dispatch("review/selectconditionheader", {
                    isquantitative: data.headerIsQuantitative
                })
                this.$store.commit("review/update_selected_kondisiheader", {
                    Nat_ConditionID: data.kondisiheaderid,
                    Nat_ConditionName: data.kondisiheader
                })
                this.$store.dispatch("review/selectconditiontest", {
                    isquantitative: data.testIsQuantitative
                })
                this.$store.commit("review/update_selected_kondisitest", {
                    Nat_ConditionID: data.Nat_ConditionID,
                    Nat_ConditionName: data.Nat_ConditionName
                })
                this.$store.commit("review/update_ordertests", data.mandatorys)
                this.$store.commit("review/update_act", 'edit')
                this.$store.commit("review/update_dialog_form_reflextest", true)
            },
            checkError(value) {
                var errors = this.$store.state.review.errors
                if (errors.includes(value)) {
                    return true
                } else {
                    return false
                }
            },
            saveFormReflexTest() {
                this.$store.commit("review/update_errors", [])
                var errors = this.$store.state.review.errors
                if (_.isEmpty(this.xautoreflextest)) {
                    errors.push("requiretest")
                }
                if (_.isEmpty(this.xkondisitest)) {
                    errors.push("requirecondition")
                }
                if (errors.length === 0) {
                    this.$store.dispatch("review/save", {
                        xid: this.xid,
                        multiruleid: 0,
                        nattestid: this.$store.state.review.autoreview.Nat_TestID,
                        nattestname: this.$store.state.review.autoreview.Nat_TestName,
                        conditionid: this.$store.state.review.selected_kondisitest.Nat_ConditionID,
                        conditionname: this.$store.state.review.selected_kondisitest.Nat_ConditionName,
                        ordertests: this.xordertests,
                        deleted_ordertests: this.$store.state.review.deleted_ordertests
                    })
                }

            },
            set_date2(x) {
                this.startdate = x.new_date
            },
            set_date3(x) {
                this.enddate = x.new_date
            },
            formatDate(date) {
                if (!date) return null

                const [year, month, day] = date.split('-')
                return `${day}-${month}-${year}`
            },
            deFormatedDate(date) {
                if (!date) return null

                const [day, month, year] = date.split('-')
                return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
            },
            updateAlert_success(val) {
                this.$store.commit("review/update_alert_success", val)
            },
            deleteFormReflexTest(data) {
                this.xid = data.id

                this.msgalertreflextest = "Yakin, mau hapus reflextest ini?"
                this.dialogdeletealertreflextest = true
            },
            closeDeleteAlertReflexTest() {
                this.$store.dispatch("review/delete", {
                    xid: this.xid,
                    multiruleid: 0,
                    nattestid: this.$store.state.review.autoreview.Nat_TestID,
                    nattestname: this.$store.state.review.autoreview.Nat_TestName,
                    conditionid: this.$store.state.review.selected_kondisitest.Nat_ConditionID,
                    conditionname: this.$store.state.review.selected_kondisitest.Nat_ConditionName
                })
                this.dialogdeletealertreflextest = false
            }
        },
        watch: {
            search_reflextest(val, old) {
                if (val == old) return
                if (!val) return
                if (val.length < 1) return
                if (this.$store.state.review.update_autocomplete_status == 1) return
                this.thr_search_reflextest()
            },
            search_testmandatory(val, old) {
                if (val == old) return
                if (!val) return
                if (val.length < 1) return
                if (this.$store.state.review.update_autocomplete_status == 1) return
                this.thr_search_testmandatory()
            }
        }
    }
</script>