<template>
<div>
   <v-dialog
   v-model="xpromisedialog"
   persistent
   max-width="30%"
   >
   <v-card>
   <v-card-title
   class="headline teal white--text pt-2 pb-2"
   primary-title

   >
   <h4 dark>Ganti janji hasil</h4>
   </v-card-title>
   <v-card-text class="pt-2 pb-2">
   <v-layout wrap>
   <v-flex xs12>
   <v-layout v-for="promise in xpromises" row>
   <v-flex xs9 pr-1>
   <v-text-field
   label="Tanggal"
   v-model="promise.xdate"

   ></v-text-field>
   </v-flex>
   <v-flex xs3 pl-1>
   <v-text-field
   label="Jam"
   v-model="promise.xtime"

   ></v-text-field>
   </v-flex>
   </v-layout>
   </v-flex>
   </v-layout>
   <v-layout row>
   <v-flex xs12 d-flex>
   <p v-for="error in errors" class="error pl-2 pr-2" style="color:#fff">janji manis jangan kau ingkari, janji hasil {{error.xdate}} {{error.xtime}} , masih salah dong formatnya (dd-mm-yyyy hh:mm)</p>
   </v-flex>
   </v-layout>
   </v-card-text>
   <v-divider></v-divider>
   <v-card-actions>
   <v-spacer></v-spacer>
   <v-btn
   color="cyan"
   flat
   @click="doSavePromise()"
   >
   Simpan
   </v-btn>
   <v-btn
   color="black"
   flat
   @click="xpromisedialog = false"
   >
   Tutup
   </v-btn>
   </v-card-actions>
   </v-card>
   </v-dialog>
   <v-layout class="fill-height" column>
   <v-card  class="mb-2 pa-2 searchbox" >
   <v-layout row>
   <v-flex xs3>
   <v-select class="xs3 mini-select ma-1"
   :items="filters"
   item-text="name"
   return-object
   v-model="selected_filter"
   label="Filter" outline   hide-details></v-select>
   </v-flex>
   <v-flex xs3>
   <v-text-field class="xs3 ma-1"
   label="Cari ..."
   placeholder="Nama / No Reg"
   outline
   v-on:keyup.enter="searchPatient"
   v-model="searchnamelab"
   hide-details
   ></v-text-field>
   </v-flex>
   <v-flex xs3>
   <v-select class="xs3 mini-select ma-1" :items="statuses"
   item-text="name"
   return-object
   v-model="status"
   label="Status" outline   hide-details></v-select>
   </v-flex>
   <!--<span @click="searchPatient"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>-->

   </v-layout>
   </v-card>
   <v-card >
   <v-layout row>
   <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
   <v-data-table
   :headers="headers"
   :items="patients"
   :loading="isLoading"
   hide-actions class="elevation-1">
   <template slot="items" slot-scope="props" >
   <tr :class="{notlunas: props.item.flaglunas=='N'} ">
      <td class="text-xs-left pa-2 'cito': isCito(props.item)" v-bind:class="{'':isSelected(props.item),'cito':  props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)">
         {{ props.item.T_OrderHeaderLabNumber}} <v-btn @click="patientComing(props.item)" v-if="props.item.last_status < 7 && notToday(props.item)" small style="min-width:10px;margin:0" flat color="teal"><v-icon>assignment_returned</v-icon></v-btn>
      </td>
      <td class="text-xs-left pa-2 'cito': isCito(props.item)" v-bind:class="{'':isSelected(props.item),'cito':  props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)">{{ props.item.M_PatientName}}</td>
      <td class="text-xs-left pa-2 'cito': isCito(props.item)" v-bind:class="{'':isSelected(props.item),'cito':  props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)">{{ props.item.M_CompanyName}} : {{ props.item.M_MouName}}</td>
      <td class="text-xs-left pa-2 'cito': isCito(props.item)" v-bind:class="{'':isSelected(props.item),'cito':  props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)"
         v-html="(props.item.janji)">
      </td>
      <td class="text-xs-left pa-2  'cito': isCito(props.item) " v-bind:class="{'':isSelected(props.item) , 'cito': props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)"
         v-html="splittest(props.item.test)" />
      </td>
      <td class="text-xs-left pa-2 'cito': isCito(props.item)" v-bind:class="{'':isSelected(props.item),'cito': props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)">{{ props.item.delivery}}</td>
      <td class="text-xs-left pa-2 'cito': isCito(props.item)" v-bind:class="{'':isSelected(props.item),'cito': props.item.T_OrderHeaderIsCito === 'Y'}" @click="selectMe(props.item)">{{ props.item.status}}
         <span v-if="props.item.unpaid > 0">
            {{ number_format(props.item.unpaid) }}
         </span>
      </td>
   </tr>
   </template>
   </v-data-table>
   <v-divider></v-divider>
   <v-layout>
   <v-flex   >
   <v-pagination
   style="margin-top:10px;margin-bottom:10px"
   v-model="curr_page"
   :length="xtotal_page" >
   </v-pagination>
   </v-flex>
   <v-flex >
   <p style="margin-top:13px;color: rgba(0,0,0,0.54);font-size:12px;">Menampilkan <span class="red--text">{{xtotal_patients}}</span> dari <span class="red--text">{{xtotalpatients}}</span>              total data</p>
   </v-flex>
   </v-layout>
   </v-flex>
   </v-layout>
   </v-card>
   <one-dialog-alert :status="openalertnopay" :msg="msgalertnopay" @forget-dialog-alert="forgetAlertNoPay()" @close-dialog-alert="closeAlertNoPay()"></one-dialog-alert>
   </v-layout>
   </template>

   <style scoped>
.notlunas {
   color: red;
}
.cito {
   color: white;
   background-color:#FFC107;
}
.citoo {
   color: red;
}

span.xtd {
   margin-right:10px;
}
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:40px;
}
.searchbox .v-btn {
   min-height:40px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}

.v-messages{
   min-height:0px!important;
}

</style>

<script>
module.exports = {
   components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
   mounted() {
      this.$store.dispatch("patient/search",{
         filter:this.selected_filter.id,
         search: this.searchnamelab,
         status: this.status.value,
         current_page:1,
         lastidx:0
      })
   },
   methods : {
      number_format(val) {
         return numeral(val).format('0,0');
      },
      notToday(item){
         return item.order_date !== moment(new Date()).format('YYYY-MM-DD')
      },
      splittest(inp){
         let a_test = inp.split(',')
         let s_test = ''
         for(let i=0;i<a_test.length;i++) {
            let test = a_test[i]
            let a_cito = test.split('^')
            s_test += '<span class="xtd '
            if (a_cito[1] == 'Y') s_test += 'citoo'
               s_test += '" >'
            s_test += a_cito[0] + '</span>'
         }
         return s_test
      },
      formatDate (date) {
         if (!date) return null

            const [year, month, day] = date.split('-')
            return `${day}-${month}-${year}`
      },
      deFormatedDate (date) {
         if (!date) return null

            const [ day,month, year] = date.split('-')
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      },
      isSelected(p) {
         return p.T_OrderHeaderID == this.$store.state.patient.selected_patient.T_OrderHeaderID
      },
      isCito(p) {
         return p.cito== 1
      },
      async searchPatient() {
         let inp_no = this.searchnamelab 
         if (inp_no.length == 10 ) {
            inp_no = await window.xno(inp_no)
         }
         //this.searchnamelab = inp_no
         this.$store.dispatch("patient/search",{
            filter:this.selected_filter.id,
            search: inp_no,
            status: this.status.value,
            current_page:1,
            lastidx:0
         })
      },
      selectMe(pat) {
         var patients = this.$store.state.patient.patients
         var idx = _.findIndex(patients, function(o) { return o.T_OrderHeaderID == pat.T_OrderHeaderID })
         this.$store.commit("patient/update_lastidx",idx)
         this.$store.commit("patient/update_selected_patient",pat)
      },
      closeAlertNoPay(){
         this.$store.commit("patient/update_open_alert_no_pay",false)
      },
      forgetAlertNoPay(){
         var xval = this.$store.state.payment.types
         var valpay = 0
         xval.forEach(function(obj){
            obj.leftvalue = 0
            obj.rightvalue = 0
         })
         this.$store.commit("payment/update_total_payment",0)
         this.$store.commit("patient/update_open_alert_no_pay",false)
      },
      patientComing(patient){
         var prm = patient
         this.$store.dispatch("patient/lookup_promises",prm)
      },
      doSavePromise(){
         let arrx = this.$store.state.patient.promises
         var errors = []
         arrx.forEach(function(arr) {
            var xDate = moment(arr.xdate, 'DD-MM-YYYY', true)
            var isValidDate = xDate.isValid()
            var xTime = moment(arr.xtime, 'HH:mm', true)
            var isValidTime = xTime.isValid()
            if(!isValidDate){
               errors.push(arr)
            }
            if(!isValidTime){
               errors.push(arr)
            }
         })

         this.errors = errors
         if(errors.length === 0){
            var prm = {
               data : arrx,
               orderid:this.$store.state.patient.selected_patient.T_OrderHeaderID
            }
            prm.search = {
               filter:this.selected_filter.id,
               search: this.searchnamelab,
               status: this.status.value,
               current_page:this.$store.state.patient.current_page,
               lastidx:this.$store.state.patient.lastidx
            }
            this.$store.dispatch("patient/savepromises",prm)
         }

      },
   },
   computed: {
      xpromisedialog:{
         get() {
            return this.$store.state.patient.promise_dialog
         },
         set(val) {
            this.$store.commit("patient/update_promise_dialog",val)
         }
      },
      xpromises: {
         get() {
            return this.$store.state.patient.promises
         },
         set(val) {
            this.$store.commit("patient/update_promises",val)
         }
      },
      xstartdate:{
         get() {
            return this.$store.state.patient.start_date
         },
         set(val) {
            this.$store.commit("patient/update_start_date",val)
         }
      },
      xenddate:{
         get() {
            return this.$store.state.patient.end_date
         },
         set(val) {
            this.$store.commit("patient/update_end_date",val)
         }
      },
      searchnamelab:{
         get() {
            return this.$store.state.patient.search
         },
         set(val) {
            this.$store.commit("patient/update_search",val)
            //this.searchPatient()
         }
      },
      statuses(){
         return this.$store.state.patient.statuses
      },
      status:{
         get() {
            return this.$store.state.patient.selected_status
         },
         set(val) {
            this.$store.commit("patient/update_selected_status",val)
            this.searchPatient()
         }
      },
      startDateFormatted () {
         return this.formatDate(this.xstartdate)
      },
      endDateFormatted () {
         return this.formatDate(this.xenddate)
      },
      isLoading() {
         return this.$store.state.patient.search_status == 1
      },
      patients() {
         return this.$store.state.patient.patients
      },
      openalertnopay:{
         get() {
            return this.$store.state.patient.open_alert_no_pay
         },
         set(val) {
            this.$store.commit("patient/update_open_alert_no_pay",false)
         }
      },
      msgalertnopay(){
         return this.$store.state.patient.msg_alert_no_pay
      },
      curr_page: {
         get() {
            return this.$store.state.patient.current_page
         },
         set(val) {
            this.$store.commit("patient/update_current_page",val)
            this.$store.dispatch("patient/search",{
               filter:this.selected_filter.id,
               search: this.searchnamelab,
               status: this.status.value,
               current_page:val,
               lastidx:this.$store.state.patient.lastidx
            })
         }
      },
      xtotal_page: {
         get() {
            return this.$store.state.patient.total_page
         },
         set(val) {
            this.$store.commit("patient/update_total_page",val)
         }
      },

      xtotal_patients: {
         get() {
            return this.$store.state.patient.total_patient
         },
         set(val) {
            this.$store.commit("patient/update_total_patient",val)
         }
      },

      xtotalpatients() {
         return this.$store.state.patient.total_patients
      },
      xtotalfilterpatients() {
         return this.$store.state.patient.total_filter_patients
      },
      filters: {
         get() {
            return this.$store.state.patient.filters
         },
         set(val) {
            this.$store.commit("patient/update_filters",val)
         }
      },
      selected_filter: {
         get() {
            return this.$store.state.patient.selected_filter
         },
         set(val) {
            this.$store.commit("patient/update_selected_filter",val)
            this.searchPatient()
         }
      },
   },
   data() {
      return {
         items: [],
         menustartdate:false,
         menuenddate:false,
         errors:[],
         headers: [
            {
            text: "NO REG",
            align: "left",
            sortable: false,
            value: "lab",
            width: "10%",
            class: "pa-2 blue lighten-3 white--text"
         },
         {
            text: "NAMA",
            align: "left",
            sortable: false,
            value: "name",
            width: "15%",
            class: "pa-2 blue lighten-3 white--text"
         },
         {
            text: "AGREEMENT",
            align: "left",
            sortable: false,
            value: "name",
            width: "10%",
            class: "pa-2 blue lighten-3 white--text"
         },

         {
            text: "JANJI HASIL",
            align: "left",
            sortable: false,
            value: "status",
            width: "15%",
            class: "pa-2 blue lighten-3 white--text"
         },

         {
            text: "PEMERIKSAAN",
            align: "left",
            sortable: false,
            value: "status",
            width: "30%",
            class: "pa-2 blue lighten-3 white--text"
         },

         {
            text: "PENGIRIMAN",
            align: "left",
            sortable: false,
            value: "status",
            width: "10%",
            class: "pa-2 blue lighten-3 white--text"
         },

         {
            text: "STATUS",
            align: "left",
            sortable: false,
            value: "status",
            width: "10%",
            class: "pa-2 blue lighten-3 white--text"
         }
         ],
      }
   }
}
</script>
