<template>
<div >
    <v-layout style="margin-top:0" row>
        <v-flex xs12>
            <v-btn v-if="xdetails.length > 0" @click="save()" block color="primary">SIMPAN JANJI</v-btn>
        </v-flex>
    </v-layout>
    <v-layout style="max-height:550px;overflow: auto;" wrap>
    <v-card  v-for="(detailinfo,index) in xdetails" elevation="3" class="mb-2">
        <v-layout v-if="parseInt(detailinfo.id) !== 0" style="background:lightcoral;" align-center class="text-xs-center" row>
            <v-flex pl-1 pa-1 xs1>
                
                <v-btn @click="pastepromise(detailinfo,index)" style="min-width:10px;margin:0" flat small color="#825c59"><v-icon>note_add</v-icon></v-btn>
            </v-flex>
            <v-flex pl-1 pa-1 xs8>
                <v-text-field
                    placeholder="dd-mm-yyyy"
                    mask="##-##-####"
                    solo
                    v-model="detailinfo.promisedate"
                    @change="ChangeDate(detailinfo.promisedate,index)"
                    hide-details
                ></v-text-field>
            </v-flex>
            <v-flex pl-1 pa-1 xs3>
                <v-text-field
                    placeholder="hh:mm"
                    mask="##:##"
                    solo
                    v-model="detailinfo.promisetime"
                    @change="ChangeTime(detailinfo.promisetime,index)"
                    hide-details
                ></v-text-field>
            </v-flex>
        </v-layout>
        <v-divider></v-divider>
        <v-layout row>
            <v-flex pa-1 xs12>
                <v-chip v-for="testinfo in detailinfo.arr_test" style="font-size: 16px;font-weight:500" label color="pink" text-color="white">
                    {{testinfo.name}}
                </v-chip>
            </v-flex>
        </v-layout>
    </v-card>
    </v-layout>
    </div>
</template>

<style scoped>

</style>

<script>
module.exports = {
    
    data: () => ({
          
    }),
    computed: {
        xdetails:{
            get() {
                return this.$store.state.samplecall.details
            },
            set(val) {
                this.$store.commit("samplecall/update_details",val)
            }
        }
    },
    methods : {
        patient_photo(){
            var photo = "https://www.sgm-inc.com/wp-content/uploads/2014/06/no-profile-male-img.gif"
            if(this.xselected_patient.M_PatientPhoto){
                photo  = this.xselected_patient.M_PatientPhoto
            }
            console.log(photo)
            return photo
        },
        ChangeDate(value,index){
            console.log(value)
            console.log(index)
            var details = this.$store.state.samplecall.details
            details[index]['promisedate'] = value
            console.log(details)
            this.$store.commit("samplecall/update_details",details)
        },
        ChangeTime(value,index){
            var details = this.$store.state.samplecall.details
            details[index]['promisetime'] = value
            this.$store.commit("samplecall/update_details",details)
        },
        pastepromise(value,index){
            var xpromise = this.$store.state.samplecall.copied_promise
            var arr_datetime = xpromise.split(" ")
            var details = this.$store.state.samplecall.details
            details[index]['promisedate'] = arr_datetime[0]
            details[index]['promisetime'] = arr_datetime[1]
            this.$store.commit("samplecall/update_details",details)

        },
        save(){
            var details = this.$store.state.samplecall.details
            var errors = []
            var errordate = ''
            details.forEach(function(arr,index) {
                var xDate = moment(arr.promisedate, 'DDMMYYYY', true)
                var isValidDate = xDate.isValid()
                var xTime = moment(arr.promisetime, 'HHmm', true)
                var isValidTime = xTime.isValid()
                var formateddate = moment(arr.promisedate,'DDMMYYYY').format('DD-MM-YYYY')
                var formatedtime = moment(arr.promisetime,'HHmm').format('HH:mm')
                if(!isValidDate || !isValidTime){
                    errors.push(formateddate+' '+formatedtime)
                    console.log(formateddate+' '+formatedtime)
                }
                else{
                    details[index].promisedate = formateddate
                    details[index].promisetime = formatedtime
                }
                console.log(errors)
            })
            if(errors.length === 0){
                var prm = {}
                prm.act = 'save'
                prm.orderid = this.$store.state.samplecall.selected_patient.orderid
                prm.search = {
                    nolab:this.nolab,
                    lastid: -1
                }
                prm.newpromise = details
                this.$store.dispatch("samplecall/savenewpromise",prm)
            }
            else{
                errordate = errors.join(" ")
                this.$store.commit("samplecall/update_msg_info","<p style='color:red;font-weight:700;'>"+errordate+"</p><p>Janji adalah janji, jangan dibuat permainan, gunakan tanggal dan waktu yang benar</p>")
                this.$store.commit("samplecall/update_open_dialog_info",true)
            }
            

            
        }
    }
}
</script>
