<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
               <v-text-field class="xs4 ma-1"
                             label=""
                             placeholder="Pencarian"
                             single-line
                             outline
                             v-model="query_mou"
                             hide-details
                             ></v-text-field>

               <!-- <v-select class="xs4 ma-1" :items="companies" 
                  item-text="M_CompanyName"
                  item-value="M_CompanyID"
                  return-object
                  v-model="selected_company"
                  label="Company" outline hide-details></v-select> -->

               <v-flex  pt-1 pb-1 pl-2 pr-1 xs4>
                  <v-autocomplete
                     label="Perusahaan"
                     v-model="selected_company"
                     :items="companies"
                     :search-input.sync="query_company"
                     
                     auto-select-first
                     no-filter
                     return-object
                     clearable
                     item-text="M_CompanyName"
                     :loading="is_loading"
                     no-data-text="Pilih Company"
                     hide-details
                     outline
                     >
                     <template
                        slot="item"
                        slot-scope="{ item }"
                        >
                        <v-list-tile-content>
                           <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                           <!-- <v-list-tile-sub-title v-text="'aaa'"></v-list-tile-sub-title> -->
                        </v-list-tile-content>
                     </template>

                  </v-autocomplete>
               </v-flex>

               <v-select class="xs4 ma-1" :items="mous" 
                  item-text="M_MouName"
                  item-value="M_MouID"
                  return-object
                  v-model="selected_mou"
                  label="MOU" outline hide-details></v-select>

            <v-btn class="xs3 ma-1 one-btn-icon" color="success"  @click="search_packet" >
               <span class="icon-search"></span>
            </v-btn>
            <!-- <v-btn class="xs3 ma-1" color="info"  @click="set" >Baru</v-btn> -->
         </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="packets"
                  item-key="T_PacketID"
                  :loading="isLoading"
                  :pagination.sync="pagination"

                    :expand="expand"
                   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)">{{ props.item.T_PacketType == "PR" ? "Profile" : "Panel" }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props)">{{ props.item.T_PacketName }}</td>
                     <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props)">{{ one_money(props.item.T_PacketOriginalPrice) }}</td>
                     <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props)"><strong>{{ one_money(props.item.T_PacketPrice) }}</strong></td>
                     <td class="text-xs-center pa-0" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props)">
                        <v-btn color="orange" dark small @click="copy_me(props)">Copy</v-btn>
                     </td>
                     <!-- <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.status}}</td> -->
                  </template>

                    <template v-slot:expand="props">
                        <v-card flat class="amber lighten-4">
                        <v-card-text>{{ props.item.pxs }}</v-card-text>
                        </v-card>
                    </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>
      <one-dialog-confirm :data="selected_packet ? selected_packet.T_PacketID : null" v-if="dialog_confirm && selected_packet" ></one-dialog-confirm>
   </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;
}

.searchbox .one-btn-icon {
   font-size: 1.5em
}
</style>

<script>
module.exports = {
components : {
      'one-dialog-confirm': httpVueLoader('../../common/oneDialogConfirm.vue')
   },

   mounted() {
   },

   methods : {
      isSelected(p) {
         let x = this.$store.state.packet_copy.selected_packet
         if (!x)
            return false
            
         if (x.T_PacketID == p.T_PacketID)
            return true
         
         return false
      },

      search_packet() {
         this.$store.dispatch("packet_copy/search_packet")
      },

      selectMe(doc) {
         this.$store.commit('packet_copy/update_selected_packet', doc.item)
         doc.expanded = !doc.expanded
        //  this.$store.dispatch('px/search_px')
      },

      thr_search: _.debounce( function () {
         this.$store.dispatch("packet_copy/search_company")
         
      }, 700),

      one_money (x) {
         return window.one_money(x)
      },

      copy_me (p) {
         this.selectMe(p)
         this.$store.dispatch('packet_copy/save_copy')
      }
   },

   computed: {
      query_company : {
         get () {
            return this.$store.state.packet_copy.query_company
         },
         set (v) {
            this.$store.commit('packet_copy/update_query_company', v)
         }
      },

      search_mou : {
         get () {
            return this.$store.state.packet_copy.search_mou
         },
         set (v) {
            this.$store.commit('packet_copy/update_search_mou', v)
         }
      },

      companies : {
         get () {
            return this.$store.state.packet_copy.companies
         },
         set (v) {
            this.$store.commit('packet_copy/update_companies', v)
         }
      },

      mous : {
         get () {
            return this.$store.state.packet_copy.mous
         },
         set (v) {
            this.$store.commit('packet_copy/update_mous', v)
         }
      },

      packets : {
         get () {
            return this.$store.state.packet_copy.packets
         },
         set (v) {
            this.$store.commit('packet_copy/update_packets', v)
         }
      },

      selected_company : {
         get () {
            return this.$store.state.packet_copy.selected_company
         },
         set (v) {
            this.$store.commit('packet_copy/update_selected_company', v)
         }
      },

      selected_mou : {
         get () {
            return this.$store.state.packet_copy.selected_mou
         },
         set (v) {
            this.$store.commit('packet_copy/update_selected_mou', v)
         }
      },

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

      query_mou : {
         get () {
            return this.$store.state.packet_copy.query_mou
         },
         set (v) {
            this.$store.commit('packet_copy/update_query_mou', v)
         }
      },

      isLoading () {
         return false
      },

      is_loading () {
         return false
      },

      dialog_confirm () {
         return this.$store.state.dialog_confirm
      }
   },
   data() {
      return {
         headers: [
            {
               text: "TIPE PAKET",
               align: "left",
               sortable: false,
               value: "mr",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA PAKET",
               align: "left",
               sortable: false,
               value: "lab",
               width: "35%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HARGA NORMAL",
               align: "right",
               sortable: false,
               value: "name",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HARGA PAKET",
               align: "right",
               sortable: false,
               value: "name",
               width: "15%",
               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_PacketName',
            totalItems: this.$store.state.packet_copy.total_packet
         },

        expand : false
      };
   },

   watch : {
      query_company(val, old) {
            
         if (val == null || typeof val == 'undefined') val = ""
         // console.log("1-val:"+val)
         if (val == old ) return
         // console.log("2-val:"+val)
         // if (! val) return
         // console.log("3-val:"+val)
         // if (val.length < 1 ) return
         // console.log("4-val:"+val)
         if (this.$store.state.packet.search_status == 1 ) return  
         // console.log("5-val:"+val)
         this.$store.commit("packet_copy/update_query_company", val)
         this.thr_search()
      }
   
   }
}
</script>
