<template>
  <v-layout row justify-center>
    <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
      {{ msgsnackbar }}
      <v-btn flat @click="updateAlert_success(false)">
        Tutup
      </v-btn>
    </v-snackbar>
    <v-flex xs6 mr-1>
      <v-card>
        <v-card-title class="headline grey darken-1 pt-2 pb-2" primary-title style="color:white">
          <h4>Update Konfigurasi Qontak WA API</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <p>Last Updated : {{ lastUpdated }}</p>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="tokenQontak" label="Token"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="waIntegrationID" label="WA Integration ID"></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="templateID" label="Template ID" disabled></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2>
              <v-text-field v-model="templateName" label="Template Name" disabled></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="doUpdate()" color="primary">Update</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
module.exports = {
  data: () => ({
    color: "success"
  }),
  mounted() {
    this.$store.dispatch("form/getlatestdata")
  },
  computed: {
    waIntegrationID: {
      get() {
        return this.$store.state.form.waIntegrationID
      },
      set(val) {
        this.$store.commit("form/update_waIntegrationID", val)
      }
    },
    tokenQontak: {
      get() {
        return this.$store.state.form.tokenQontak
      },
      set(val) {
        this.$store.commit("form/update_tokenQontak", val)
      }
    },
    templateName: {
      get() {
        return this.$store.state.form.templateName
      },
      set(val) {
        this.$store.commit("form/update_templateName", val)
      }
    },
    templateID: {
      get() {
        return this.$store.state.form.templateID
      },
      set(val) {
        this.$store.commit("form/update_templateID", val)
      }
    },
    lastUpdated: {
      get() {
        return this.$store.state.form.lastUpdated
      },
      set(val) {
        this.$store.commit("form/update_lastUpdated", val)
      }
    },
    snackbar: {
      get() {
        return this.$store.state.form.alert_success
      },
      set(val) {
        this.$store.commit("form/update_alert_success", val)
      }
    },
    msgsnackbar() {
      return this.$store.state.form.msg_success
    },
  },
  methods: {
    doUpdate() {
      var prm = {
        newApiToken: this.tokenQontak,
        newWaIntegrationID: this.waIntegrationID,
        configID: this.$store.state.form.xid
      }
      this.$store.dispatch("form/update", prm)
    }
  }
}
</script>

<style scoped>
.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;
}

/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
