<template>
  <v-layout v-if="xistrend === 'Y'">
    <v-flex xs12>
      <v-card class="mb-2" color="white" style="min-height:100px">
        <v-toolbar class="mb-1" color="blue lighten-3" dark height="50px">
          <v-toolbar-title>TREND ANALYS : {{xautoverificationlists.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-form ref="formtrendanalys" v-model="valid" lazy-validation>
        <v-layout>
          <v-flex xs12 pa-1>
            <v-text-field v-model="ta_mincount" label="Minimum Count*" :rules="ta_mincountRules" required></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12 pa-1>
            <v-text-field v-model="ta_trendislow" label="Low*"  :rules="ta_trendislowRules" required></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12 pa-1>
            <v-text-field v-model="ta_trendishigh" label="High*" :rules="ta_trendishighRules" required></v-text-field>
          </v-flex>
        </v-layout>
        </v-form>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="saveFormTrendAnalys()">Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      validtest: false,
      valid: false,
      search: "",
      ta_mincountRules: [
                    v => !!v || 'Minimum count harus diisi'
                ],
      ta_trendishighRules: [
                    v => !!v || 'High harus diisi'
                ],
      ta_trendislowRules: [
                    v => !!v || 'Low harus diisi'
                ],
      dialogdeletealerttest: false,
      xid: 0,
      msgalerttest: ""
    }),
    computed: {
      xistrend() {
        return this.$store.state.trendanalys.istrend
      },
      vtrendanalyss() {
        return this.$store.state.trendanalys.trendanalyss
      },
      ta_mincount: {
        get() {
          return this.$store.state.trendanalys.minimumtest
        },
        set(val) {
          this.$store.commit("trendanalys/update_minimumtest", val)
        }
      },
      ta_trendislow: {
        get() {
          return this.$store.state.trendanalys.islow
        },
        set(val) {
          this.$store.commit("trendanalys/update_islow", val)
        }
      },
      ta_trendishigh: {
        get() {
          return this.$store.state.trendanalys.ishigh
        },
        set(val) {
          this.$store.commit("trendanalys/update_ishigh", val)
        }
      },
      dialogtrendanalys() {
        return this.$store.state.trendanalys.dialog_form_trend_analys
      },
      xautoverificationlists() {
        return this.$store.state.autoverificationlist.selected_autoverificationlist
      },
      xtests() {
        return this.$store.state.trendanalys.tests
      },
      is_loading() {
        return this.$store.state.trendanalys.search_status == 1
      }
    },
    methods: {
      updateDialogFormTrendAnalys() {
        this.$store.commit("trendanalys/update_dialog_form_trend_analys", false)
      },
      openFormTrendAnalys() {
        this.$store.commit("trendanalys/update_selected_test", {})
        this.$refs.formtrendanalys.reset()
        this.$refs.formtrendanalys.resetValidation()
        this.$store.commit("trendanalys/update_dialog_form_trend_analys", true)
      },
      saveFormTrendAnalys() {
        if (this.$refs.formtrendanalys.validate()) {
        this.$store.dispatch("trendanalys/save", {
          Nat_TrendAnalysisNat_TestID: this.$store.state.autoverificationlist.selected_autoverificationlist.id,
          Nat_TestName: this.$store.state.autoverificationlist.selected_autoverificationlist.name,
          Nat_TrendAnalysisMinCount: this.ta_mincount,
          Nat_TrendAnalysisLow: this.ta_trendislow,
          Nat_TrendAnalysisHigh: this.ta_trendishigh,
          search: this.$store.state.autoverificationlist.xsearch
        })
        }
      },
      updateAlert_success(val) {
        this.$store.commit("autoverificationlist/update_alert_success", val)
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("trendanalys/search", {
          id: this.$store.state.autoverificationlist.selected_autoverificationlist.id
        })
      }, 2000),
      deleteTest(data) {
        this.xid = data.id
        console.log(this.xid)
        this.$store.commit("trendanalys/update_selected_test", data)
        this.msgalerttest = "Yakin, mau hapus pemeriksaan " + this.xselected_test.name + "dari autoverificationlist " +
          this.xautoverificationlists.name + "  ?"
        this.dialogdeletealerttest = true
      },
      closeDeleteAlertTest() {
        this.$store.dispatch("trendanalys/delete", {
          xid: this.xid,
          autoverificationlistid: this.$store.state.autoverificationlist.selected_autoverificationlist.id,
          autoverificationlistname: this.$store.state.autoverificationlist.selected_autoverificationlist.name,
          testname: this.xselected_test.name
        })
        this.dialogdeletealerttest = false
      }
    },
    watch: {
      search(val, old) {
        console.log(val)
        if (val !== "" && val !== old && val && val.length > 2) {
          this.$store.commit("trendanalys/update_search", val)
          this.thr_search()
        }
      }
    }
  }
</script>