<template>
  <div>
    <v-layout class="fill-height" column>
      <v-layout align-center column>
        <v-toolbar dark color="primary">
          <v-toolbar-title  class="white--text">
           <span v-if="selectedPriceHeader">{{ selectedPriceHeader.headerName }}</span> </v-toolbar-title
          >
        </v-toolbar>
        <v-card style="width: 100%" class="mb-1 pa-2 searchbox">
          <v-layout row>
            <v-flex xs4 class="mr-1">
              <v-text-field
                label="Cari Pasien"
                hide-details
                v-model="filterName"
                outline
              ></v-text-field>
            </v-flex>
          </v-layout>
        </v-card>
      </v-layout>
      <v-card>
        <v-data-table
          :loading="loading"
          :items="priceTestList"
          :headers="headers"
          class="v-table elevation-1"
          hide-actions
        >
          <template v-slot:headers="props">
            <tr>
              <th
                v-for="header in props.headers"
                :width="header.width"
                :class="header.class"
              >
                {{ header.text }}
              </th>
            </tr>
          </template>
          <v-progress-linear
            v-slot:progress="loading"
            color="blue"
            :indeterminate="true"
          ></v-progress-linear>
          <template v-slot:items="props">
            <tr>
              <td class="py-2">
                <v-text-field
                  :label="props.item.labno"
                  hide-details
                  disabled
                  :value="props.item.patient_name"
                >
                  
                </v-text-field>
              </td>
              <td class="py-2">
                <span v-for="(sample,k) in props.item.samples">
                  <v-btn dark v-if="selectedPriceHeader && sample.isreceive === 'N' && selectedPriceHeader.isvalid === 'N'" depressed small color="error">{{ sample.sample_type_name }}</v-btn>
                  <v-btn dark v-if="selectedPriceHeader && sample.isreceive === 'Y' && sample.detail_id === '0' && selectedPriceHeader.isvalid === 'N'" @click="CheckSample(sample)" small color="teal">{{ sample.sample_type_name }}</v-btn>
                  <v-btn dark v-if="sample.isreceive === 'Y' && sample.detail_id > '0'" depressed small color="success">{{ sample.sample_type_name }} <v-icon right dark>check</v-icon></v-btn>
                </span>
              </td>
            </tr>
          </template>
        </v-data-table>
        <v-divider></v-divider>
        <v-card flat class="pa-2">
        <div class="text-xs-left">
          <v-pagination
            v-model="priceTestPage"
            :length="priceTestPageTotal"
          ></v-pagination>
        </div>
      </v-card>
      </v-card>
      
    </v-layout>
  </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;
}

::-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-info": httpVueLoader("../../common/oneDialogInfo.vue"),
  //     "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
  //   },
  mounted() {
    //this.$store.dispatch("patient/searchcompany", this.search_company)
    
  },
  methods: {
    CheckSample(sample){
      this.$store.dispatch("price/checksample", sample)
    },
    updateAlert_success(val) {
      this.$store.commit("patient/update_alert_success", val);
    },

    closeDialogQrCode() {
      this.dialogQrCode = false;
    },
    handleChangeAmount(data) {
      console.log(data);
      // priceAmount
      // priceDisc
      // priceDiscRp
      // subTotal
      // testID
      if (parseFloat(data.priceAmount) < 0) {
        alert(" price amount test " + data.testName + "Kurang dari 0");
        return;
      }
      amount = parseFloat(data.priceAmount);
      diskon = 0;
      if (data.priceDisc !== "" && data.priceDisc !== null) {
        diskon = parseFloat(data.priceDisc);
      }
      diskonRp = 0;
      if (data.priceDiscRp !== "" && data.priceDiscRp !== null) {
        diskonRp = parseFloat(data.priceDiscRp);
      }
      total = 0;
      if (data.subTotal !== "" && data.subTotal !== null) {
        total = parseFloat(data.subTotal);
      }
      let newTotal = 0;
      if (diskonRp === 0) {
        diskonAmount = (diskon / 100) * amount;
        newTotal = amount - diskonAmount;
      }
      if (diskon === 0) {
        newTotal = amount - diskonRp;
      }
      console.log("new total");
      console.log(newTotal);
      if (newTotal == NaN) {
        newTotal = 0;
      }
      data.subTotal = newTotal;
    },
    thr_search_company: _.debounce(function () {
      this.$store.dispatch("patient/searchcompany", this.search_company);
    }, 2000),
  },
  computed: {
    filterName: {
      get() {
        return this.$store.state.price.filterName;
      },
      set(val) {
        this.$store.commit("price/update_filterName", val);
        this.$store.dispatch("price/searchpricetest");
      },
    },
    filterSubGroup: {
      get() {
        return this.$store.state.price.filterSubGroup;
      },
      set(val) {
        this.$store.commit("price/update_filterSubGroup", val);
      },
    },
    filterStatus: {
      get() {
        return this.$store.state.price.filterStatus;
      },
      set(val) {
        this.$store.commit("price/update_filterStatus", val);
      },
    },
    selectedFilterSubGroup: {
      get() {
        return this.$store.state.price.selectedFilterSubGroup;
      },
      set(val) {
        this.$store.commit("price/update_selectedFilterSubGroup", val);
        this.$store.dispatch("price/searchpricetest");
      },
    },
    selectedFilterStatus: {
      get() {
        return this.$store.state.price.selectedFilterStatus;
      },
      set(val) {
        this.$store.commit("price/update_selectedFilterStatus", val);
        this.$store.dispatch("price/searchpricetest");
      },
    },
    loading: {
      get() {
        return this.$store.state.price.loading;
      },
      set(val) {
        this.$store.commit("price/update_loading", val);
      },
    },

    errorMsg: {
      get() {
        return this.$store.state.price.errorMsg;
      },
      set(val) {
        this.$store.commit("price/update_errorMsg", val);
      },
    },
    snackbarError: {
      get() {
        return this.$store.state.price.snackbarError;
      },
      set(val) {
        this.$store.commit("price/update_snackbarError", val);
      },
    },
    snackbarSuccess: {
      get() {
        return this.$store.state.price.snackbarSuccess;
      },
      set(val) {
        this.$store.commit("price/update_snackbarSuccess", val);
      },
    },
    selectedPriceHeader: {
      get() {
        return this.$store.state.price.selectedPriceHeader;
      },
      set(val) {
        this.$store.commit("price/update_selectedPriceHeader", val);
        this.$store.dispatch("price/searchpricetest");
      },
    },

    successMsg: {
      get() {
        return this.$store.state.price.successMsg;
      },
      set(val) {
        this.$store.commit("price/update_successMsg", val);
      },
    },
    priceTestList: {
      get() {
        return this.$store.state.price.priceTestList;
      },
      set(val) {
        this.$store.commit("price/update_priceTestList", val);
      },
    },
    priceTestPageTotal: {
      get() {
        return this.$store.state.price.priceTestPageTotal;
      },
      set(val) {
        this.$store.commit("price/update_priceTestPageTotal", val);
      },
    },
    priceTestPage: {
      get() {
        return this.$store.state.price.priceTestPage;
      },
      set(val) {
        this.$store.commit("price/update_priceTestPage", val);
        this.$store.dispatch("price/searchpricetest");
      },
    },
  },
  watch: {
    search_company(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.patient.update_autocomplete_status == 1) return;
      this.thr_search_company();
    },
    search_doctor(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.patient.update_autocomplete_status == 1) return;
      this.thr_search_doctor();
    },
    search_test(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.patient.update_autocomplete_status == 1) return;
      this.thr_search_test();
    },
  },
  data() {
    return {
      selected_delivery: {},
      search_company: "",
      search_test: "",
      menufilterdatestart: false,
      menufilterdateend: false,
      date: new Date().toISOString().substr(0, 10),
      items: [],
      menustartdate: false,
      menuenddate: false,
      errors: [],
      sheet: false,
      indeterminatex: false,
      checkednotall: false,
      bar_chx_all: false,
      selected_barcode: [],
      dialogtimeline: false,
      search_doctor: "",
      rules: {
        min: (v) => v > 0 || "Minimum value 1",
        maxPersen: (v) => v <= 100 || "Maximum value 100",
      },
      headers: [
        {
          text: "PASIEN",
          align: "center",
          sortable: false,
          value: "lab",
          width: "35%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "SAMPLE",
          align: "center",
          sortable: false,
          value: "lab",
          width: "65%",
          class: "pa-2 blue darken-2 white--text",
        }
      ],
    };
  },
};
</script>
