<template>
   <v-layout class="fill-height" column>
      <v-card  class="mb-2 pa-2 searchbox" >
         <v-layout >


               <v-text-field class="xs3 ma-1"
                             label=""
                             placeholder="No Trx"
                             single-line
                             outline

                             hide-details


            <span    class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>

         </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="closes"
                  :loading="isLoading"
                  hide-actions class="elevation-1">
                  <template slot="items" slot-scope="props">
                     <td class="text-xs-left pa-2 " v-bind:class="{'':isSelected(props.item)}"   >{{ props.item.F_PaymentKasirDate }}</td>
                     <td class="text-xs-left pa-2 " v-bind:class="{'':isSelected(props.item)}"  >{{ props.item.F_PaymentKasirNumber}}</td>
                     <td class="text-xs-left pa-2 " v-bind:class="{'':isSelected(props.item)}" >{{ props.item.F_PaymentKasirIsReceived}}</td>
                     <td class="text-xs-left pa-2 " v-bind:class="{'':isSelected(props.item)}" >{{ props.item.F_PaymentKasirIsReceived}}</td>
                  </template>
               </v-data-table>
               <v-divider></v-divider>

            </v-flex>
         </v-layout>
      </v-card>

   </v-layout>
</template>

<style scoped>
.cito {
   color: white;
   background-color:#FFC107;
}
.citoo {
   color: red;
}

span.xtd {
   margin-right:10px;
}
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:40px;
}
.searchbox .v-btn {
   min-height:40px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}

.v-messages{
   min-height:0px!important;
}

</style>

<script>
module.exports = {
   components : {

   },
   mounted() {

   },
   methods : {
     isSelected () {
       return true
      }
   },
   computed: {
      isLoading() {
         return this.$store.state.listclose.search_status == 1
      },
      closes() {
         return this.$store.state.listclose.closes
      },
   },
   data() {
      return {
         items: [],
         menustartdate:false,
         menuenddate:false,
         headers: [
            {
               text: "TANGGAL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "8%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NOMOR",
               align: "left",
               sortable: false,
               value: "lab",
               width: "8%",
               class: "pa-2 blue lighten-3 white--text"
            } ,
            {
               text: "STATUS",
               align: "left",
               sortable: false,
               value: "status",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            } ,

            {
               text: "ACTION",
               align: "left",
               sortable: false,
               value: "status",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
      }
   }
}
</script>
