<template>
    <div>
      <v-layout column>
        <v-dialog v-model="dialogconfirmation" persistent max-width="290">
          <v-card>
          <v-card-title dark class="headline error pt-2 pb-2" primary-title style="color: white">
             <h4 dark>Konfirmasi</h4>
          </v-card-title>
          <v-card-text>
             {{ msgconfirmation }}
          </v-card-text>
          <v-card-actions>
             <v-spacer></v-spacer>
             <v-btn small color="error darken-1 text-sm-right" flat
                @click="dialogconfirmation = false">Batal</v-btn>
             <v-btn small color="primary darken-1 text-sm-left" flat @click="doSave()">Simpan</v-btn>
          </v-card-actions>
          </v-card>
       </v-dialog>
        <!-- alert dialog error start -->
        <v-dialog v-model="dialogerror" persistent max-width="290">
            <v-card>
                <v-card-title color="error" class="headline">Error !</v-card-title>
                <v-card-text>
                {{ msgerror }}
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" flat @click="closeDialogError">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- alert dialog error end -->

       <v-dialog v-model="dialogsuccess" persistent  max-width="290">
         <v-card>
             <v-card-title color="success"  class="headline">Berhasil !</v-card-title>
             <v-card-text>
                 {{msgsuccess}}
             </v-card-text>
             <v-card-actions>
             <v-spacer></v-spacer>
             <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
             </v-card-actions>
         </v-card>
       </v-dialog>

        <v-layout align-center column>
          <v-toolbar dark color="primary">
            <v-toolbar-title class="white--text"
              >DAFTAR SAMPEL</v-toolbar-title
            >
            <v-spacer></v-spacer>
  
          </v-toolbar>
          <v-card style="width: 100%" class="mb-2 pa-2">
            <v-layout row wrap>
                <v-flex xs12 class="text-sm-right" pa-1>
                    <v-btn v-if="xsamples.length > 0" :disabled="xsamples[0].ischoose == 'Y'" @click="opensaveConfirm()" color="primary">Konfirmasi</v-btn>
                </v-flex>
            </v-layout>
          </v-card>
        </v-layout>
        <v-card>
        <v-layout v-if="xsamples.length > 0" row wrap class="scroll-container" style="max-height:600px;overflow: auto;">
            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                <v-layout xs12 row wrap>
                    <v-flex xs4 v-for="(vst,idx) in xsamples" :key="vst.T_OrderSampleID" class="pr-2 pb-1">
                        <v-layout row>
                            <v-flex :class="vst.ischoose === 'Y' ? 'boxoutlinegreen' : 'boxoutline'" style="text-overflow:ellipsis;overflow:hidden;" xs11>
                                <span>{{vst.typename_barcode}}</span>
                            </v-flex>
                            <v-flex :class="vst.ischoose === 'Y' ? 'boxoutlinegreen text-left' : 'boxoutline text-left'" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
                                <v-layout row align-left justify-space-between>
                                    <v-icon v-if="vst.ischoose === 'N'" style="color:red">clear</v-icon>
                                    <v-icon v-if="vst.ischoose === 'Y'" style="color:green">check</v-icon>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
        </v-card>
      </v-layout>
      <!-- <one-dialog-print
        :title="printtitle"
        :width="printwidth"
        :height="500"
        :status="openprint"
        :urlprint="urlprint"
        @close-dialog-print="closePrint"
      ></one-dialog-print> -->
    </div>
  </template>
  <style scoped>
  .searchbox .v-input.v-text-field .v-input__slot {
    min-height: 60px;
  }
  
  .searchbox .v-btn {
    min-height: 60px;
  }
  
  table.v-table tbody td,
  table.v-table tbody th {
    height: 40px;
  }
  
  table.v-table thead tr {
    height: 40px;
  }
  
  .scroll-container {
    scroll-padding: 50px 0 0 50px;
  }

    .boxoutlinegreen {
        color: green;
        border: 1px solid green;
        justify-content: center;
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
        background: #ffffff;
        font-size: 14px;
        font-weight: 500;
        border-radius: 1px
    }

    .boxoutlinegreen:hover {
        background: rgba(0, 0, 0, 0.07) !important;
        font-size: 15px;
        font-weight: 700;
    }
    .boxoutline {
        color: red;
        border: 1px solid red;
        justify-content: center;
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
        background: #ffffff;
        font-size: 14px;
        font-weight: 500;
        border-radius: 1px
    }

    .boxoutline:hover {
        background: rgba(0, 0, 0, 0.07) !important;
        font-size: 15px;
        font-weight: 700;
    }
  
  ::-webkit-scrollbar {
    width: 7px;
  }
  
  /* this targets the default scrollbar (compulsory) */
  
  ::-webkit-scrollbar-track {
    background-color: #73baf3;
  }
  
  /* the new scrollbar will have a flat appearance with the set background color */
  
  ::-webkit-scrollbar-thumb {
    background-color: #2196f3;
  }
  
  /* this will style the thumb, ignoring the track */
  
  ::-webkit-scrollbar-button {
    background-color: #0079da;
  }
  
  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
  
  ::-webkit-scrollbar-corner {
    background-color: black;
  }
  </style>
  <script>
  module.exports = {
    components: {
    //   "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    mounted() {},
    methods: {
      opensaveConfirm() {
        var msg = "Yakin, akan terima sampel ?"
        this.$store.commit("receive/update_msg_confirmation", msg)
        this.$store.commit("receive/update_dialog_confirmation", true)
      },
      doSave() {
        var datasample = this.$store.state.receive.samples;
        if (datasample.length > 0) {
          var prm = {
            spkHomeServiceID: this.$store.state.receive.selected_transaction.SpkHomeServiceID,
            spkHomeServiceOrderID: this.$store.state.receive.selected_transaction.SpkHomeServiceOrderID,
            arrSample: datasample
          }
          this.$store.dispatch("receive/saveConfirm", prm)
        }
      },
      closeDialogError() {
          this.$store.commit("receive/update_dialog_error", false);
      },
      closeDialogSuccess(){
        this.$store.dispatch("receive/getsample", {
            orderheaderID: this.$store.state.receive.selected_transaction.SpkHomeServiceOrderT_OrderHeaderID 
        })
        this.$store.commit("receive/update_dialog_success",false)
      },
    },
    computed: {
      xsamples() {
        return this.$store.state.receive.samples;
      },
      dialogconfirmation: {
        get() {
          return this.$store.state.receive.dialog_confirmation
        },
        set(val) {
          this.$store.commit("receive/update_dialog_confirmation", val)
        }
       },
       msgconfirmation() {
          return this.$store.state.receive.msg_confirmation
       },
      dialogerror: {
          get() {
              return this.$store.state.receive.dialog_error;
          },
          set(val) {
              this.$store.commit("receive/update_dialog_error", val);
          },
      },
      msgerror() {
          return this.$store.state.receive.msg_error;
      },
      dialogsuccess: {
          get() {
             return this.$store.state.receive.dialog_success
          },
          set(val) {
             this.$store.commit("receive/update_dialog_success",val)
          }
       },
       msgsuccess(){
          return this.$store.state.receive.msg_success
       }
    },
    watch: {

    },
    data() {
      return {
        printtitle: "",
        printwidth: "80%",
        openprint: false,
        urlprint: "",
        searchhandoverHeaderCopy: "",
        selected_delivery: {},
        search_company: "",
        search_test: "",
        menuFormDateStart: false,
        menuFormDateEnd: false,
        date: new Date().toISOString().substr(0, 10),
        dialogAct: "add",
        items: [],
        menuFormDateEnd: false,
        menuFormDateStart: false,
        errors: [],
        sheet: false,
        indeterminatex: false,
        checkednotall: false,
        bar_chx_all: false,
        selected_barcode: [],
        dialogtimeline: false,
        search_doctor: "",
        headers: [
          {
            text: "NOMOR",
            align: "center",
            sortable: false,
            value: "lab",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "TGL. ORDER",
            align: "center",
            sortable: false,
            value: "lab",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "NAMA",
            align: "center",
            sortable: false,
            value: "lab",
            width: "25%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "STAFF",
            align: "center",
            sortable: false,
            value: "name",
            width: "20%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "PENERIMA",
            align: "center",
            sortable: false,
            value: "name",
            width: "20%",
            class: "pa-2 blue darken-2 white--text",
          },
        ],
      };
    },
  };
  </script>
  