<template>
  <v-layout>
    <!-- Alert dialog -->
    <!-- Alert dialog -->
    <v-dialog v-model="dialogdeletealert" max-width="30%">
      <v-card>
        <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
          Peringatan !
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 d-flex>
              <v-layout row>
                <v-flex pb-1 xs12>
                  <v-layout row>
                    <v-flex pt-2 pr-2 xs12>
                      {{ msgalert }}
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialogdeletealert = false"> Tutup </v-btn>
          <v-btn color="primary" flat @click="deleteRow()"> Yakin lah </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End alert dialog -->

    <v-dialog v-model="dialog_form" width="750">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Form ETL Report
        </v-card-title>
        <v-card-text>
          <v-layout row>
            <v-flex xs12>
              <v-autocomplete label="Report" v-model="selected_report" :items="reports"
                :search-input.sync="search_report" auto-select-first no-filter item-text="codeNameReport" return-object
                :loading="isLoading" no-data-text="Cari Report" :error="errTest != ''" :error-messages="errTest">
                <template slot="item" slot-scope="{ item }">
                  <v-list-tile-content>
                    <v-list-tile-title v-text="item.codeNameReport"></v-list-tile-title>
                  </v-list-tile-content>
                </template>
              </v-autocomplete>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 pr-3>
              <v-flex v-for="(detail, idx) in details" :key="idx">
                <v-flex xs12 v-if="detail.R_InputTypeName == 'date'" pa-2>
                  <v-menu v-model="detail.tmp_date" :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" prepend-icon="event" v-model="detail.fmt_date"
                        :label="detail.R_ReportDetailLabel" hide-details readonly v-on="on"></v-text-field>
                    </template>
                    <v-date-picker v-model="detail.model" no-title @input="detail.tmp_date = false"
                      @change="formatDate(idx, detail.model)"></v-date-picker>
                  </v-menu>
                </v-flex>

                <v-flex xs12 v-if="detail.R_InputTypeName == 'text'" pa-2>
                  <v-text-field class="mr-2" v-model="detail.model" @change="changeDetail(idx, detail.R_InputTypeName)"
                    :label="detail.R_ReportDetailLabel" hide-details></v-text-field>
                </v-flex>

                <v-flex xs12 v-if="detail.R_InputTypeName == 'dropdown'" pa-2>
                  <v-select v-model="detail.model" return-object item-text="name" :items="detail.items"
                    :label="detail.R_ReportDetailLabel" @change="changeDetail(idx, detail.R_InputTypeName)"></v-select>
                </v-flex>

                <v-flex xs12 v-if="detail.R_InputTypeName == 'autocompletion'" pa-2>
                  <v-autocomplete :label="detail.R_ReportDetailLabel" v-model="detail.model"
                    @change="changeDetail(idx, detail.R_InputTypeName)" :items="detail.items" auto-select-first no-filter
                    :search-input.sync="search_autocomplete[idx]" item-text="name" return-object
                    no-data-text="Cari....." small>
                    <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>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>
        <v-alert :value="alertMessage!=''" type="warning">
                {{alertMessage}}
              </v-alert>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" :disabled="loading_save" @click="saveData()">
            Simpan
          </v-btn>
          <v-btn color="primary" flat @click="dialog_form = false"> Tutup </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-flex xs12>
      <v-card class="mb-2" color="white">
        <v-toolbar color="blue lighten-3" dark height="50px">
          <v-toolbar-title>Master ETL Report</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openNewForm()" icon>
            <v-icon>library_add</v-icon>
          </v-btn>
        </v-toolbar>
        <v-layout row style="background: white; padding-top: 5px; padding-left: 2px">
          <v-layout row justify-left>
            <v-flex xs3>
              <v-text-field class="ma-1" label="Cari" placeholder="Cari Report" outline v-model="xsearch"
                hide-details></v-text-field>
            </v-flex>
          </v-layout>
        </v-layout>
        <v-divider></v-divider>
        <v-layout row class="scroll-container" style="max-height: 645px; overflow: auto">
          <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
            <v-data-table :headers="headers" :items="xetl" :loading="isLoading" hide-actions class="elevation-1">
              <template slot="items" slot-scope="props">
                <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                  @click="selectMe(props.item)">
                  {{ props.item.request_date }}
                </td>
                <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                  @click="selectMe(props.item)">
                  {{ props.item.R_ReportName }}
                  <p class="mb-0" style="font-size: medium">
                    [ {{ props.item.R_ReportCode }} ]
                  </p>
                </td>
                <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                  @click="selectMe(props.item)">
                  {{ props.item.param_data }}
                </td>
                <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                  @click="selectMe(props.item)">
                  {{ props.item.compl_date }}
                </td>
                <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                  @click="selectMe(props.item)">
                  <v-btn color="success" dark>{{ props.item.status_etl }}</v-btn>
                </td>
                <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                  @click="selectMe(props.item)">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-icon v-bind="attrs" v-on="on" @click="confirmDelete(props.item)" color="error">delete
                      </v-icon>
                    </template>
                    <span>Hapus</span>
                  </v-tooltip>
                </td>
              </template>
            </v-data-table>
          </v-flex>
        </v-layout>
        <v-divider></v-divider>
        <v-layout>
          <v-flex>
            <v-pagination style="margin-top: 10px; margin-bottom: 10px" v-model="curr_page" :length="xtotal_page">
            </v-pagination>
          </v-flex>
        </v-layout>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped></style>

<script>
module.exports = {
  data() {
    return {
      act: "new",
      xid: null,
      search_autocomplete: [],
      prev_search: [],
      errTest: "",
      errKelaianan: "",
      errOperatorPerbandingan: "",
      errNilaiPembanding: "",
      errMinValue: "",
      errMaxValue: "",
      alertMessage: '',
      operator_perbandingan: [
        { id: "KD", name: "Kurang dari" },
        { id: "LD", name: "Lebih dari" },
        { id: "SD", name: "Sama dengan" },
        { id: "KDSD", name: "Kurang dari sama dengan" },
        { id: "LDSD", name: "Lebih dari sama dengan" },
        { id: "TSD", name: "Tidak sama dengan" },
      ],
      types: [
        { id: "fixvalue", name: "Nilai Pembanding" },
        { id: "range", name: "Range" },
        { id: "nomalvalue", name: "Normal Value" },
      ],
      genders: [
        { id: "A", name: "Semua Jenis Kelamin" },
        { id: "M", name: "Laki-laki" },
        { id: "F", name: "Perempuan" },
      ],
      search_report: "",
      search_item_test: "",
      search_item_dataetl: "",
      xOperatorPerbandingan: "",
      nilaiPerbandingan: "",
      test_error_message: "",
      etl_error_message: "",
      operatorPerbandingan_error_message: "",
      clr: "success",
      xid: "",
      vtestcode: "",
      dialogdeletealert: false,
      msgalert: "",
      headers: [
        {
          text: "REQ. DATE",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "REPORT",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "30%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "PARAMATER",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "COMPL DATE",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "STATUS",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        }
      ],
      headers_param: [
        {
          text: "PARAM",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "70%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "Center",
          sortable: false,
          value: "mr",
          width: "30%",
          class: "pa-2 blue lighten-3 white--text",
        }
      ],
    };
  },
  components: {
      'one-date-picker': httpVueLoader('./oneDatePicker2.vue'),
      'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
    },
  mounted() {
    this.$store.dispatch("etl/search");
    
  },
  computed: {
    max_inclusive: {
      get() {
        return this.$store.state.etl.max_inclusive;
      },
      set(val) {
        this.$store.commit("etl/update_max_inclusive", val);
      },
    },
    details() {
      return this.$store.state.etl.details
    },
    min_inclusive: {
      get() {
        return this.$store.state.etl.min_inclusive;
      },
      set(val) {
        this.$store.commit("etl/update_min_inclusive", val);
      },
    },
    max_value: {
      get() {
        return this.$store.state.etl.max_value;
      },
      set(val) {
        this.$store.commit("etl/update_max_value", val);
      },
    },
    min_value: {
      get() {
        return this.$store.state.etl.min_value;
      },
      set(val) {
        this.$store.commit("etl/update_min_value", val);
      },
    },
    value_pembanding: {
      get() {
        return this.$store.state.etl.value_pembanding;
      },
      set(val) {
        this.$store.commit("etl/update_value_pembanding", val);
      },
    },
    selected_operator_perbandingan: {
      get() {
        return this.$store.state.etl.selected_operator_perbandingan;
      },
      set(val) {
        this.$store.commit("etl/update_selected_operator_perbandingan", val);
      },
    },
    selected_type: {
      get() {
        return this.$store.state.etl.selected_type;
      },
      set(val) {
        this.$store.commit("etl/update_selected_type", val);
      },
    },
    selected_etl: {
      get() {
        return this.$store.state.etl.selected_etl;
      },
      set(val) {
        this.$store.commit("etl/update_selected_etl", val);
      },
    },
    etls: {
      get() {
        return this.$store.state.etl.etls;
      },
      set(val) {
        this.$store.commit("etl/update_etls", val);
      },
    },
    selected_report: {
      get() {
        return this.$store.state.etl.selected_report;
      },
      set(val) {
        this.$store.commit("etl/update_selected_report", val);
        this.$store.dispatch("etl/getparam",{id:val.R_ReportID});
      },
    },
    xsp: {
      get() {
        return this.$store.state.etl.xsp;
      },
      set(val) {
        this.$store.commit("etl/update_xsp", val);
      },
    },
    reports: {
      get() {
        return this.$store.state.etl.reports;
      },
      set(val) {
        this.$store.commit("etl/update_reports", val);
      },
    },
    isEdit() {
      return this.xact === "edit";
    },
    xetl() {
      return this.$store.state.etl.etl;
    },
    isLoading() {
      return this.$store.state.etl.search_status == 1;
    },
    curr_page: {
      get() {
        return this.$store.state.etl.current_page;
      },
      set(val) {
        this.$store.commit("etl/update_current_page", val);
        this.$store.commit("etl/update_last_id", -1);
        this.$store.dispatch("etl/search");
      },
    },
    gender: {
      get() {
        return this.$store.state.etl.gender;
      },
      set(val) {
        this.$store.commit("etl/update_gender", val);
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.etl.total_etl_page;
      },
      set(val) {
        this.$store.commit("etl/update_total_etl_page", val);
      },
    },
    xsearch: {
      get() {
        return this.$store.state.etl.x_search;
      },
      set(val) {
        this.$store.commit("etl/update_x_search", val);
      },
    },
    dialog_form: {
      get() {
        return this.$store.state.etl.dialog_form;
      },
      set(val) {
        this.$store.commit("etl/update_dialog_form", val);
      },
    },
    loading_save: {
      get() {
        return this.$store.state.etl.loading_save;
      },
      set(val) {
        this.$store.commit("etl/update_loading_save", val);
      },
    },
    xact: {
      get() {
        return this.$store.state.etl.act;
      },
      set(val) {
        this.$store.commit("etl/update_act", val);
      },
    },
    xtests() {
      return this.$store.state.etl.tests;
    },
    vtest: {
      get() {
        return this.$store.state.etl.selected_test;
      },
      set(val) {
        this.$store.commit("etl/update_selected_test", val);
      },
    },
    xdataetls() {
      return this.$store.state.etl.dataetls;
    },
    vdataetl: {
      get() {
        return this.$store.state.etl.selected_dataetl;
      },
      set(val) {
        this.$store.commit("etl/update_selected_dataetl", val);
      },
    },
    isNilaiNormal: {
      get() {
        return this.$store.state.etl.selected_isNilaiNormal;
      },
      set(val) {
        this.$store.commit("etl/update_selected_isNilaiNormal", val);
      },
    },
    snackbar: {
      get() {
        return this.$store.state.etl.alert_success;
      },
      set(val) {
        this.$store.commit("etl/update_alert_success", val);
      },
    },
    msgsnackbar() {
      return this.$store.state.etl.msg_success;
    },
    dialog_error: {
      get() {
        return this.$store.state.etl.alert_error;
      },
      set(val) {
        this.$store.commit("etl/update_alert_error", val);
      },
    },
    msgError() {
      return this.$store.state.etl.error_message;
    },
    message_existing: {
      get() {
        return this.$store.state.etl.message_existing;
      },
      set(val) {
        this.$store.commit("etl/update_message_existing", val);
      },
    },
  },
  methods: {
    resetForm() {
      this.selected_report = {};
      this.reports = [];
      this.selected_etl = {};
      this.etls = [];
      this.gender = { id: "A", name: "Semua Jenis Kelamin" };
      this.selected_type = { id: "range", name: "Range" };
      this.min_value = "";
      this.max_value = "";
      this.min_inclusive = false;
      this.max_inclusive = false;
      this.value_pembanding = "";
      this.selected_operator_perbandingan = {};
      this.errTest = "";
      this.errKelaianan = "";
      this.errOperatorPerbandingan = "";
      this.errNilaiPembanding = "";
      this.errMinValue = "";
      this.errMaxValue = "";
    },
    openEditForm(data) {
      this.dialog_form = true;
      this.act = "edit";
      this.xid = data.Etl_ReportID;
      this.selectMe(data);
      this.reports = [
        {
          R_ReportID: data.R_ReportID,
          R_ReportCode: data.R_ReportCode,
          codeNameReport: data.codeNameReport,
        },
      ];
      this.selected_report = {
        R_ReportID: data.R_ReportID,
        R_ReportCode: data.R_ReportCode,
        codeNameReport: data.codeNameReport,
      };
      this.etls = [
        {
          Etl_ReportID: data.Etl_ReportID,
          Etl_ReportName: data.Etl_ReportName
        },
      ];
      this.selected_etl = {
        Etl_ReportID: data.Etl_ReportID,
        Etl_ReportName: data.Etl_ReportName
      };
      this.xsp = data.Etl_ReportSourceSp;
    },
    changeDetail(idx, tipe) {
        var arrOrders = this.$store.state.etl.details
        arrOrders[idx].model = arrOrders[idx].model
        this.$store.commit("etl/update_details", arrOrders)
      },
    formatDate(idx, date) {
        var arrOrders = this.$store.state.etl.details
        if (!date) return null
        const [year, month, day] = date.split('-')
        var f_date = `${day}-${month}-${year}`
        arrOrders[idx].fmt_date = f_date
        arrOrders[idx].model = date
        this.$store.commit("etl/update_details", arrOrders)


      },
      formatDatex(idx, 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')}`
      },
    openNewForm() {
      this.act = "new";
      this.resetForm();
      this.dialog_form = true;
    },
    isSelected(p) {
      return (
        p.Etl_ReportID ==
        this.$store.state.etl.selected_etl.Etl_ReportID
      );
    },
    selectMe(selected) {
      this.$store.commit("etl/update_selected_etl", selected);
      this.$store.commit("etl/update_last_id", selected.Etl_ReportID);

      // set value selected test
      this.$store.commit("etl/update_tests", [
        {
          R_ReportID: selected.R_ReportID,
          codeNameReport: selected.codeNameReport,
          R_ReportCode: selected.R_ReportCode,
        },
      ]);
      this.$store.commit("etl/update_selected_test", {
        R_ReportID: selected.R_ReportID,
        codeNameReport: selected.codeNameReport,
        R_ReportCode: selected.R_ReportCode,
      });

      // set value selected etl
      this.$store.commit("etl/update_dataetls", [
        {
          Etl_ReportID: selected.Etl_ReportID,
          Etl_ReportName: selected.Etl_ReportName,
        },
      ]);
      this.$store.commit("etl/update_selected_dataetl", {
        Etl_ReportID: selected.Etl_ReportID,
        Etl_ReportName: selected.Etl_ReportName,
      });
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("etl/search");
    }, 1000),
    thr_search_report: _.debounce(function () {
      this.$store.dispatch("etl/searchreport", this.search_item_test);
    }, 2000),
    thr_search_dataetl: _.debounce(function () {
      this.$store.dispatch("etl/searchetl", this.search_item_dataetl);
    }, 2000),
    testValidation() {
      if (_.isEmpty(this.vtest)) {
        this.test_error_message = "Anda belum memilih pemeriksaan";
      }
      if (this.vtest) {
        this.test_error_message = "";
      }
    },
    etlValidation() {
      if (_.isEmpty(this.vdataetl)) {
        this.etl_error_message = "Anda belum memilih etl";
      }
      if (this.vdataetl) {
        this.etl_error_message = "";
      }
    },
    operatorValidation() {
      if (_.isEmpty(this.xOperatorPerbandingan)) {
        this.operatorPerbandingan_error_message =
          "Anda belum memilih operator perbandingan";
      }
      if (this.xOperatorPerbandingan) {
        this.operatorPerbandingan_error_message = "";
      }
    },
    resetAllInput() {
      this.vtest = "";
      this.vdataetl = "";
      this.xOperatorPerbandingan = "";
      this.isNilaiNormal = true;
      this.nilaiPerbandingan = "";
      this.test_error_message = "";
      this.etl_error_message = "";
      this.operatorPerbandingan_error_message = "";
      this.message_existing = "";
    },
    resetAllError() {
      this.test_error_message = "";
      this.etl_error_message = "";
      this.operatorPerbandingan_error_message = "";
      this.message_existing = "";
    },
    openForm() {
      this.dialog_form = true;
      this.$store.commit("etl/update_act", "add");
      this.$store.commit("etl/update_last_id", -1);
      this.resetAllInput();
    },
    handleSwitchChange() {
      if (this.isNilaiNormal) {
        this.nilaiPerbandingan = "";
      }
    },
    saveAdd() {
      this.testValidation();
      this.etlValidation();
      this.operatorValidation();
      if (
        this.test_error_message === "" &&
        this.operatorPerbandingan_error_message === "" &&
        this.etl_error_message === ""
      ) {
        let prm = {
          testId: this.vtest.R_ReportID,
          testCode: this.vtest.R_ReportCode,
          etlId: this.vdataetl.Etl_ReportID,
          type: this.xOperatorPerbandingan,
          normalValue: this.isNilaiNormal === true ? "Y" : "N",
          value: this.isNilaiNormal === true ? "" : this.nilaiPerbandingan,
        };

        // console.log('cek prm',prm)
        this.$store.dispatch("etl/add", prm);
      }
    },
    openEdit(data) {
      let operator;

      switch (data.Mcu_SummaryLabType) {
        case "<":
          operator = "KD";
          break;
        case ">":
          operator = "LD";
          break;
        case "=":
          operator = "SD";
          break;
        case "<=":
          operator = "KDSD";
          break;
        case ">=":
          operator = "LDSD";
          break;
        case "!=":
          operator = "TSD";
          break;
        default:
          operator = ""; // Atur default jika diperlukan
      }

      this.selectMe(data);
      this.dialog_form = true;
      this.$store.commit("etl/update_act", "edit");
      this.xid = data.Etl_ReportID;
      this.vtest = data.R_ReportID;
      this.vdataetl = data.Etl_ReportID;
      this.xOperatorPerbandingan = operator;
      this.isNilaiNormal = data.Mcu_SummaryLabIsNormalValue === "Y" ? true : false;
      this.nilaiPerbandingan = data.Mcu_SummaryLabValue;
      this.$store.commit("etl/update_last_id", data.Etl_ReportID);
      this.resetAllError();
    },
    saveEdit() {
      this.testValidation();
      this.etlValidation();
      this.operatorValidation();
      if (
        this.test_error_message === "" &&
        this.operatorPerbandingan_error_message === "" &&
        this.etl_error_message === ""
      ) {
        let prm = {
          xid: this.xid,
          type: this.xOperatorPerbandingan,
          normalValue: this.isNilaiNormal === true ? "Y" : "N",
          value: this.isNilaiNormal === true ? "" : this.nilaiPerbandingan,
        };
        this.$store.dispatch("etl/edit", prm);
      }
    },
    confirmDelete(data) {
      this.selectMe(data);
      this.xid = data.Etl_ReportID;
      this.msgalert = "Yakin, mau hapus etl lab " + data.codeNameReport + " ?";

      this.dialogdeletealert = true;
    },
    deleteRow() {
      this.$store.commit("etl/update_last_id", -1);
      let prm = {
        xid: this.xid,
      };
      this.$store.dispatch("etl/deleterow", prm);
      this.dialogdeletealert = false;
    },
    thr_search_report: _.debounce(function () {
      let prm = {
        search: this.search_report,
      };
      this.$store.dispatch("etl/searchreport", prm);
    }, 2000),
    saveData() {
      var arrOrders = this.$store.state.etl.details
      let param = '';
      this.alertMessage = ''
      arrOrders.forEach((value, index) => {
          let modelx = '';
          switch (value.R_InputTypeName) {
            case 'date':
              if (value.model == '') this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
              modelx = value.model;
              break;
            case 'dropdown':
            case 'autocompletion':
              modelx = value.model.id;
              if (!(parseInt(value.model.id) >= 0)) this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
              break;
            default: //
              modelx = value.model;
              if (value.model == '') this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
              break;
          }
          param += '"' + value.R_ReportDetailParam.trim() + '":"' + modelx.replace(' ', '+') + '"'
        });
        if (this.alertMessage != '') return
        var param_all = param
        let prm = {
          report: this.selected_report.R_ReportID,
          param: param_all,
          details: arrOrders
        };

        this.$store.dispatch("etl/newData", prm);
      } 
  },
  watch: {
    search_report(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.etl.search_status == 1) return;
      this.thr_search_report();
    },
    xsearch(val, old) {
      this.xsearch = val;
      this.thr_search();
    },

    search_item_test(val, old) {
      if (val == old) return;
      if (!val) return;

      if (val.length < 1) {
        this.$store.dispatch("etl/searchreport", this.search_item_test);
        return this.thr_search_report();
      }

      if (val.length > 2) {
        this.$store.dispatch("etl/searchreport", this.search_item_test);
        return this.thr_search_report();
      }
    },

    search_item_dataetl(val, old) {
      if (val == old) return;
      if (!val) return;

      if (val.length < 1) {
        //this.$store.dispatch("etl/searchetl", this.search_item_dataetl)
        return this.thr_search_dataetl();
      }

      if (val.length > 2) {
        //this.$store.dispatch("etl/searchetl", this.search_item_dataetl)
        return this.thr_search_dataetl();
      }
    },
    search_autocomplete: {
      deep: true,
      handler: function (new_val, old) {
        let details = this.$store.state.etl.details
        if (new_val == null) return
        for (let idx = 0; idx < new_val.length; idx++) {
          if (!new_val[idx]) continue
          if (new_val[idx] != '') {
            if (new_val[idx] == this.prev_search[idx]) continue
            this.prev_search[idx] = new_val[idx]
            let sp = details[idx].R_ReportDetailSourceSp
            let dep = details[idx].R_ReportDetailDepParam
            let value = ''
            if (dep && dep != '') {
              for (let idx_dep = 0; idx_dep < details.length; idx_dep++) {
                if (dep == details[idx_dep].R_ReportDetailParam) {
                  value = details[idx_dep].model.id
                }
              }
            }
            this.$store.dispatch("etl/listautocomplete", {
              search: new_val[idx],
              sp: sp,
              index: idx,
              dep: dep,
              value
            })
          }
        }
      }
    }
  },
};
</script>
