<template>
  <div>
    <v-snackbar
      color="success"
      v-model="snackbarSuccess"
      right="right"
      :timeout="3000"
      top="top"
    >
      {{ successMsg }}
      <v-btn color="white" flat @click="snackbarSuccess = false"> Close </v-btn>
    </v-snackbar>
    <v-snackbar
      color="error"
      v-model="snackbarError"
      right="right"
      :timeout="3000"
      top="top"
    >
      {{ errorMsg }}
      <v-btn color="white" flat @click="snackbarError = false"> Close </v-btn>
    </v-snackbar>
    <v-dialog persistent v-model="dialogAdd" width="50%">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Kirim Hasil
        </v-card-title>

        <v-card-text>
          <v-layout row wrap>
            <v-flex xs12>
              <p class="font-weight-bold mb-2">
                Apakah anda yakin akan mengirim hasil berikut ?
              </p>
            </v-flex>

            <v-flex xs12 v-if="selectedData.length > 0">
              <fieldset>
                <legend class="px-3">
                  {{ selectedData.length }} item terpilih
                </legend>
                <v-layout row wrap class="pa-2">
                  <v-chip
                    v-for="(data, index) in selectedData"
                    :key="index"
                    class="mr-2"
                    >{{ data.orderNumber }}</v-chip
                  >
                </v-layout>
              </fieldset>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="error"
            :disabled="loading"
            flat
            @click="dialogAdd = false"
          >
            Batal
          </v-btn>
          <v-btn color="primary" :disabled="loading" flat @click="saveData()">
            Simpan
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-layout column>
      <v-layout align-center column>
        <v-toolbar dark color="primary">
          <v-toolbar-title class="white--text">KIRIM HASIL</v-toolbar-title>
          <v-spacer></v-spacer>

          <!-- <v-btn @click="print()" icon>
            <v-icon>print</v-icon>
          </v-btn> -->

          <!-- <v-btn
            v-if="!isAdd && !isObjectEmpty(selectedEmail)"
            @click="searchForAdd()"
            color="warning"
            >Tambahkan</v-btn
          > -->
          <v-btn
            v-if="this.selectedData.length > 0"
            @click="openDialogSave()"
            color="warning"
            >Simpan</v-btn
          >
        </v-toolbar>
        <v-card style="width: 100%;" class="mb-2 pa-2">
          <v-layout row wrap>
            <v-flex xs3 class="mb-2">
              <v-autocomplete
                v-model="selectedSetup"
                :loading="loading"
                :items="setupList"
                item-text="Mgm_McuLabel"
                outline
                class="mini-select mr-2"
                hide-details
                return-object
                label="Proyek MCU"
              >
                <!-- <template v-slot:selection="data">
                  <p>
                    {{ data.item.Mgm_McuNumber }} - {{ data.item.Mgm_McuLabel }}
                  </p>

               
                </template> -->
                <template slot="item" slot-scope="{ item }">
                  <template>
                    <v-list-tile-content>
                      <v-list-tile-title
                        >{{ item.Mgm_McuNumber }} -
                        {{ item.Mgm_McuLabel }}</v-list-tile-title
                      >
                      <v-list-tile-sub-title>
                        {{ item.Mgm_McuStartDate }}/
                        {{ item.Mgm_McuEndDate }}</v-list-tile-sub-title
                      >
                    </v-list-tile-content>
                  </template>
                </template></v-autocomplete
              >
            </v-flex>
            <v-flex xs2>
              <v-menu
                v-model="menuFormDateStart"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    class="mr-2"
                    v-model="formatedStartDateDetail"
                    label="Tanggal Awal"
                    outline
                    hide-details
                    readonly
                    v-on="on"
                    @blur="deFormatedDate(formatedStartDateDetail)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="startDateDetailForm"
                  no-title
                  @input="menuFormDateStart = false"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex xs2>
              <v-menu
                v-model="menuFormDateEnd"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    class="mr-2"
                    v-model="formatedEndDateDetail"
                    label="Tanggal Akhir"
                    outline
                    readonly
                    hide-details
                    v-on="on"
                    @blur="deFormatedDate(formatedEndDateDetail)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="endDateDetailForm"
                  no-title
                  @input="menuFormDateEnd = false"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex xs3>
              <v-text-field
                class="mr-2"
                hide-details
                label="cari"
                v-model="search"
                outline
              ></v-text-field>
            </v-flex>
            <v-flex xs2>
              <!-- <v-btn @click="addNew" v-if="!isAdd">
                <v-icon>add_box</v-icon>
              </v-btn> -->

              <!-- <div>
                <v-btn v-if="!isAdd" @click="searchForAdd()" color="success"
                  >Tambahkan Hasil</v-btn
                >
              </div> -->
              <v-select
                v-if="isAdd"
                :items="statusDetail"
                label="Status"
                class="mini-select"
                item-text="text"
                item-value="value"
                v-model="selectedStatusDetail"
                hide-details
                outline
              ></v-select>
            </v-flex>
            <v-flex xs12 v-if="selectedData.length > 0">
              <fieldset>
                <legend class="px-3">
                  {{ selectedData.length }} item terpilih
                </legend>
                <v-layout row wrap class="pa-2">
                  <v-chip
                    v-for="(data, index) in selectedData"
                    @input="changeCheckBox(data)"
                    :disabled="loading"
                    :key="index"
                    class="mr-2"
                    close
                    >{{ data.orderNumber }}</v-chip
                  >
                </v-layout>
              </fieldset>
            </v-flex>
          </v-layout>
        </v-card>
      </v-layout>
      <v-card>
        <div class="pa-2">
          <span class="light-green--text font-weight-bold"
            >Dikirim : {{ totalEmail }}</span
          >
          |
          <span class="blue-grey--text text--lighten-1 font-weight-bold"
            >Belum Dikirim :{{ totalNotEmail }}</span
          >
          |
          <span class="red--text text--lighten-1 font-weight-bold"
            >Error :{{ totalError }}</span
          >
          |
          <span class="orange--text font-weight-bold"
            >Total : {{ totalData }}</span
          >
        </div>
        <div style="overflow-y: scroll; height: 65vh;" class="fill-height">
          <v-data-table
            :headers="headers"
            :items="orderList"
            :loading="loading"
            hide-actions
            class="elevation-1"
          >
            <template v-slot:headers="props">
              <tr>
                <th class="blue darken-2 white--text">
                  <v-checkbox
                    :disabled="loading"
                    :input-value="headerCheckboxValueAll()"
                    :indeterminate="headerCheckboxValuePartial()"
                    primary
                    hide-details
                    @click.stop="toggleAll"
                  ></v-checkbox>
                </th>
                <th
                  v-for="header in props.headers"
                  :key="header.text"
                  :class="header.class"
                  :width="header.width"
                >
                  {{ header.text }}
                </th>
              </tr>
            </template>
            <v-progress-linear
              v-slot:progress
              color="blue"
              indeterminate
            ></v-progress-linear>
            <template v-slot:items="props">
              <td class="text-xs-center">
                <div class="text-xs-center">
                  <v-checkbox
                    :disabled="loading"
                    @change="changeCheckBox(props.item)"
                    :input-value="checkBoxValue(props.item)"
                    hide-details
                    v-if="
                      (validateEmail(props.item.patientEmail) &&
                        props.item.status === 'NO') ||
                      (validateEmail(props.item.patientEmail) &&
                        props.item.status === 'E' &&
                        props.item.retry >= 5) ||
                      (validateEmail(props.item.patientEmail) &&
                        props.item.status === 'Y')
                    "
                  ></v-checkbox>
                </div>
              </td>
              <td>{{ props.item.orderNumber }}</td>
              <td class="text-xs-left">{{ props.item.orderDate }}</td>
              <td class="text-xs-left">{{ props.item.patientName }}</td>
              <td class="text-xs-left">{{ props.item.corporateName }}</td>
              <td class="text-xs-left pa-2">
                <v-text-field
                  label="email"
                  hide-details
                  @input="handleChangeEmail(props.item)"
                  v-model="props.item.patientEmail"
                ></v-text-field>
              </td>
              <td class="text-xs-left">
                <v-chip
                  color="green"
                  v-if="props.item.status == 'Y'"
                  text-color="white"
                >
                  <v-avatar class="green darken-4">{{
                    props.item.retry
                  }}</v-avatar>
                  Dikirim
                </v-chip>
                <v-chip
                  color="orange"
                  v-if="props.item.status == 'R'"
                  text-color="white"
                >
                  <v-avatar class="orange darken-4">{{
                    props.item.retry
                  }}</v-avatar>
                  Kirim Ulang
                </v-chip>
                <v-chip
                  color="blue-grey"
                  v-if="props.item.status == 'NO'"
                  text-color="white"
                >
                  <v-avatar class="blue-grey darken-4">{{
                    props.item.retry
                  }}</v-avatar>
                  Belum Dikirim
                </v-chip>
                <v-chip
                  color="blue"
                  v-if="props.item.status == 'N'"
                  text-color="white"
                >
                  <v-avatar class="blue darken-4">{{
                    props.item.retry
                  }}</v-avatar>
                  Proses
                </v-chip>
                <v-chip
                  color="red"
                  v-if="props.item.status == 'E'"
                  text-color="white"
                >
                  <v-avatar class="red darken-4">{{
                    props.item.retry
                  }}</v-avatar>
                  Error
                </v-chip>
              </td>
              <td class="text-xs-center">
                <v-btn
                  v-if="
                    validateEmail(props.item.patientEmail) &&
                    props.item.status === 'NO' &&
                    props.item.retry < 5
                  "
                  color="teal"
                  @click="sendEmailPatient(props.item)"
                  class="white--text"
                  >Kirim</v-btn
                >
                <kbd v-if="props.item.status === 'Y'">{{
                  props.item.sentDate
                }}</kbd>
                <v-btn
                  v-if="
                    (validateEmail(props.item.patientEmail) &&
                      props.item.status === 'E' &&
                      props.item.retry >= 5) ||
                    (validateEmail(props.item.patientEmail) &&
                      props.item.status === 'Y')
                  "
                  @click="sendEmailPatient(props.item)"
                  color="teal"
                  class="white--text"
                  >Kirim Ulang</v-btn
                >
              </td>
            </template>
          </v-data-table>
        </div>
      </v-card>
      <v-card class="pa-2">
        <div class="text-xs-left">
          <v-pagination v-model="page" :length="totalPage"></v-pagination>
        </div>
      </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;
  }

  ::-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"),
    //   },
    components: {
      "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    mounted() {
      this.$store.dispatch("email/getsetup");
      this.$store.dispatch("email/getdetail");
    },
    methods: {
      closePrint() {
        this.openprint = false;
      },
      print() {
        let user = one_user();
        var d = new Date();
        var n = d.getTime();
        // https://devcpone.aplikasi.web.id/birt/run?__report=report/one/rekap/rpt_list_email_001.rptdesign&__format=pdf&PID=4&username=joko@gmail.com&tm=1722401933188
        let rptname = "rpt_list_email_001";
        this.urlprint =
          "/birt/run?__report=report/one/rekap/" +
          rptname +
          ".rptdesign&__format=pdf&username=" +
          user.M_StaffName +
          "&PID=" +
          this.selectedEmail.emailID +
          "&tm=" +
          n;
        this.openprint = true;
      },
      deleteData(val) {
        if (this.loading) {
          return;
        }
        let text =
          "Apakah anda yakin menghapus data berikut " +
          val.orderNumber +
          " " +
          val.patientName +
          " ?";
        if (confirm(text)) {
          this.$store.dispatch("email/deleteemaildetail", val.detailID);
        } else {
          return;
        }
      },
      saveData() {
        this.$store.dispatch("email/sendemail");
      },
      sendEmailPatient(val) {
        this.selectedData = [val];
        this.$store.dispatch("email/sendemail");
      },
      isObjectEmpty(objectName) {
        return (
          Object.keys(objectName).length === 0 &&
          objectName.constructor === Object
        );
      },
      openDialogSave() {
        if (this.selectedData.length === 0) {
          alert("Tidak ada hasil yang bisa diserahkan");
          return;
        }
        this.dialogAdd = true;
      },
      toggleAll() {
        let raw = JSON.stringify(this.selectedData);
        let arr = [...JSON.parse(raw)];
        let ckAll = this.headerCheckboxValueAll();
        for (let i = 0; i < this.orderList.length; i++) {
          const element = this.orderList[i];
          let foundItem = arr.find((e) => e.orderID === element.orderID);
          const index = arr.findIndex((e) => e.orderID === element.orderID);
          if (ckAll) {
            arr.splice(index, 1);
          } else {
            if (
              !foundItem &&
              (element.status === "NO" || element.status === "Y") &&
              this.validateEmail(element.patientEmail)
            ) {
              arr.push(element);
            }
          }
        }
        this.selectedData = arr;
      },
      headerCheckboxValueAll() {
        // debugger;
        let ret = 0;
        for (let i = 0; i < this.orderList.length; i++) {
          const element = this.orderList[i];
          let foundItem = this.selectedData.find(
            (e) => e.orderID === element.orderID
          );
          if (foundItem) {
            ret = ret + 1;
          }
        }
        if (ret === this.orderList.length && ret > 0) {
          return true;
        } else {
          return false;
        }
      },
      headerCheckboxValuePartial() {
        let ret = 0;
        for (let i = 0; i < this.orderList.length; i++) {
          const element = this.orderList[i];
          let foundItem = this.selectedData.find(
            (e) => e.orderID === element.orderID
          );
          if (foundItem) {
            ret = ret + 1;
          }
        }
        if (ret != this.orderList.length && ret > 0) {
          return true;
        } else {
          return false;
        }
      },
      changeCheckBox(val) {
        // debugger;
        let raw = JSON.stringify(this.selectedData);
        let arr = [...JSON.parse(raw)];
        if (arr.length == 0) {
          arr.push(val);
        } else {
          let foundItem = arr.find((e) => e.orderID === val.orderID);
          const index = arr.findIndex((e) => e.orderID === val.orderID);
          if (foundItem) {
            arr.splice(index, 1);
          } else {
            arr.push(val);
          }
        }
        this.selectedData = arr;
        console.log(val);
      },
      checkBoxValue(val) {
        let foundItem = this.selectedData.find(
          (e) => e.orderID === val.orderID
        );
        if (foundItem) {
          return true;
        } else {
          return false;
        }
      },
      checkBoxValueFalse(val) {
        let foundItem = this.selectedData.find(
          (e) => e.orderID === val.orderID
        );
        if (foundItem) {
          return false;
        } else {
          return true;
        }
      },
      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")}`;
      },

      searchForAdd() {
        this.selectedStatusDetail = "N";
        this.isAdd = true;
        this.note = this.selectedEmail.emailnote;
        this.receiver = this.selectedEmail.emailReceivedBy;
        this.$store.commit("email/update_detailPage", 1);
        console.log("func search for add");
        this.$store.dispatch("email/getdetail");
      },
      handleChangeEmail(val) {
        // debugger;
        let raw = JSON.stringify(this.selectedData);
        let arr = [...JSON.parse(raw)];

        let foundItem = arr.find((e) => e.orderID === val.orderID);
        if (foundItem) {
          const index = arr.findIndex((e) => e.orderID === val.orderID);
          arr[index].patientEmail = val.patientEmail;
          this.selectedData = arr;
          console.log(val);
        }
      },
      validateEmail(email) {
        return String(email)
          .toLowerCase()
          .match(
            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          );
      },
    },
    computed: {
      totalData() {
        return this.$store.state.email.totalData;
      },
      totalEmail() {
        return this.$store.state.email.totalEmail;
      },
      totalError() {
        return this.$store.state.email.totalError;
      },
      totalNotEmail() {
        return this.$store.state.email.totalNotEmail;
      },
      selectedEmail: {
        get() {
          return this.$store.state.email.selectedEmail;
        },
        set(val) {
          this.$store.commit("email/update_selectedEmail", val);
        },
      },
      note: {
        get() {
          return this.$store.state.email.note;
        },
        set(val) {
          this.$store.commit("email/update_note", val);
        },
      },
      receiver: {
        get() {
          return this.$store.state.email.receiver;
        },
        set(val) {
          this.$store.commit("email/update_receiver", val);
        },
      },
      dialogAdd: {
        get() {
          return this.$store.state.email.dialogAdd;
        },
        set(val) {
          this.$store.commit("email/update_dialogAdd", val);
        },
      },
      selectedData: {
        get() {
          return this.$store.state.email.selectedData;
        },
        set(val) {
          this.$store.commit("email/update_selectedData", val);
        },
      },
      isAdd: {
        get() {
          return this.$store.state.email.isAdd;
        },
        set(val) {
          this.$store.commit("email/update_isAdd", val);
        },
      },
      orderList() {
        return this.$store.state.email.orderList;
      },
      totalPage() {
        return this.$store.state.email.totalPage;
      },
      page: {
        get() {
          return this.$store.state.email.page;
        },
        set(val) {
          this.$store.commit("email/update_page", val);
          console.log("func detail page");

          this.$store.dispatch("email/getdetail");
        },
      },
      statusDetail: {
        get() {
          return this.$store.state.email.statusDetail;
        },
        set(val) {
          this.$store.commit("email/update_statusDetail", val);
        },
      },
      selectedStatusDetail: {
        get() {
          return this.$store.state.email.selectedStatusDetail;
        },
        set(val) {
          this.$store.commit("email/update_selectedStatusDetail", val);
          this.page = 1;
          this.$store.dispatch("email/getdetail");
        },
      },
      loading: {
        get() {
          return this.$store.state.email.loading;
        },
        set(val) {
          this.$store.commit("email/update_loading", val);
        },
      },
      setupList: {
        get() {
          return this.$store.state.email.setupList;
        },
        set(val) {
          this.$store.commit("email/update_setupList", val);
        },
      },
      selectedSetup: {
        get() {
          return this.$store.state.email.selectedSetup;
        },
        set(val) {
          this.$store.commit("email/update_selectedSetup", val);
          this.selectedData = [];
          this.page = 1;
          this.$store.dispatch("email/getdetail");
        },
      },
      search: {
        get() {
          return this.$store.state.email.search;
        },
        set(val) {
          this.$store.commit("email/update_search", val);
          this.page = 1;
          console.log("func search detail");

          this.$store.dispatch("email/getdetail");
        },
      },
      errorMsg: {
        get() {
          return this.$store.state.email.errorMsg;
        },
        set(val) {
          this.$store.commit("email/update_errorMsg", val);
        },
      },
      snackbarError: {
        get() {
          return this.$store.state.email.snackbarError;
        },
        set(val) {
          this.$store.commit("email/update_snackbarError", val);
        },
      },
      snackbarSuccess: {
        get() {
          return this.$store.state.email.snackbarSuccess;
        },
        set(val) {
          this.$store.commit("email/update_snackbarSuccess", val);
        },
      },
      successMsg: {
        get() {
          return this.$store.state.email.successMsg;
        },
        set(val) {
          this.$store.commit("email/update_successMsg", val);
        },
      },

      startDateDetailForm: {
        get() {
          return this.$store.state.email.startDate;
        },
        set(val) {
          this.$store.commit("email/update_startDate", val);
          this.page = 1;
          console.log("func start date");

          this.$store.dispatch("email/getdetail");
        },
      },
      endDateDetailForm: {
        get() {
          return this.$store.state.email.endDate;
        },
        set(val) {
          this.$store.commit("email/update_endDate", val);
          this.page = 1;
          console.log("func end date");

          this.$store.dispatch("email/getdetail");
        },
      },

      formatedStartDateDetail() {
        return this.formatDate(this.startDateDetailForm);
      },
      formatedEndDateDetail() {
        return this.formatDate(this.endDateDetailForm);
      },
    },
    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();
      // },
      searchemailHeaderCopy(val, old) {
        if (val == old) return;
        if (!val) return;
        if (val.length < 1) return;
        this.thrsearchphautocomplete();
      },
    },
    data() {
      return {
        printtitle: "",
        printwidth: "80%",
        openprint: false,
        urlprint: "",
        searchemailHeaderCopy: "",
        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: "20%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "CORPORATE",
            align: "center",
            sortable: false,
            value: "name",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "EMAIL",
            align: "center",
            sortable: false,
            value: "name",
            width: "10%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "STATUS",
            align: "center",
            sortable: false,
            value: "name",
            width: "10%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "AKSI",
            align: "center",
            sortable: false,
            value: "name",
            width: "10%",
            class: "pa-2 blue darken-2 white--text",
          },
        ],
      };
    },
  };
</script>
