<template>
    <v-layout  v-if="sampletype" class="mb-2 mt-2" column >
         <v-dialog v-model="xdialogdelete" persistent  max-width="290">
            <v-card>
                <v-card-title
                    dark
                    class="headline error pt-2 pb-2"
                    primary-title
                    style="color:white"
                >
                    <h4 dark>Peringatan !</h4>
                </v-card-title>
                <v-card-text v-html="xmsgdelete">
                    
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                    <v-btn small color="error darken-1 text-sm-left" flat @click="doDeletePhoto()">Hapus</v-btn>
                    <v-btn small color="primary darken-1 text-sm-right" flat @click="xdialogdelete = false">Batal</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="xdialogaction" persistent  max-width="350">
            <v-card>
                <v-card-title color="warning"  class="headline">Konfirmasi</v-card-title>
                <v-card-text v-html="xmsgaction">
                    
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                    <v-btn color="primary darken-1" flat @click="closeDialogAction()">OK</v-btn>
                    <v-btn color="error darken-1" flat @click="xdialogaction = false">Tutup</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="xdialogimage" persistent  max-width="650" max-height="500">
            <v-card color="amber lighten-5">
                <v-container grid-list-sm fluid>
                    <v-layout row wrap>
                        <v-flex>
                            <v-card flat tile class="d-flex">
                                <v-img
                                :src="ximage"
                                aspect-ratio="1"
                                class="grey lighten-2"
                                >
                                <template v-slot:placeholder>
                                    <v-layout
                                    fill-height
                                    align-center
                                    justify-center
                                    ma-0
                                    >
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                    </v-layout>
                                </template>
                                </v-img>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-container>
                <v-card-actions>
                    <v-btn color="error darken-1" v-if="sampletype.status !== 'V'" @click="deleteImage()">Hapus</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn color="black" dark @click="xdialogimage = false">Tutup</v-btn>
                </v-card-actions>
            <v-card>
        </v-dialog>
        <v-card v-if="sampletype">
            <v-layout row>
                <v-flex  xs12>
                    <!--<v-subheader red--text text--lighten-1> LIST SAMPLE
                    </v-subheader>
                    <v-divider></v-divider>-->
                    <v-layout pa-2 row wrap>
                        <v-flex xs5 mb-2 mr-3>
                            <v-layout>
                                <v-flex xs12>
                                    <v-card style="border:1px solid black" flat class="text">
                                        <v-layout pa-1>
                                            <v-flex xs5>
                                            <v-img
                                                src="https://anggrek.aplikasi.web.id/one-ui/libs/image/body.jpg"
                                                height="125px"
                                                contain
                                            ></v-img>
                                            </v-flex>
                                            <v-flex xs7>
                                                <v-card-title style="padding-top:0">
                                                    <div>
                                                        <div style="font-size:x-large" class="font-weight-light font-condensed pl-2">{{sampletype.T_SampleTypeName}}</div>
                                                        <div>
                                                            <v-btn depressed color="warning"><v-icon left>alarm</v-icon>{{sampletype.process_date}} {{sampletype.process_time}}</v-btn></div>
                                                            <v-btn depressed color="success"><v-icon left>alarm</v-icon>{{sampletype.done_date}} {{sampletype.done_time}}</v-btn></div>
                                                        </div>
                                                </v-card-title>
                                            </v-flex>
                                        </v-layout>
                                        <v-divider></v-divider>
                                        <v-card-actions class="pt-2 pb-2">
                                            <v-layout v-if="sampletype.status !== 'V'" row>
                                                <v-flex pa-1 pl-3 xs6>
                                                    <v-btn block @click="reject(sampletype)" color="error">TOLAK</v-btn>
                                                </v-flex>
                                                <v-flex pa-1 pr-3 xs6>
                                                    <v-btn block @click="verify(sampletype)" color="primary">VERIFIKASI</v-btn>
                                                </v-flex>
                                            </v-layout>
                                            <v-layout v-if="sampletype.status === 'V'" align-center row>
                                                <v-flex xs7>
                                                    <!--<v-chip label color="primary" text-color="white">
                                                        <v-icon left>alarm_on</v-icon>{{sampletype.verify_date}} {{sampletype.verify_time}}
                                                    </v-chip>-->
                                                    <v-btn block depressed color="primary"><v-icon left>alarm_on</v-icon>{{sampletype.verify_date}} {{sampletype.verify_time}}</v-btn>
                                                </v-flex>
                                                <v-flex xs5>
                                                    <v-chip close label @click="unverify(sampletype)" color="red" text-color="white">
                                                        Batal Verifikasi
                                                    </v-chip>
                                                    <!--<v-btn block v-if="sampletype.status === 'V'" @click="unverify(sampletype)" color="error"><v-icon>lock_open</v-icon></v-btn>-->
                                                </v-flex>
                                            </v-layout>
                                        </v-card-actions>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                        <v-flex v-if="sampletype.status !== 'V'" xs-7>
                            <form enctype="multipart/form-data" novalidate v-if="isInitial || isSaving">
                                
                                <div class="dropbox">
                                <input type="file" multiple :name="uploadFieldName" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length"
                                    accept="image/*" class="input-file">
                                    <p v-if="isInitial">
                                    Geret photo ke sini untuk memulai upload<br> atau klik untuk mencari
                                    </p>
                                    <p v-if="isSaving">
                                    Sedang meng-upload {{ fileCount }} photo...
                                    </p>
                                </div>
                            </form>
                            <div class="dropbox text-xs-center" v-if="isFailed">
                                <h2 style="color:#f44336">Photo gagal diupload !</h2>
                                <p>
                                <a href="javascript:void(0)" @click="reset()">Klik untuk upload lagi</a>
                                </p>
                            </div>
                            <div class="dropbox text-xs-center" v-if="isSuccess">
                                <h2>Photo berhasil diupload.</h2>
                                <p>
                                <a href="javascript:void(0)" @click="reset()">Klik untuk upload lagi</a>
                                </p>
                            </div>
                        </v-flex>
                        <v-flex v-if="sampletype.status === 'V'" xs-7>
                            <div class="dropbox_verify">
                                <p>
                                fitur upload photo sudah tidak tersedia
                                </p>
                                <p><v-icon x-medium color="#fff">not_interested</v-icon></p>
                            </div>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>     
            <v-divider></v-divider>
            <v-layout align-center justify-center row fill-height>
                <v-flex xs12 pt-3 pb-3 sm8>
                <v-card color="amber lighten-5">
                    <v-container grid-list-sm fluid>
                    <v-layout justify-center row v-if="xphotos.length === 0">
                            <h5>Belum ada photo yang diupload</h5>
                    </v-layout>
                    <v-layout row v-if="xphotos.length > 0" wrap>
                        <v-flex
                        v-for="photo in xphotos"
                        :key="photo.id"
                        pa-1
                        >
                        <v-card flat tile class="d-flex">
                            <v-img
                            :src="photo.newname"
                            aspect-ratio="1"
                            class="grey lighten-2"
                            @click="openImage(photo)"
                            >
                            <template v-slot:placeholder>
                                <v-layout
                                fill-height
                                align-center
                                justify-center
                                ma-0
                                >
                                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-layout>
                            </template>
                            </v-img>
                        </v-card>
                        </v-flex>
                    </v-layout>
                    </v-container>
                </v-card>
                </v-flex>
            </v-layout>     
        </v-card>
    </v-layout>
</template>

<style scoped>
    .dropbox {
    outline: 2px dashed grey; /* the dash box */
    outline-offset: -10px;
    background: lightcyan;
    color: dimgray;
    padding: 10px 10px;
    min-height: 218px; /* minimum height */
    position: relative;
    cursor: pointer;
  }

  .dropbox_verify {
    outline: 2px dashed #fff; /* the dash box */
    outline-offset: -10px;
    background: #382f2f;
    color: #fff;
    padding-top:45px;
    min-height: 214px; /* minimum height */
    max-height: 214px;
    position: relative;
    cursor: pointer;
    text-align:center;
    vertical-align:middle;
  }
  
  .input-file {
    opacity: 0; /* invisible but it's there! */
    width: 100%;
    height: 200px;
    position: absolute;
    cursor: pointer;
  }
  
  .dropbox:hover {
    background: lightblue; /* when mouse over to the drop zone, change color */
  }
  
  .dropbox p {
    font-size: 1.2em;
    text-align: center;
    padding: 50px 0;
  }
</style>

<script>
module.exports = {
    mounted() {
      this.reset()
    },
    data: () => ({
        uploadFieldName: 'photos[]',
        fileCount:0,
        weigthdiv:4,
        chip2:true
    }),
    computed: {
       sampletype(){
            return this.$store.state.sample.selected_transaction
        },
        currentStatus:{
            get() {
                return this.$store.state.sample.current_status
            },
            set(val) {
                this.$store.commit("sample/update_current_status",val)
            }
        },
        uploadedFiles:{
            get() {
                return this.$store.state.sample.uploaded_files
            },
            set(val) {
                this.$store.commit("sample/update_uploaded_files",val)
            }
        },
        uploadError:{
            get() {
                return this.$store.state.sample.uploaded_error
            },
            set(val) {
                this.$store.commit("sample/update_uploaded_error",val)
            }
        },
        isInitial() {
            return this.currentStatus === 'STATUS_INITIAL';
        },
        isSaving() {
            return this.currentStatus === 'STATUS_SAVING';
        },
        isSuccess() {
            return this.currentStatus === 'STATUS_SUCCESS';
        },
        isFailed() {
            return this.currentStatus === 'STATUS_FAILED';
        },
        xdialogaction:{
            get() {
                return this.$store.state.sample.dialog_action
            },
            set(val) {
                this.$store.commit("sample/update_dialog_action",val)
            }
        },
        xmsgaction:{
            get() {
                return this.$store.state.sample.msg_action
            },
            set(val) {
                this.$store.commit("sample/update_msg_action",val)
            }
        },
        xphotos() {
            return this.$store.state.sample.photos
        },
        xdialogimage:{
            get() {
                return this.$store.state.sample.dialog_image
            },
            set(val) {
                this.$store.commit("sample/update_dialog_image",val)
            }
        },
        ximage() {
            return this.$store.state.sample.image
        },
        xdialogdelete:{
            get() {
                return this.$store.state.sample.dialog_confirmation_delete
            },
            set(val) {
                this.$store.commit("sample/update_dialog_confirmation_delete",val)
            }
        },
        xmsgdelete:{
            get() {
                return this.$store.state.sample.msg_confirmation_delete
            },
            set(val) {
                this.$store.commit("sample/update_msg_confirmation_delete",val)
            }
        },
        xdialoginfo:{
            get() {
                return this.$store.state.sample.open_dialog_info
            },
            set(val) {
                this.$store.commit("sample/update_open_dialog_info",val)
            }
        },
        xmsginfo:{
            get() {
                return this.$store.state.sample.msg_info
            },
            set(val) {
                this.$store.commit("sample/update_msg_info",val)
            }
        },
        showtooltip(){
            if(this.$store.state.sample.selected_transaction.status === 'V'){
                return true
            }
            else{
                return false
            }
        }
    },
    methods : {
        reset() {
            console.log('reset')
            this.currentStatus = 'STATUS_INITIAL';
            this.uploadedFiles = [];
            this.uploadError = null;
        },
        save(formData) {
            this.currentStatus = 'STATUS_SAVING'
            this.$store.dispatch("sample/upload",formData)
        },
        filesChange(fieldName, fileList) {
            const formData = new FormData()
            if (!fileList.length) return
            Array
            .from(Array(fileList.length).keys())
            .map(x => {
                formData.append(fieldName, fileList[x], fileList[x].name)
            })
            formData.append ('ordernumber', this.sampletype.T_OrderHeaderLabNumber)
            formData.append ('orderid', this.sampletype.T_OrderHeaderID)
            formData.append ('sampletype', this.sampletype.T_SampleTypeID)
            formData.append ('token', one_token())
            this.save(formData);
        },
        closeDialogAction(){
            var act = this.$store.state.sample.act
            var statusnextid = 4
            var trxs  = this.$store.state.sample.transactions
            var trx  = this.$store.state.sample.selected_transaction
            var idx = _.findIndex(trxs, item => item.T_OrderHeaderID === trx.T_OrderHeaderID &&  item.T_SampleTypeID === trx.T_SampleTypeID)
            this.$store.dispatch("sample/doaction",{
                act:act,
                orderid:trx.T_OrderHeaderID,
                sampleid:trx.T_SampleTypeID,
                namelab:this.$store.state.sample.name_lab,
                startdate:this.$store.state.sample.start_date,
                enddate: this.$store.state.sample.end_date,
                stationid:this.$store.state.sample.selected_station.id,
                statusnextid : statusnextid,
                doctor:this.$store.state.sample.selected_doctor,
                doctoraddress:this.$store.state.sample.selected_doctor_address,
                current_page:1,
                lastid:idx
            })
            
        },
        reject(value){
            var msg = "Anda yakin akan menolak sample "+value.T_SampleTypeName+" dari pasien "+value.patient_fullname+" ? "
            this.$store.commit("sample/update_msg_action",msg)
            this.$store.commit("sample/update_act",'reject')
            this.$store.commit("sample/update_dialog_action",true)
        },
        verify(value){
            this.$store.commit("sample/update_errors",[])
            var errors = this.$store.state.sample.errors
            if(_.isEmpty(this.$store.state.sample.selected_doctor)){
                errors.push("requiredoctor")
            }
            if(_.isEmpty(this.$store.state.sample.selected_doctor_address)){
                errors.push("requiredoctoraddress")
            }
            if(errors.length === 0){
                var msg = "Anda yakin akan me-verifikasi sample "+value.T_SampleTypeName+" dari pasien "+value.patient_fullname+" ? "
                this.$store.commit("sample/update_msg_action",msg)
                this.$store.commit("sample/update_act",'verify')
                this.$store.commit("sample/update_dialog_action",true)
            }
        },
        unverify(value){
            var msg = "Anda yakin akan membatalkan verifikasi "+value.T_SampleTypeName+" dari pasien "+value.patient_fullname+" ? "
            this.$store.commit("sample/update_msg_action",msg)
            this.$store.commit("sample/update_act",'unverify')
            this.currentStatus === 'STATUS_INITIAL'
            this.$store.commit("sample/update_dialog_action",true)
        },
        openImage(value){
            this.$store.commit("sample/update_selected_photo",value)
            this.$store.commit("sample/update_image",value.newname)
            this.$store.commit("sample/update_dialog_image",true)
        },
        deleteImage(){
            this.$store.commit("sample/update_dialog_image",false)
            var msg = "<p>Yakin akan menghapus photo ?</p>"
            this.$store.commit("sample/update_msg_confirmation_delete",msg)
            this.$store.commit("sample/update_dialog_confirmation_delete",true)
        },
        doDeletePhoto(){
            var id = this.$store.state.sample.selected_photo.id
            var trxs  = this.$store.state.sample.transactions
            var trx  = this.$store.state.sample.selected_transaction
            var idx = _.findIndex(trxs, item => item.T_OrderHeaderID === trx.T_OrderHeaderID &&  item.T_SampleTypeID === trx.T_SampleTypeID)
            this.$store.dispatch("sample/deletephoto",{
                id:id,
                orderid:trx.T_OrderHeaderID,
                sampleid:trx.T_SampleTypeID,
                namelab:this.$store.state.sample.name_lab,
                startdate:this.$store.state.sample.start_date,
                enddate: this.$store.state.sample.end_date,
                stationid:this.$store.state.sample.selected_station.id,
                current_page:1,
                lastid:idx
            })
        }
    }
}
</script>
