<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2">
         <v-layout row wrap>
            <v-flex xs6 v-if="state_add">
               <h3 class="title">{{ packet_name }} ({{ packet_type }})</h3>

               <v-layout row wrap pt-2>
                  <v-flex xs5 class="text-xs-right pr-2">
                     <v-text-field
                        label="HARGA PAKET"
                        hide-details
                        v-model="packet_price"
                        class="text-xs-right"
                        reverse
                        v-show="packet_type_code == 'PN'"
                     ></v-text-field>

                     <v-text-field
                        label="HARGA PAKET"
                        hide-details
                        :value="one_money(packet_price)"
                        readonly
                        class="text-xs-right"
                        reverse
                        v-show="packet_type_code == 'PR'"
                     ></v-text-field>
                  </v-flex>

                  <v-flex xs5 class="text-xs-right">
                     <v-text-field
                        label="TOTAL HARGA"
                        hide-details
                        :value="one_money(total_price)"
                        readonly
                        class="text-xs-right"
                        reverse
                     ></v-text-field>
                  </v-flex>
               </v-layout>

               <v-flex xs12 pt-2 pl-0>
                  <v-btn color="red" dark @click="cancel" class="mt-0 mb-0 ml-0">Batal</v-btn>
                  <v-btn color="success" dark @click="save" class="ma-0">Simpan</v-btn>
               </v-flex>
            </v-flex>

            <v-flex v-bind:class="state_add? 'xs6':'xs8'" class="searchbox">
               <v-layout row wrap>
                  <v-text-field class="xs6 ma-1"
                           label=""
                           placeholder="Pencarian"
                           single-line
                           outline
                           v-model="query_px"
                           hide-details
                           ></v-text-field>
                  <v-btn class="xs3 ma-1 one-btn-icon v-btn--search" color="success"  @click="search_px" :disabled="!btn_enabled" :dark="btn_enabled">
                     <span class="icon-search"></span>
                  </v-btn>
                  <v-btn class="xs3 ma-1 one-btn-icon v-btn--search" color="orange"  @click="imports" 
                    :disabled="!btn_enabled || selected_mou.M_MouIsReleased == 'Y' || selected_mou.M_MouIsVerified == 'Y'" :dark="btn_enabled && selected_mou.M_MouIsReleased != 'Y' && selected_mou.M_MouIsVerified != 'Y'"  
                    v-show="!state_add">
                     <span class="icon-import"></span>
                  </v-btn>
                  <v-btn class="xs3 ma-1 one-btn-icon v-btn--search" color="primary"  @click="add" 
                    :disabled="!btn_enabled || selected_mou.M_MouIsReleased == 'Y' || selected_mou.M_MouIsVerified == 'Y'" :dark="btn_enabled && selected_mou.M_MouIsReleased != 'Y' && selected_mou.M_MouIsVerified != 'Y'"  v-show="!state_add">
                     <span class="icon-edit"></span>
                  </v-btn>
               </v-layout>
               <!-- <v-layout row wrap>
                  <v-btn color="success" @click="imports">Impor ...</v-btn>
               </v-layout> -->
            </v-flex>

            <v-flex xs2 pl-3 v-show="!state_add">
               <v-text-field
                  label="Harga Normal"
                  :value="selected_packet?one_money(selected_packet.T_PacketOriginalPrice):0"
                  reverse
                  readonly
                  hide-details
               ></v-text-field>
            </v-flex>
            
            <v-flex xs2 pl-4 v-show="!state_add">
               <v-text-field
                  label="Harga Paket"
                  :value="selected_packet?one_money(selected_packet.T_PacketPrice):0"
                  reverse
                  readonly
                  hide-details
               ></v-text-field>
            </v-flex>
            
            <!-- <v-btn class="xs3 ma-1" color="info"  @click="set" >Baru</v-btn> -->
         </v-layout>
         
      </v-card>

      <!-- <v-card>
         <v-layout row wrap>
            <v-flex xs12>
               <one-md-packet-px-new></one-md-packet-px-new>
            </v-flex>
         </v-layout>
      </v-card> -->
      
      <v-card >
         <v-layout row>
            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
               <v-data-table 
                  :headers="headers" 
                  :items="pxs"
                  :loading="isLoading"
                  :pagination.sync="pagination"
                   class="elevation-1">
                  <template slot="items" slot-scope="props">
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_TestCode }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_TestName }}</td>
                     <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ one_money(props.item.T_PacketDetailPrice) }}</td>
                     <td class="text-xs-center pa-0" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                        <v-btn color="red" dark class="one-btn-icon" small ma-0 @click="remove(props.item)" v-show="state_add">«</v-btn>
                     </td>
                  </template>
                  <template>
                     <div class="text-xs-center">
                        <v-pagination
                           
                           :length="15"
                           :total-visible="7"
                        ></v-pagination>
                     </div>
                  </template>
               </v-data-table>
            </v-flex>
         </v-layout>
      </v-card>
   </v-layout>
</template>

<style scoped>
/* .searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
} */
.searchbox .v-btn--search {
   min-height:50px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}
.one-btn-icon {
   font-size: 1.5em
}

/* Overwrite */
.v-text-field--box>.v-input__control>.v-input__slot,
.v-text-field--full-width>.v-input__control>.v-input__slot,
.v-text-field--outline>.v-input__control>.v-input__slot {
    align-items: stretch;
    min-height: 50px
}

.v-text-field--box .v-label, .v-text-field--full-width .v-label, .v-text-field--outline .v-label {
    top: 12px;
}

.v-text-field.v-text-field--enclosed .v-input__append-inner {
   margin-top: 10px;
}

.v-text-field--outline.v-text-field--single-line input {
    margin-top: 6px;
}
</style>

<script>
module.exports = {
components : {
      // 'one-md-price-new-dialog': httpVueLoader('./oneMdPriceNewDialog.vue'),
      // 'one-md-price-new-addon-dialog': httpVueLoader('./oneMdPriceNewAddonDialog.vue')
   },

   mounted() {
      
   },

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

      isSelected(p) {
         return false
      },

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

      selectMe(doc) {
         // this.$store.commit('price/update_selected_price', doc)
      },

      add() {
         this.$store.commit('test/update_state_add', true)
         this.$store.dispatch('test/search_test')

         // copy price
         let x = this.$store.state.packet.selected_packet.T_PacketPrice
         let y = this.$store.state.packet.selected_packet.T_PacketOriginalPrice
         this.$store.commit('px/update_estimate_total_price', y)
         this.$store.commit('px/update_packet_price', x)

         // update nat tests
         // refresh nat_tests
         let nt = []
         let pxs = this.$store.state.px.pxs
         for (let i in pxs) {
            for (let j in pxs[i].nat_tests) {
               nt.push(pxs[i].nat_tests[j])
            }
         }
         this.$store.commit('px/update_nat_tests', nt)
      },

      cancel () {
         this.$store.dispatch('px/search_px')
         this.$store.commit('test/update_state_add', false)
         return

         let y = this.$store.state.px.pxs
         let z = this.$store.state.px.total_px

         for(let i in y) {
            if (y[i].T_PacketDetailID == 0)
               { 
                  y.splice(i, 1)
                  z--
               }
         }

         this.$store.commit('px/update_pxs', {
            records: y,
            total: z
         })

         
      },

      save () {
         let x = this.$store.state.packet.selected_packet
         x.T_PacketPrice = this.packet_price
         x.T_PacketOriginalPrice = this.total_price

         this.$store.commit('packet/update_selected_packet', x)
         this.$store.dispatch('px/save_px')
      },

      remove (x) {
         // go to state add
         let z = this.$store.state.test.state_add
         if (!z) {
            let y = this.$store.state.packet.selected_packet.T_PacketPrice
            this.$store.commit('px/update_estimate_total_price', y)
            this.$store.commit('test/update_state_add', true)
         }
         
         // add to test
         let te = this.$store.state.test.exclude
         let ti = this.$store.state.test.include
         let td = te.indexOf(x.T_TestID)
         if ( td > -1)
            te.splice(td, 1)
         else
            ti.push(x.T_TestID)
         this.$store.commit('test/update_exclude', te)
         this.$store.commit('test/update_include', ti)

         // search test
         this.$store.dispatch('test/search_test')

         let pxs = this.pxs
         let price = 0
         let total = pxs.length
         let total_price = parseFloat(this.$store.state.px.estimate_total_price)
         for (let i in pxs) {
            if (pxs[i].T_TestID == x.T_TestID) {
               price = parseFloat(pxs[i].T_PacketDetailPrice)
               pxs.splice(i, 1)
            }
               
         }
         
         total_price -= price
         if (total_price < 0) total_price = 0
         this.pxs = {total:total-1, records:pxs}
         this.$store.commit('px/update_estimate_total_price', total_price)

         if (this.packet_type_code == "PR")
            this.$store.commit('px/update_packet_price', total_price)

         // refresh nat_tests
         let nt = []
         for (let i in pxs) {
            for (let j in pxs[i].nat_tests) {
               nt.push(pxs[i].nat_tests[j])
            }
         }
         this.$store.commit('px/update_nat_tests', nt)
      },

      imports () {
         this.$store.commit('packet_copy/update_dialog_copy', true)
      }
   },
   computed: {
      pxs : {
         get () {
            return this.$store.state.px.pxs
         },
         set (v) {
            this.$store.commit('px/update_pxs', v)
         }
      },

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

      query_px : {
         get () {
            return this.$store.state.px.query_px
         },
         set (v) {
            this.$store.commit('px/update_query_px', v)
         }
      },

      isLoading () {
         return false
      },

      btn_add_enabled () {
         // if (this.$store.state.price.selected_mou.M_MouID)
            return true

         // return false
      },

      packet_name () {
         if (this.$store.state.packet.selected_packet)
            return this.$store.state.packet.selected_packet.T_PacketName

         return ""
      },

      packet_type () {
         if (!this.$store.state.packet.selected_packet)
            return ""

         if(this.$store.state.packet.selected_packet.T_PacketType == "PR")
            return "Profile"

         return "Panel"
      },

      packet_type_code () {
         if (!this.$store.state.packet.selected_packet)
            return ""
            
         return this.$store.state.packet.selected_packet.T_PacketType 
      },

      state_add () {
         return this.$store.state.test.state_add
      },

      btn_enabled () {
         if (this.$store.state.packet.selected_mou &&
            this.$store.state.packet.selected_packet)
            return true

         return false
      },

      total_price : {
         get () { return this.$store.state.px.estimate_total_price },
         set (v) { this.$store.commit('px/update_estimate_total_price', v) }
      },

      packet_price : {
         get () { return this.$store.state.px.packet_price },
         set (v) { this.$store.commit('px/update_packet_price', v) }
      },

      selected_packet () {
         return this.$store.state.packet.selected_packet
      },

        selected_mou () {
            return this.$store.state.packet.selected_mou
        }
   },
   data() {
      return {
         headers: [
            {
               text: "KODE",
               align: "left",
               sortable: false,
               value: "mr",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "lab",
               width: "50%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HARGA",
               align: "right",
               sortable: false,
               value: "name",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ACTION",
               align: "center",
               sortable: false,
               value: "name",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'T_TestName',
            totalItems: this.$store.state.px.total_px
         }
      };
   }
}
</script>
