<template>
  <div>
    <v-layout class="fill-height" column>
      <v-layout align-center column>
        <v-toolbar dark color="primary">
          <v-toolbar-title class="white--text">
            <kbd class="mr-2">{{ this.selectedPriceHeader.headerName }}</kbd>
            {{ this.selectedPriceHeader.headerName }}</v-toolbar-title
          >
        </v-toolbar>
        <v-card style="width: 100%" class="mb-2 pa-2 searchbox">
          <v-layout row>
            <v-flex xs4 class="mr-1">
              <v-text-field
                label="Kode/nama"
                hide-details
                v-model="filterName"
                outline
              ></v-text-field>
            </v-flex>
            <v-flex xs4 class="mr-1 ml-1">
              <v-autocomplete
                label="Sub Group"
                v-model="selectedFilterSubGroup"
                :items="filterSubGroup"
                item-text="name"
                outline
                hide-details
                return-object
                :loading="loading"
                no-data-text="Pilih Sub Group"
              >
                <template slot="item" slot-scope="{ item }">
                  <v-list-tile-content>
                    <v-list-tile-title v-text="item.name"></v-list-tile-title>
                  </v-list-tile-content>
                </template>
              </v-autocomplete>
            </v-flex>
            <v-flex xs4 class="ml-1">
              <v-autocomplete
                label="Status"
                v-model="selectedFilterStatus"
                :items="filterStatus"
                item-text="name"
                outline
                hide-details
                return-object
                :loading="loading"
                no-data-text="Pilih Status"
              >
                <template slot="item" slot-scope="{ item }">
                  <v-list-tile-content>
                    <v-list-tile-title v-text="item.name"></v-list-tile-title>
                  </v-list-tile-content>
                </template>
              </v-autocomplete>
            </v-flex>
          </v-layout>
        </v-card>
      </v-layout>
      <v-card style="overflow-y: scroll" class="fill-height">
        <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">
                <div style="color: brown" class="mb-0">
                  {{ props.item.status }}
                </div>
              </td>
              <td class="py-2">
                <!-- v-bind:class="{ 'amber lighten-4': isSelected(props.item) }" -->
                <p style="" class="mb-1">
                  <kbd class="mr-2">{{ props.item.testCode }}</kbd>
                  <span class="font-weight-bold">
                    {{ props.item.testName }}
                  </span>
                </p>
              </td>
              <td class="py-2">
                <!-- v-bind:class="{ 'amber lighten-4': isSelected(props.item) }" -->
                <v-text-field
                  label="Amount"
                  type="number"
                  :rules="[rules.min]"
                  v-model="props.item.priceAmount"
                  outline
                ></v-text-field>
              </td>
              <td class="py-2">
                <v-text-field
                  label="Diskon %"
                  type="number"
                  :rules="[rules.min, rules.maxPersen]"
                  v-model="props.item.priceDisc"
                  outline
                ></v-text-field>
              </td>
              <td class="py-2">
                <!-- v-bind:class="{ 'amber lighten-4': isSelected(props.item) }" -->
                <v-text-field
                  label="Diskon Rp"
                  :rules="[rules.min]"
                  type="number"
                  v-model="props.item.priceDiscRp"
                  outline
                ></v-text-field>
              </td>
              <td class="py-2">
                <!-- v-bind:class="{ 'amber lighten-4': isSelected(props.item) }" -->
                <v-text-field
                  label="Total"
                  type="number"
                  :rules="[rules.min]"
                  readonly
                  v-model="props.item.subTotal"
                  outline
                ></v-text-field>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card>
      <v-card class="pa-2">
        <div class="text-xs-left">
          <v-pagination
            v-model="priceTestPage"
            :length="priceTestPageTotal"
          ></v-pagination>
        </div>
      </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)
    this.$store.dispatch("patient/search", {
      startdate: this.$store.state.patient.start_date,
      enddate: this.$store.state.patient.end_date,
      search: this.searchnamelab,
      doctorid: this.$store.state.patient.selected_doctor.id,
      doctorcode: this.$store.state.patient.selected_doctor.code,
      companyid: this.$store.state.patient.selected_company.id,
      testid: this.$store.state.patient.selected_filter_test.id,
      current_page: 1,
      lastidx: -1,
    });
  },
  methods: {
    updateAlert_success(val) {
      this.$store.commit("patient/update_alert_success", val);
    },

    closeDialogQrCode() {
      this.dialogQrCode = false;
    },
    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: "STATUS",
          align: "center",
          sortable: false,
          value: "lab",
          width: "10%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "TEST",
          align: "center",
          sortable: false,
          value: "lab",
          width: "25%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "AMOUNT",
          align: "center",
          sortable: false,
          value: "lab",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "DISKON",
          align: "center",
          sortable: false,
          value: "name",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "DISKON RP",
          align: "center",
          sortable: false,
          value: "name",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "TOTAL",
          align: "center",
          sortable: false,
          value: "status",
          width: "20%",
          class: "pa-2 blue darken-2 white--text",
        },
      ],
    };
  },
};
</script>
