<template>

   <v-dialog
      v-model="dialog"
      width="1000"
      
      >
      <v-btn
         slot="activator"
         color="primary"
         class="ma-1 one-btn-icon"
         
         >
         <span class="icon-add"></span>
      </v-btn>

         <v-card>
            <v-card-title
               class="headline grey lighten-2 pt-2 pb-2"
               primary-title
               >
               Rujukan Baru
            </v-card-title>
               <v-card-text class="pt-2 pb-2">
                   <v-layout row style="height: 60vh">
                       <v-flex xs4>
                           <v-layout row wrap>
                               <v-flex xs12>
                                   <v-text-field
                                       label="Cabang Asal"
                                       :value="default_branch.M_BranchName"
                                       readonly
                                   ></v-text-field>
                               </v-flex>

                               <v-flex xs12>
                                   <v-select
                                       :items="branches"
                                       item-value="M_BranchID"
                                       item-text="M_BranchName"
                                       return-object
                                       v-model="selected_branch"
                                       label="Cabang Tujuan Rujukan"
                                   ></v-select>
                               </v-flex>

                               <v-flex xs12>
                                   <v-select
                                       :items="worklists"
                                       item-value="T_WorklistID"
                                       item-text="T_WorklistName"
                                       return-object
                                       v-model="selected_worklist"
                                       label="Worklist"
                                   ></v-select>
                               </v-flex>

                               <v-flex xs12 class="container_pxs">
                                   <v-layout row wrap v-if="selected_worklist">
                                       <v-flex xs12 v-for="(px, n) in selected_worklist.tests" v-bind:key="px.test_id" pt-1 pr-1>
                                           <v-btn :color="is_selected_px(px) ? 'success':'red'" dark class="ma-0" 
                                            small block
                                            @click="select_px(px)">{{px.test_name}}</v-btn>
                                       </v-flex>
                                   </v-layout>
                               </v-flex>
                           </v-layout>
                       </v-flex>

                       <v-flex xs8 pl-4 style="overflow: auto">
                           <v-data-table
                                :headers="headers" :items="patients"
                                :loading="isLoading"
                                hide-actions class="xelevation-1"
                                fixed-header>
                                <template slot="items" slot-scope="props">
                                <td class="text-xs-center pa-2 green--text" v-bind:class="is_selected(props.item)"
                                    @click="select(props.item)">
                                    <v-checkbox v-model="selected_patients" :value="props.item.T_OrderDetailID" hide-details :label="props.item.T_OrderDetailID"></v-checkbox>
                                </td>
                                <td class="text-xs-center pa-2 green--text" v-bind:class="is_selected(props.item)"
                                    @click="select(props.item)">
                                    {{props.item.T_OrderHeaderDate.substr(0,10)}}
                                </td>
                                <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)"
                                    @click="select(props.item)">
                                    {{props.item.T_OrderHeaderLabNumber}}
                                </td>
                                <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)"
                                    @click="select(props.item)">
                                    {{props.item.patient_name}}
                                </td>
                                <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                                    @click="select(props.item)">
                                    {{props.item.T_OrderDetailT_TestName}}
                                </td>
                                
                                </template>

                            </v-data-table>
                       </v-flex>
                   </v-layout>
               </v-card-text>
               <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn
                     color="primary"
                     flat
                     @click="dialog = false"
                     >
                     Tutup
                  </v-btn>

                  <v-btn
                     color="primary"
                     @click="save"
                     :disabled="!btn_save_enabled"
                     >
                     Simpan
                  </v-btn>
               </v-card-actions>
         </v-card>
   </v-dialog>

</template>

<style>
.container_pxs {
    height: 300px;
    overflow-y: scroll;
}
</style>

<script>
module.exports = {
    data () {
        return {
            headers: [
                {
                    text: "",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "5%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "TANGGAL",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NO LAB",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAMA PASIEN",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "35%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "PEMERIKSAAN",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "30%",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ],

            sx : []
        }
    },

    computed : {
        btn_save_enabled () {
            if (!this.selected_branch) return false
            if (!this.selected_worklist) return false
            if (this.selected_px.length < 1)
                return false
            if (this.selected_patients.length < 1)
                return false

            return true
        },

        dialog : {
            get () { return this.$store.state.dialog_new },
            set (v) { 
                this.$store.commit('update_dialog_new', v)
                if (v) {
                    this.selected_patients = []
                    this.selected_px = []
                    this.selected_branch = null
                    this.selected_worklist = null
                    this.$store.dispatch('newx/search_patient')
                }
            }
        },

        branches () {
            return this.$store.state.newx.branches
        },

        selected_branch : {
            get () { return this.$store.state.newx.selected_branch },
            set (v) { this.$store.commit('newx/update_selected_branch', v) }
        },

        default_branch () {
            return this.$store.state.newx.default_branch
        },

        worklists () {
            return this.$store.state.newx.worklists
        },

        selected_worklist : {
            get () { return this.$store.state.newx.selected_worklist },
            set (v) { 
                this.$store.commit('newx/update_selected_worklist', v) 
                this.selected_patients = []
                this.selected_px = []
            }
        },

        patients () {
            return this.$store.state.newx.patients
        },

        total_patient () {
            return this.patients.length
        },

        selected_patients : {
            get () { return this.$store.state.newx.selected_patients },
            set (v) { this.$store.commit('newx/update_selected_patients', v) }
        },

        selected_px : {
            get () { return this.$store.state.newx.selected_px },
            set (v) { this.$store.commit('newx/update_selected_px', v) }
        },

        isLoading () {
            return false
        }
    },

    methods : {
        add_new() {
            return
        },

        new_order() {
            this.$store.commit('update_dialog_new', true)
        },

        select_px(x) {
            let y = this.selected_px
            let z = y.indexOf(x.test_id)
            if (z < 0)
                y.push(x.test_id)
            else
                y.splice(z, 1)

            this.selected_px = y
            this.$store.dispatch('newx/search_patient')
        },

        is_selected_px(x) {
            let y = this.selected_px
            if (y.indexOf(x.test_id) < 0)
                return false

            return true
        },

        select(x) {
            return
        },

        is_selected(x) {
            return
        },

        save() {
            this.$store.dispatch('newx/save')
        }
    },

    mounted () {
        this.$store.dispatch('newx/search_branch')
        this.$store.dispatch('newx/search_worklist')
    }
}
</script>