<template>
   <div>

      <v-layout column pb-2>
         <v-card mb-2 class="one-fo-requirement">
            <!--<v-subheader red--text text--lighten-1>
                <v-layout row wrap>
                    <v-flex xs3>
                        <span>JANJI HASIL :</span>
                    </v-flex>
                    <v-flex xs3>
                        <span v-show="!cito_show && is_cito == 'Y'" class="mr-4 blue--text"><a href="javascript:;" class=" blue--text" @click="cito_show=!cito_show"><v-icon small>priority_high</v-icon> {{ selected_cito ? selected_cito.Nat_CitoName : '' }}</a></span>
                        <v-select
                            :items="citos"
                            item-text="Nat_CitoName"
                            item-value="Nat_CitoID"
                            return-object
                            
                            hide-details
                            dense
                            v-model="selected_cito"
                            height="30"
                            v-show="cito_show && is_cito == 'Y'"
                            class="mt-0 pt-0"
                            append-icon="clear"
                            @click:append="selected_cito = null"
                        ></v-select>
                    </v-flex>
                    <v-flex xs6 class="text-xs-right">
                        <span class="red--text">Perkiraan Janji Hasil : {{ appx_schedule }}</span>
                    </v-flex>
                </v-layout>
            </v-subheader>

            <v-divider></v-divider>-->

            <v-layout row wrap>
                     <v-flex xs12 pt-2>
                        <v-card color="#f3e595"  outlined flat >
                            <v-card-text class="pt-2 pb-2">
                                <v-layout align-center row wrap>
                                    <v-flex xs6>
                                        <p v-if="req_status == 'X'" class="mb-0 subtitle-1 font-weight-black">Apakah persyaratan terpenuhi ?</p>
                                        <p v-if="req_status == 'N'" class="mb-0 subtitle-1 font-weight-black">Pilih salah satu yang belum terpenuhi</p>
                                        <p v-if="req_status == 'Y'" class="mb-0 subtitle-1 font-weight-black">Mantap ! sudah terpenuhi semua</p>
                                    </v-flex>
                                    <v-flex xs6 class="text-xs-right">
                                       <v-btn small
                                             :color="req_status == 'N' ? '#ee7777' : 'white'" 
                                             class="one-btn-icon mr-1 ma-0" 
                                             :depressed="req_status == 'N' ? true : false"
                                             :dark="req_status == 'N'"
                                            @click="reqMeNot">
                                            <v-icon small>clear</v-icon>
                                        </v-btn>

                                        <v-btn small
                                             :color="req_status == 'Y' ? '#40a798' : 'white'" 
                                             class="one-btn-icon mr-1 ma-0" 
                                             :dark="req_status == 'Y'"
                                              :depressed="req_status == 'Y' ? true : false"
                                            @click="reqMe">
                                            <v-icon small>done</v-icon>
                                        </v-btn>
                                        <!-- <v-btn color="red" class="one-btn-icon mr-1 ma-0" @click="sampleReq" 
                                            v-show="req_status == 'X' || req_status == 'N'"
                                            :disabled="req_status != 'X'"
                                            :dark="req_status == 'X'">
                                            <v-icon>clear</v-icon>
                                        </v-btn>

                                        <v-btn color="green" class="one-btn-icon ma-0" @click="sampleReqOK" 
                                            v-show="req_status == 'X' || req_status == 'Y'"
                                            :disabled="req_status != 'X'"
                                            :dark="req_status == 'X'">
                                            <v-icon>done</v-icon>
                                        </v-btn> -->
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                        </v-card>
                     </v-flex>
                    
                    
                 </v-layout>
                 
                 <v-layout row wrap v-if="req_status != 'N'" class="pl-3 pr-3 pa-2">
                     <v-flex xs6 v-for="(req, i) in requirements" v-bind:key="i" class="pt-0 pb-1 pr-1 pl-1">
                                    <v-btn color="black" block small outline class="ma-0 btn-req">{{req.label}}</v-btn>         
                                </v-flex>
                    <!-- <v-card flat>
                       <v-card-text class="pl-3 pr-3 pt-2 pb-2">
                           <v-layout row wrap>
                                
                           </v-layout>
                          
                       </v-card-text>
                    </v-card> -->
                 </v-layout>

            <v-container fluid v-if="req_status == 'N'" class="pl-2 pr-2 pt-2 pb-2">
               <v-layout row wrap>
                  <!-- <one-field-verification v-for="req in requirements" :key="req.idx"
                                          @input="update_req"
                                          :value="req" class="xs12 sm10" >
                  </one-field-verification> -->
                  <v-flex xs12
                     v-for="(req, i) in requirements"
                     v-bind:key="i">

                     <v-checkbox
                        color="#40a798"
                        :value="req.req_id"
                        :label="req.label"
                        v-model="reqs"
                        hide-details
                        class="mt-0"
                     ></v-checkbox>
                  </v-flex>
                  
               </v-layout>
            </v-container>
            <v-divider></v-divider>
            <v-layout mb-2 row align-center>
               <v-flex xs6 pl-4  pt-2>
                 <!-- <v-checkbox
                     class="mt-0"
                     color="#40a798"
                     v-model="received_sample"
                     style="font-size:12px"
                     value="Y"
                     hide-details
                  ></v-checkbox> -->
                  <v-switch   class="mt-0" color="light-green" @change="received_sample.time === ''" hide-details v-model="received_sample.flag" value="Y" >
                      <template v-slot:label>
                            <span v-if="received_sample.flag === 'Y'" class="font-weight-black" style="color:light-green;font-size:12px;">Hanya terima sample</span>
                            <span v-if="received_sample.flag !== 'Y'" class="font-weight-black" style="font-size:12px;">Hanya terima sample</span>
                    </template>
                  </v-switch>
               </v-flex>
               <v-flex  pr-2 pt-2 xs6>
                   <v-text-field
                        class="mt-2"
                        v-model="received_sample.time"
                        :label="`${label}`"
                        mask="##-##-#### ##:##"
                        @blur="checkFormatTime()"
                        hide-details
                        placeholder="dd-mm-yyyy hh:mm"
                        v-if="received_sample.flag === 'Y'"
                        outline
                    >
                    </v-text-field>
               </v-flex>
               
            </v-layout>
           
         </v-card>
      </v-layout>
   </div>
</template>

<style scoped>
div.persyaratan input[type=text]::-webkit-input-placeholder {
   font-size: 1em;
}
div.persyaratan input[type=text] {
   font-size: .7em;
}
div.persyaratan label {
   color: #f44336!important;
   font-size: 1.1em;
   font-weight:400;
}

.btn-req > .v-btn__content {
    justify-content: left !important
}
</style>
<script>
module.exports = {
    components: {
        "one-field-verification" : httpVueLoader("./oneFieldVerification.vue")
    },

    data () {
        return {
            cito_show : true,
            label:'Waktu Pengambilan Sample'
        }
    },

    computed: {
        requirements(){
            return this.$store.state.px.requirement
        },

        received_sample : {
            get () {
                return this.$store.state.order.received_sample
            },

            set (v) {
                if (v == null){
                    var vx = {}
                    vx.flag = "N";
                    vx.time = ''
                    v = vx
                    console.log(v)
                }
                
                
                this.$store.commit("order/update_received_sample", v)
                return
            }
        },

        appx_schedule() {
            return this.$store.state.px.appx_schedule
        },

        req_status() {
            return this.$store.state.px.req_status
        },

        req_text() {
            let x = []
            for (let i in this.requirements)
                x.push(this.requirements[i].label);

            return x.join(', ')
        },

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

        citos () {
            return this.$store.state.px.citos
        },

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

        is_cito () {
            return this.$store.state.px.is_cito
        }
    },

    methods: {
        checkFormatTime(){
            var xDate = moment(this.received_sample.time, 'DDMMYYYYHHmm', true)
            console.log(xDate)
            var isValidDate = xDate.isValid()
            if(!isValidDate){
                this.label = "Waktu Pengambilan Sample [FORMAT SALAH!]"
                this.received_sample.time = ""
            }
            else{
                this.label = "Waktu Pengambilan Sample"
            }
        },
        update_req(val) {
            
            let reqs = this.$store.state.px.requirement
            reqs.forEach(function(r,idx) {
                if ( val.idx = r.idx ) {
                reqs[idx] = val 
                }
            })
            this.$store.commit("px/update_requirement", reqs)
        },

        reqMe() {
            this.$store.commit('px/update_req_status', 'Y')
        },

        reqMeNot() {
            this.$store.commit('px/update_req_status', 'N')
        }
    },

    mounted () {
        this.$store.dispatch('px/search_cito')
    },

    watch : {
        is_cito(val, old) {
            // if (val == "Y" && old == "N")
            //     this.cito_show = false
        }
    }
}
</script>
