<template>
<div>
<v-layout v-for="staff in xstaffs">
  <v-flex xs12 mb-2 >
    <v-card
        color="white"
      >
        <v-card-title style="padding: 7px;" class="title text-sm-center">
          <v-btn block depressed color="info">{{staff.M_StaffName}}</v-btn>
        </v-card-title>
        <v-divider color="#2196f3"></v-divider>
        <v-card-text style="padding:10px" class="white text--primary">
        
          <v-layout row>
            <v-flex xs6>
              <div class="subheading font-weight-bold text-sm-left pl-1">jam</div>
            </v-flex>
             <v-flex xs6>
              <div class="subheading font-weight-bold text-sm-right">area</div>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex mt-1 mb-2 xs6>
              <v-btn v-for="time in staff.times"
                color="error"
                dark
                depressed
                small
                class="btn-time"
              >
                {{time.xtime}}
              </v-btn>
            </v-flex>
            <v-flex mt-1 xs6 class="text-sm-right">
               <v-btn v-for="area in staff.areas"
                color="info"
                dark
                outline
                small
                class="btn-time"
              >
                {{area.xarea}}
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-text>
      </v-card>
  </v-flex>
</v-layout>

</div>
</template>

<style scoped>
.btn-time{
    margin: 3px 1px!important;
    min-width: 50px!important;
}
</style>

<script>
module.exports = {
   data() {
      return {
      }   
   },
   computed: {
      xstaffs(){
        return this.$store.state.order.staffs
      }
  },
  methods : {
    
  }
}
</script>
