<template>
      <v-layout class="fill-height" column>
            <v-layout row wrap>

                  <v-flex xs4 class="left" fill-height pa-1>
                        <v-card class=" mb-2 pa-3 searchbox">
                              <v-layout>
                                    <v-flex style="padding-top:5px;">
                                          <h2>LAPORAN STATUS PASIEN</h2>
                                    </v-flex>
                              </v-layout>
                        </v-card>
                  </v-flex>
                  <v-spacer></v-spacer>
                  <v-flex xs8 class="right" fill-height pa-1>
                        <v-card class=" mb-2 pa-1 searchbox">
                              <v-layout>
                              <v-flex md4>
                                         <v-select class="xs4 mini-select ma-1" :items="xstatuses" style="font-size:14px" item-text="label" return-object v-model="xselectedstatus"
                    label="Status" outline hide-details></v-select>
                                    </v-flex>
                                    <v-flex md4>
                                          <v-menu ref="menustartdate" v-model="menustartdate" :close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
                                                offset-y full-width max-width="290px" min-width="290px">
                                                <template v-slot:activator="{ on }">
                                                      <v-text-field v-model="startDateFormatted" label="Tanggal Mulai" readonly hide-details class="xs3 ma-1" outline v-on="on"
                                                            @blur="deFormatedDate(startDateFormatted)"></v-text-field>
                                                </template>
                                                <v-date-picker v-model="xstartdate" no-title @input="menustartdate = false"></v-date-picker>
                                          </v-menu>
                                    </v-flex>
                                    <v-flex md4>
                                          <v-menu ref="menuenddate" v-model="menuenddate" :close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
                                                offset-y full-width max-width="290px" min-width="290px">
                                                <template v-slot:activator="{ on }">
                                                      <v-text-field v-model="endDateFormatted" label="Tanggal Akhir" hide-details outline class="xs3 ma-1" readonly v-on="on" @blur="deFormatedDate(endDateFormatted)"></v-text-field>
                                                </template>
                                                <v-date-picker v-model="xenddate" no-title @input="menuenddate = false"></v-date-picker>
                                          </v-menu>
                                    </v-flex>
                                    <v-flex md4>
                                          <v-select item-text="M_BranchName" return-object :items="branchs" style="font-size:14px" class="xs4 mini-select ma-1" v-model="selected_filter_branch"
                                                outline hide-details label="Cabang"></v-select>
                                    </v-flex>
                                    <v-flex md3>
               <v-radio-group v-model="formatreport" row>
                  <v-radio color="grey" label="PDF" value="pdf"></v-radio>
                  <v-radio color="grey" label="EXCEL" value="xls"></v-radio>
               </v-radio-group>
                </v-flex>
                                    <v-spacer></v-spacer>
                                    <span @click="printControlCard()" class="icon-medium-fill-base xs1 white--text grey darken-1  ml-1 icon-print"></span>

                              </v-layout>
                        </v-card>
                  </v-flex>
            </v-layout>


            <v-flex xs12>
                  <v-card class="fill-height" column>
                        <v-layout row>
                              <v-flex pl-2 pr-2 pt-2 pb-2>
                                    <object style="overflow: hidden;" width="100%" :height="xheight" :data="xurl"></object>
                              </v-flex>
                        </v-layout>
                  </v-card>
            </v-flex>

      </v-layout>



</template>



<style scoped>
      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: {

            },
            mounted() {
                  this.$store.dispatch("close/getdataselect")
                  this.$store.dispatch("close/search", {
                        startdate: this.xstartdate,
                        enddate: this.xenddate,
                        search: this.searchnamelab,
                        status: this.status.value,
                        current_page: 1,
                        lastidx: 0
                  })
            },
            methods: {


                  selectMe(pat) {
                        this.$store.commit("close/update_selected_close", pat)
                  },

                  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.close.selected_close.T_OrderHeaderID
                  },
                  searchClose() {
                        this.$store.dispatch("close/search", {
                              startdate: this.xstartdate,
                              enddate: this.xenddate,
                              search: this.searchnamelab,
                              status: this.status.value,
                              current_page: 1,
                              lastidx: 0
                        })
                  },
                  printControlCard(value) {
                        this.printwidth = "800"
                        this.printtitle = ""
                        let user = one_user()
                        var tm = new Date()
                        var formatrpt = this.formatreport
                        var branchid = this.selected_filter_branch.M_BranchID
                        var rname = this.xselectedstatus.value
                        this.xurl =
                              "https://mobile.pramita.co.id/birt/run?__report=report/one/fo/" + rname + "&__format=" +
                              formatrpt + "&PStartDate=" + this.xstartdate + "&PEndDate=" + this.xenddate +
                              "&PBranchID=" + branchid + "&username=" + user.M_UserUsername + ""
                  }
            },
            computed: {


                  xstartdate: {
                        get() {
                              return this.$store.state.close.start_date
                        },
                        set(val) {
                              this.$store.commit("close/update_start_date", val)
                        }
                  },
                  xenddate: {
                        get() {
                              return this.$store.state.close.end_date
                        },
                        set(val) {
                              this.$store.commit("close/update_end_date", val)
                        }
                  },
                  xstatuses() {
                return this.$store.state.close.statuses
            },
            xselectedstatus: {
                get() {
                    return this.$store.state.close.selected_status
                },
                set(val) {
                    this.$store.commit("close/update_selected_status", val)
                }
            },
                  selected_filter_branch: {
                        get() {
                              return this.$store.state.close.selected_filter_branch
                        },
                        set(val) {
                              this.$store.commit("close/update_selected_filter_branch", val)
                        }
                  },
                  branchs: {
                        get() {
                              return this.$store.state.close.branchs
                        },
                        set(val) {
                              this.$store.commit("close/update_branchs", val)
                        }
                  },
                  searchnamelab: {
                        get() {
                              return this.$store.state.close.search
                        },
                        set(val) {
                              this.$store.commit("close/update_search", val)
                        }
                  },
                  statuses() {
                        return this.$store.state.close.statuses
                  },
                  status: {
                        get() {
                              return this.$store.state.close.selected_status
                        },
                        set(val) {
                              this.$store.commit("close/update_selected_status", val)
                        }
                  },
                  openprintnote: {
                        get() {
                              return this.$store.state.close.open_print_note
                        },
                        set(val) {
                              this.$store.commit("close/update_open_print_note", false)
                        }
                  },
                  selpat() {
                        return this.$store.state.close.selected_close
                  },
                  startDateFormatted() {
                        return this.formatDate(this.xstartdate)
                  },
                  endDateFormatted() {
                        return this.formatDate(this.xenddate)
                  },
                  isLoading() {
                        return this.$store.state.close.search_status == 1
                  },
                  closes() {
                        return this.$store.state.close.closes
                  },

                  curr_page: {
                        get() {
                              return this.$store.state.close.current_page
                        },
                        set(val) {
                              this.$store.commit("close/update_current_page", val)
                              this.$store.dispatch("close/search", {
                                    startdate: this.xstartdate,
                                    enddate: this.xenddate,
                                    search: this.searchnamelab,
                                    status: this.status.value,
                                    current_page: val,
                                    lastidx: 0
                              })
                        }
                  },
                  xtotal_page: {
                        get() {
                              return this.$store.state.close.total_page
                        },
                        set(val) {
                              this.$store.commit("close/update_total_page", val)
                        }
                  },
            },
            data() {
                  return {
                        xheight: '600',
                        xurl: '',
                        items: [],
                        menustartdate: false,
                        menuenddate: false,
                        dialog: false,
                        urlprintnote: '',
                        printtitle: '',
                        formatreport: 'pdf',
                        printwidth: '100%',
                        headers: [{
                                    text: "TANGGAL",
                                    align: "left",
                                    sortable: false,
                                    value: "mr",
                                    width: "15%",
                                    class: "pa-2 blue lighten-3 white--text"
                              },
                              {
                                    text: "NO TRX",
                                    align: "left",
                                    sortable: false,
                                    value: "lab",
                                    width: "10%",
                                    class: "pa-2 blue lighten-3 white--text"
                              },

                              {
                                    text: "NAMA FO",
                                    align: "left",
                                    sortable: false,
                                    value: "name",
                                    width: "15%",
                                    class: "pa-2 blue lighten-3 white--text"
                              },
                              {
                                    text: "ACTION",
                                    align: "left",
                                    sortable: false,
                                    value: "name",
                                    width: "10%",
                                    class: "pa-2 blue lighten-3 white--text"
                              }
                        ],
                  }
            }
      }
</script>