<template>
   <v-layout column pb-2>
      
      <v-card class="pa-1">
         <table>
            <tr>
               <th class="text-md-center pt-2 pb-2" width="10%"> # </th>
               <th class="text-md-center pt-2 pb-2"  width="10%" 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" width="20%">HARGA</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}}</td>
               <td class="pr-3 text-xs-right">{{one_money(t.T_PriceTotal)}}</td>
            </tr>

            <tr>
                <td colspan="3" class="pr-3 text-xs-right"><strong>SUB TOTAL</strong></td>
                <td class="pr-3 text-xs-right">{{one_money(sub_total)}}</td>
            </tr>
         </table>
      </v-card>

      <v-card class="total">
         <v-layout align-center row>
            <v-flex xs6>
               
            </v-flex>
            
         </v-layout>

      </v-card>

   </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 = {

   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"]
            }
         }     
         
      }
   },

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

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

      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)
      },

      save_order() {
         // this.$store.dispatch("order/save")
         return
      }
   },
   computed: {
      selected_panel() {
         return this.$store.state.px.selected_panel
      },
      selected_test() {
         return this.$store.state.px.selected_test
      },
     

      btn_save_enabled () {
         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
         }
      },

        sub_total() {
            let t = this.selected_test
            let s = 0
            for (let i in t)
                s += Math.round(t[i].T_PriceTotal)

            return s
        }
   }

}
</script>
