<template>
        
    <v-card flat class="transparent">
        <v-layout row wrap>
            <v-flex xs12>
                <v-layout row wrap>

                    <v-flex 
                    v-for="(tube, n) in tubes"
                    xs4
                    :class="['pr-'+ (n % 3 == 2 ? '0' : '2'), 'pt-2']"
                    v-bind:key="n">
                        <v-card
                            elevation-2
                            color=""
                            class="pa-1">

                            <v-layout>
                                <v-flex xs5>
                                    <v-card class="card-tube pt-1 mr-1 flexcard" height="100%">
                                        <v-img
                                        class="white--text ma-3"
                                        
                                        :src="tube.sample_img"
                                        >
                                        </v-img>

                                        <v-card-text class="grow"></v-card-text>
                                        <v-card-actions class="pa-0">
                                            <v-layout row wrap>
                                                <v-flex xs12 pl-1 pr-1>
                                                    <v-btn color="green" class="xs12" block depressed @click="barcodeAdd(tube)" :disabled="!btn_sampling_enabled" :dark="btn_sampling_enabled">
                                                        <span class="icon-add"></span>
                                                    </v-btn>
                                                </v-flex>
                                                <v-flex xs12 pa-1>
                                                    <v-btn color="orange" class="xs12" block dark outline depressed>{{ tube.status }}</v-btn>
                                                </v-flex>
                                                
                                                
                                            </v-layout>
                                            
                                        </v-card-actions>
                                    </v-card>
                                    
                                </v-flex>
                                <v-flex xs7>
                                    <v-card class="card-tube flexcard transparent" height="100%" flat>
                                        <v-card-text  class="pa-1 grow">
                                            <v-layout column wrap>

                                                <v-flex xs12 mb-2>
                                                    <h6 class="title">{{ tube.sample_name }}</h6>
                                                    <h6 class="body-2 orange--text">{{ tube.barcode_id }}</h6>
                                                </v-flex>

                                                <v-layout row wrap>
                                                    <v-flex xs7 mb-3>
                                                        <!-- <one-date-picker
                                                            label="Sampling Date"
                                                            :date="tube.sampling_date == '0000-00-00' ? null : tube.sampling_date"
                                                            @change="samplingDateChange"
                                                            :data="n"
                                                            :max_date="max_sampling_date"
                                                        ></one-date-picker> -->
                                                        <one-date-picker-3
                                                            label="Sampling Date"
                                                            :date="tube.sampling_date == '0000-00-00' ? null : tube.sampling_date"
                                                            @change="samplingDateChange"
                                                            :data="n"
                                                            :max_date="max_sampling_date">
                                                        </one-date-picker-3>
                                                        
                                                    </v-flex>
                                                    <v-flex xs5 pl-1 mb-3>
                                                        <v-text-field
                                                            hide-details
                                                            mask="##:##"
                                                            :value="tube.sampling_time == '00:00' ? null : tube.sampling_time"
                                                            @change="samplingTimeChange(n, $event)"
                                                            return-masked-value
                                                            label="Time"
                                                        ></v-text-field>
                                                        <!-- <one-time-picker
                                                            label="Time"
                                                            :time="tube.sampling_time == '00:00:00' ? null : tube.sampling_time"
                                                            :data="n"
                                                            @change="samplingTimeChange"
                                                            :max_time="max_sampling_time"
                                                        >
                                                        </one-time-picker> -->
                                                        
                                                    </v-flex>

                                                    <v-flex xs7>
                                                        <v-text-field
                                                            v-model="tube.receive_date"
                                                            label="Receive Date"
                                                            readonly
                                                            browser-autocomplete="off"
                                                        ></v-text-field>
                                                        <!-- <one-date-picker
                                                            label="Receive Date"
                                                            :date="tube.receive_date == '0000-00-00' ? null : tube.receive_date"
                                                            @change="receiveDateChange"
                                                            :data="n"
                                                            :disabled="!dateEnabled(tube)"
                                                        ></one-date-picker> -->
                                                    </v-flex>
                                                    <v-flex xs5 pl-1>
                                                        <v-text-field
                                                            v-model="tube.receive_time"
                                                            label="Time"
                                                            readonly
                                                            browser-autocomplete="off"
                                                        ></v-text-field>
                                                         <!-- <one-time-picker
                                                            label="Time"
                                                            :time="tube.receive_time == '00:00:00' ? null : tube.receive_time"
                                                            :data="n"
                                                            @change="receiveTimeChange"
                                                            :disabled="!dateEnabled(tube)"
                                                        > -->
                                                        <!-- </one-time-picker> -->
                                                    </v-flex>
                                                </v-layout>

                                            </v-layout>
                                        </v-card-text>

                                        <v-card-actions class="pa-0">
                                            <v-btn
                                                block
                                                :dark="tube.status_name != 'SAMPLING.Sampling.Sampled' && btn_sampling_enabled && tube.sampling_date != null && tube.sampling_time != null"
                                                color="green"
                                                @click="sampling(tube)"
                                                :disabled="tube.status_name == 'SAMPLING.Sampling.Sampled' || !btn_sampling_enabled || tube.sampling_date == null || tube.sampling_time == null">
                                                Simpan
                                                
                                                
                                            </v-btn>
                                        </v-card-actions>
                                    </v-card>
            
                                </v-flex>
                            </v-layout>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-flex>

        </v-layout>

        <v-snackbar
      v-model="snackbar.status"
      top
      right
      :timeout="snackbar.timeout"
    >
      {{ snackbar.text }}
      <v-btn
        color="pink"
        flat
        @click="snackbar.status = false"
      >
        Close
      </v-btn>
    </v-snackbar>
    <one-dialog-confirm
        :text="'Anda akan menambah jumlah Sampel : ' + selected_sample_name"
        button_confirm="OK"
        @confirm="getMe"
        v-if="dialog_confirm"
    ></one-dialog-confirm>
    </v-card>
                
    
</template>

<style scoped>
.v-input__slot {
    margin-bottom: 0px !important;
}

.v-messages {
    display: none;
}

.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 {
    min-height: 38px;
}

.v-text-field--box.v-text-field--single-line input,.v-text-field--full-width.v-text-field--single-line input,.v-text-field--outline.v-text-field--single-line input {
    margin-top: 0px;
    font-size: .9em;
}

.card-tube {
    min-height: 225px;
}

.v-btn {
    min-width: 0px;
}

.flexcard {
  display: flex;
  flex-direction: column;
}
</style>

<script>
module.exports = {
	components : {
        'one-date-picker' : httpVueLoader('./oneDatePicker2.vue'),
        'one-date-picker-3' : httpVueLoader('./oneDatePicker3.vue'),
        'one-time-picker' : httpVueLoader('./oneTimePicker.vue'),
        'one-dialog-confirm': httpVueLoader('../../common/oneDialogConfirm.vue')
    },
    
    data () {
      return {
        //   tubes : [
        //       {"menu_date":false, "status":"REJECTED", "sampling_date":"", "sampling_time":"", "receive_date":"", "receive_time":""},
        //       {"menu_date":false, "status":"SAMPLED", "sampling_date":"2019-09-02", "sampling_time":"08:00", "receive_date":"2019-09-02", "receive_time":"09:00"},
        //       {"menu_date":false, "status":"SAMPLED", "sampling_date":"2019-09-02", "sampling_time":"08:00", "receive_date":"2019-09-02", "receive_time":"09:00"},
        //       {"menu_date":false, "status":"NEW", "sampling_date":"2019-09-02", "sampling_time":"08:00", "receive_date":"2019-09-02", "receive_time":"09:00"},
        //       {"menu_date":false, "status":"NEW", "sampling_date":"2019-09-02", "sampling_time":"08:00", "receive_date":"2019-09-02", "receive_time":"09:00"}
        //   ],
        menu: false,
        modal: false,
        selected_sample_name: "",
        selected_sample_id: 0,
        selected_order_id: 0
      }
    },

    computed : {
        sampling_btn_disabled () {
            
            return true;
            
        },
        tubes : {
            get() {
                return this.$store.state.sampling.samples
            },

            set(v) {
                this.$store.commit('sampling/update_samples', {records:v})
                return
            }
        },

        snackbar : {
            get () {
                return this.$store.state.sampling.snackbar
            },

            set(v) {
                this.$store.commit('sampling/update/snackbar', v)
                return
            }
        },

        max_sampling_date () {
            let today = new Date();
            let date = today.getFullYear()+'-'+("0" + (today.getMonth()+1)).slice(-2)+'-'+("0" + today.getDate()).slice(-2);
            
            return date
        },

        max_sampling_time () {
            let today = new Date();
            let time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
            
            return time
        },

        btn_sampling_enabled () {
            let x = this.$store.state.queue.call_status
            if ((x == "QUE.Sampling.Process" || x == "QUE.Sampling.Partial") &&
                this.$store.state.sampling.ver_photo.error == false)
                return true

            return false
        },

        dialog_confirm () {
            return this.$store.state.dialog_confirm
        }
    },

    methods : {
        samplingDateChange (prm) {
            
            let tbs = this.tubes;

            if (prm.data == "") prm.data = "0"
            tbs[prm.data].sampling_date = prm.new_date;

            this.tubes = tbs;
        },

        samplingTimeChange (n, data) {
            let tbs = this.tubes;

            if (n == "") n = "0"
            tbs[n].sampling_time = data;

            this.tubes = tbs;
        },

        receiveDateChange (prm) {
            
            let tbs = this.tubes;

            if (prm.data == "") prm.data = "0"
            tbs[prm.data].receive_date = prm.new_date;

            this.tubes = tbs;
        },

        receiveTimeChange (prm) {
            
            let tbs = this.tubes;

            if (prm.data == "") prm.data = "0"
            tbs[prm.data].receive_time = prm.new_time;

            this.tubes = tbs;
        },

        sampling (tube) {
            this.$store.commit('sampling/update_selected_sample', tube)
            this.$store.dispatch('sampling/save')
        },

        dateEnabled (tube) {
            if (tube.status_name == 'SAMPLING.Sampling.Sampled')
                return false

            return true
        },

        barcodeAdd(t) {
            
            

            this.selected_sample_name = t.sample_name
            this.selected_sample_id = t.sample_id
            this.selected_order_id = t.order_id

            this.$store.commit('update_dialog_confirm', true)
            
        },

        getMe() {
            this.$store.dispatch('sampling/barcode_add', {order_id:this.selected_order_id, sample_id:this.selected_sample_id})
        }
    }
}
</script>
