<template>
   <v-layout column pb-2>
      
      <v-card class="pa-1">
         <table>
            <tr>
               <th class="text-md-center pt-2 pb-2"> # </th>
               <th class="text-md-center pt-2 pb-2" style="max-width:30px">CITO</th>
               <th class="text-md-center pt-2 pb-2">PEMERIKSAAN</th>
               <th class="text-md-center pt-2 pb-2">BRUTO</th>
               <th class="text-md-center pt-2 pb-2">DISKON</th>
               <th class="text-md-center pt-2 pb-2">TOTAL</th>
            </tr>
            <tr v-for="t in selected_test" v-bind:key="t.T_TestID">
               <td class="text-md-center">
                  <v-icon color="red" @click="deletePx(t)">delete</v-icon>
               </td>
               <td class="text-md-left pl-3"><v-checkbox hide-details class="smr-1" 
                                  :value="t.T_TestID"
                                  v-model="cito_test"
                                  ></v-checkbox></td>
               <td class="text-md-left pl-3">{{ t.T_TestName}}
                   <div class="caption" v-show="child_test_show(t)">{{child_test(t.child_test)}}</div>
               </td>
               <td class="text-md-right pr-2">{{ one_money(t.T_PriceAmount) }}</td>
               <td class="text-md-right pr-2">{{ one_money(calc_discount(t))  }}</td>
               <td class="text-md-right pr-2">{{ one_money(calc_netto(t)) }}</td>
            </tr>

            
            <!-- TEST PANEL -->
            <template v-for="p in selected_panel">
               <tr class="tr-panel">
                  <td class="text-md-center">
                     <v-icon color="red" @click="deletePanel(p)">delete</v-icon>
                  </td>
                  <td class="text-md-left pl-3 pr-2" colspan="4">{{ p.T_TestPanelName}}</td>
               </tr>
               <tr v-for="t in p.test" v-bind:key="t.T_TestID">
                  <td class="text-md-center">
                     &nbsp;
                  </td>
                  <td class="text-md-left pl-3">{{ t.T_TestName}}</td>
                  <td class="text-md-right pr-2">{{ one_money(t.T_PriceAmount) }}</td>
                  <td class="text-md-right pr-2">{{ one_money(calc_discount(t))  }}</td>
                  <td class="text-md-right pr-2">{{ one_money(calc_netto(t)) }}</td>
               </tr>
            </template>
            <!--/ TEST PANEL -->

            <tfoot>
               <tr>
                  <th style="background:#03a9f43d" colspan="4" class="text-md-right pr-2 pt-2 pb-2">SUB TOTAL</th>
                  <th style="background:#03a9f43d" class="text-md-right pr-2 pt-2 pb-2" colspan="2">{{ one_money(sub_total)  }}</th>
               </tr>
               <tr style="display:none">
                  <th colspan="4"  class="text-md-right pr-2 pt-1 pb-1">DISKON PEMBULATAN</th>
                  <th class="text-md-right pr-2 pt-1 pb-1"  colspan="2">{{ one_money(discount_pembulatan) }}</th>

               </tr>
            </tfoot>
         </table>
      </v-card>

      <v-card class="total">
         <v-layout align-center row>
            <v-flex xs6>
               <v-btn :disabled="!btn_save_enabled" color="primary" @click="save_order">Simpan</v-btn>
            </v-flex>
            <v-flex xs3 text-md-left justify-start row  pt-2 pb-2>
               <div class="flex display-1 font-weight-medium pt-1 pb-1 pl-2"><kbd>TOTAL</kbd></div>
            </v-flex>
            <v-flex xs3 text-md-right justify-start row pt-2 pb-2>
               <div class="flex display-2 font-weight-medium pt-1 pb-1 pr-2"><kbd>{{ one_money(grand_total) }}</kbd></div>
            </v-flex>
         </v-layout>

      </v-card>

        <one-dialog-loading></one-dialog-loading>
   </v-layout>
</template>

<style scoped>
.nota {
   font-size: 2em;
   font-weight: bold;
   text-align: left;
}
.total {
   min-height:76px;
}
table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}

.vintage-text{
   text-shadow: 0px -2px 0px #fff, 0px 2px 3px #fff;
}

.v-input--selection-controls {
    margin-top: 0px;
    padding-top: 0px;
}

</style>
<script>
module.exports = {

    components : {
        'one-dialog-loading': httpVueLoader('../../common/oneDialogLoading.vue')
    },

   data () {
      return {
         current_cito_change : []
      }
   }, 

   watch : {
      cito_test (n, o) {
         if (n != o) {
            if (n.length == 0)
               this.current_cito_change = [o[0], "N"]
            else if (o.length == 0)
               this.current_cito_change = [n[0], "Y"]
            else if (o.length > n.length) {
               for (let i in o) 
                  if (n.indexOf(o[i]) < 0) this.current_cito_change = [o[i], "N"]
            }
            else {
               for (let i in n) 
                  if (o.indexOf(n[i]) < 0) this.current_cito_change = [n[i], "Y"]
            }
         }     
         
            let is_cito = "N";
            if (n.length > 0)
                is_cito = "Y";
            this.$store.commit('px/update_is_cito', is_cito);

         this.$store.dispatch('px/get_price', {
               test_id:this.current_cito_change[0], 
               mou_id:this.$store.state.company.selected_mou.M_MouID,
               cito:this.current_cito_change[1]})
      }
   },

   methods: {
      one_money(p) {
         return window.one_money(p)
      },

      update_req(px) {
         this.$store.dispatch("px/update_req", px)
      },

      deletePanel(panel) {
         let sel = this.selected_panel

         sel.forEach(function(p,idx) {
            if(p.T_TestPanelID == panel.T_TestPanelID) {
               sel.splice(idx,1)
            }
         });

         this.$store.commit("px/update_selected_panel",sel)
         let panels = this.$store.state.px.panels
         if ( panels == undefined ) panels = [] 
         panels.push(panel)
         let dt = {
            records : panels,
            total: panels.length
         }
         this.$store.commit("px/update_panels",dt)
         this.update_req()
      },

      deletePx(test) {
         this.$store.dispatch("px/delete_px", test)
      },

      calc_netto(t) {
         return one_float(t.T_PriceAmount) - one_float(t.T_PriceDisc) / 100 * one_float(t.T_PriceAmount)
            - one_float(t.T_PriceDiscRp)
      },

      calc_discount(t) {
         return ( one_float(t.T_PriceDisc) / 100 * one_float(t.T_PriceAmount) )
            + one_float(t.T_PriceDiscRp)
      },

      save_order() {
            if (!window.one_token()) {
                this.$store.commit('update_message_error', 'Maaf, koneksi Anda sempat terputus silahkan Log Out dan Login kembali')
                this.$store.commit('update_dialog_error', true)
                return
            }
          // Loading

          this.$store.commit('update_dialog_loading', true)
         this.$store.dispatch("order/save")
         return
      },

        child_test(x) {
            let y = []
            for (let i in x)
                y.push(x[i].T_TestName)
            return y.join(', ')
        },

        child_test_show(t) {
            if (!t.child_test)
                return false

            if (t.child_test.length < 1)
                return false

            if (t.px_type != 'PN')
                return false

            return true
        }
   },
   computed: {
      selected_panel() {
         return this.$store.state.px.selected_panel
      },
      selected_test() {
         return this.$store.state.px.selected_test
      },
      discount_pembulatan() {
         //sipe : set to 0
         return 0
         let st = this.sub_total
         let part = st%1000
         if (part > 500) return part - 500
         if (part < 500 && part > 0 ) return part
         return 0
      },
      grand_total() {
         let gt = this.sub_total - this.discount_pembulatan
         return gt
      },
      sub_total() {
         let tests = this.selected_test
         sub_total = 0
         tests.forEach(function(t,idx) {
            let price = t.T_PriceAmount - t.T_PriceDisc / 100 * t.T_PriceAmount 
               - t.T_PriceDiscRp
            sub_total +=  price
         })
         let panels = this.selected_panel
         panels.forEach(function(p) {
            let tests = p.test
            tests.forEach(function(t,idx) {
               let price = t.T_PriceAmount - t.T_PriceDisc / 100 * t.T_PriceAmount 
                  - t.T_PriceDiscRp
               sub_total +=  price
            })

         })
         return sub_total
      },

      btn_save_enabled () {
         // console.log(this.$store.state.patient.selected_patient.M_PatientID)
         if (!this.$store.state.patient.selected_patient.M_PatientID ||
            !this.$store.state.patient.selected_patient.M_PatientName ||
            !this.$store.state.patient.selected_patient.M_PatientNoReg ||
            !this.$store.state.patient.selected_patient.M_PatientDOB ||
            !this.$store.state.patient.selected_patient.patient_age ||
            !this.$store.state.doctor.selected_doctor.M_DoctorID ||
            !this.$store.state.doctor.selected_doctor.M_DoctorName ||
            !this.$store.state.doctor.selected_address.M_DoctorAddressID ||
            !this.$store.state.doctor.selected_address.M_DoctorAddressDescription ||
            this.$store.state.px.selected_test.length < 1)
         return false;


         if (this.$store.state.px.req_status == 'X')
            return false

         if (this.$store.state.px.req_status == 'N' && this.$store.state.px.reqs.length < 1)
            return false

        if (this.$store.state.delivery.checked_id.length < 1)
            return false

        if (!this.$store.state.px.selected_cito)
            return false

        // Same language
        if (this.$store.state.language.selected_language_2)
            if (this.$store.state.language.selected_language_2.key == 
                this.$store.state.language.selected_language.key)
                    return false
         // if (this.$store.state.px.requirement.length > 0) {
            
         //    let x = this.$store.state.px.requirement
         //    for (let i in x) {
         //       if (x[i].is_error)
         //          return false
         //    }
         // }

         return true;
      },

      cito_test : {
         get () {
            return this.$store.state.px.cito.test
         },
         set (v) {
            this.$store.commit('px/update_cito', {t:'test', v:v})
               
            return
         }
      }
   }

}
</script>
