<template>
  <v-layout>
    <v-flex xs12>
      <v-card class="mb-2" color="white" style="min-height:100px">
        <v-toolbar class="mb-1" color="grey lighten-2" dark height="50px">
          <v-toolbar-title class="black--text">HARI (DALAM SEMINGGU) : {{xpromises.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>

        <v-btn style="min-width:160px;" class="mt-1 mb-2" v-for="(vst,idx) in vscheduledays" :key="vst.id" @click="changeDay(idx)"
          small :color="vst.isavailable === 'N' ? 'yellow' : 'blue'" v-if="vst.paramid !== '0'">{{vst.dayofweekname}}
        </v-btn>

        <template>

          <v-dialog v-model="dialogaddalertday" max-width="30%">
            <v-card>
              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                Konfirmasi
              </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>
                            {{msgalertday}}
                          </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="dialogaddalertday = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeAddAlertDay()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>

        <template>

          <v-dialog v-model="dialogdeletealertday" 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>
                            {{msgalertday}}
                          </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="dialogdeletealertday = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeDeleteAlertDay()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogscheduleday" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Schedule Pemeriksaan</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formscheduleday" v-model="validday" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        SCHEDULE : {{xschedules.name}}
                      </v-flex>
                      <v-flex xs12>
                        <v-autocomplete label="Pemeriksaan" v-model="xselected_day" :items="xdays" :search-input.sync="search" auto-select-first
                          no-filter return-object item-text="name" :loading="is_loading" no-data-text="Pilih Pemeriksaan">
                          <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-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="grey darken-1" flat @click="updateDialogFormScheduleDay()">Tutup</v-btn>
                  <v-btn color="grey darken-1" flat @click="saveFormScheduleDay()">Simpan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-layout>
        </template>

      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      validday: false,
      search: "",
      dialogaddalertday: false,
      dialogdeletealertday: false,
      xid: 0,
      msgalertday: ""
    }),
    computed: {
      vscheduledays() {
        return this.$store.state.scheduleday.scheduledays
      },
      dialogscheduleday() {
        return this.$store.state.scheduleday.dialog_form_schedule_day
      },
      xselected_day: {
        get() {
          return this.$store.state.scheduleday.selected_day
        },
        set(val) {
          this.$store.commit("scheduleday/update_selected_day", val)
        }
      },
      xpromises() {
        return this.$store.state.schedulepromise.selected_promise
      },
      xschedules() {
        return this.$store.state.schedule.selected_schedule
      },
      xdays() {
        return this.$store.state.scheduleday.days
      },
      is_loading() {
        return this.$store.state.scheduleday.search_status == 1
      }
    },
    methods: {
      updateDialogFormScheduleDay() {
        this.$store.commit("scheduleday/update_dialog_form_schedule_day", false)
      },
      openFormScheduleDay() {
        this.$store.commit("scheduleday/update_selected_day", {})
        this.$refs.formscheduleday.reset()
        this.$refs.formscheduleday.resetValidation()
        this.$store.commit("scheduleday/update_dialog_form_schedule_day", true)
      },
      saveFormScheduleDay() {
        if (this.$refs.formscheduleday.validate()) {
          this.$store.dispatch("scheduleday/save", {
            scheduleid: this.$store.state.schedule.selected_schedule.id,
            schedulename: this.$store.state.schedule.selected_schedule.name,
            dayid: this.xselected_day.id,
            dayname: this.xselected_day.name
          })
        }
      },
      updateAlert_success(val) {
        this.$store.commit("schedule/update_alert_success", val)
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("scheduleday/search", {
          id: this.$store.state.schedule.selected_schedule.id
        })
      }, 2000),
      addDay(data) {
        this.xid = data.id
        console.log(this.xid)
        this.$store.commit("scheduleday/update_selected_day", data)
        this.msgalertday = "Yakin, mau tambah hari " + this.xselected_day.dayofweekname + "dari schedule " + this.xpromises
          .name + " ?"
        this.dialogaddalertday = true
      },
      closeAddAlertDay() {
        this.$store.dispatch("scheduleday/save", {
          scheduleid: this.$store.state.schedule.selected_schedule.id,
          schedulename: this.$store.state.schedule.selected_schedule.name,
          dayid: this.xselected_day.dayofweek,
          dayname: this.xselected_day.dayofweekname
        })
        this.dialogaddalertday = false
      },
      deleteDay(data) {
        this.xid = data.id
        console.log(this.xid)
        this.$store.commit("scheduleday/update_selected_day", data)
        this.msgalertday = "Yakin, mau hapus pemeriksaan " + this.xselected_day.dayofweekname + "dari schedule " +
          this.xpromises
          .name + "  ?"
        this.dialogdeletealertday = true
      },
      closeDeleteAlertDay() {
        this.$store.dispatch("scheduleday/delete", {
          xid: this.xid,
          scheduleid: this.$store.state.schedule.selected_schedule.id,
          schedulename: this.$store.state.schedule.selected_schedule.name,
          dayname: this.xselected_day.dayofweekname
        })
        this.dialogdeletealertday = false
      },
      changeDay(idx) {
        var pos = this.vscheduledays;
        if (pos[idx].isavailable == 'Y') {
          pos[idx].isavailable = 'N'
          this.$store.dispatch("scheduleday/delete", {
            scheduleid: this.$store.state.schedule.selected_schedule.id,
            schedulename: this.$store.state.schedule.selected_schedule.name,
            dayid: pos[idx].dayofweek,
            dayname: pos[idx].dayofweekname
          })
        } else {
          pos[idx].isavailable = 'Y'
          this.$store.dispatch("scheduleday/save", {
            scheduleid: this.$store.state.schedule.selected_schedule.id,
            schedulename: this.$store.state.schedule.selected_schedule.name,
            dayid: pos[idx].dayofweek,
            dayname: pos[idx].dayofweekname
          })
        }
        this.$store.dispatch("scheduleday/update_days_only", pos)

      }
    },
    watch: {
      search(val, old) {
        console.log(val)
        if (val !== "" && val !== old && val && val.length > 2) {
          this.$store.commit("scheduleday/update_search", val)
          this.thr_search()
        }
      }
    }
  }
</script>