<template>
  <v-layout row>
    <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>Email Konfigurasi Invoice</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="email" label="Email"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="password" label="Password"></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="server" label="Server"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="emailcc" label="Email CC"></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="sender" label="Pengirim"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2>
              <v-text-field v-model="title" label="Jabatan"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2>
              <v-text-field v-model="titleeng" label="Jabatan (Inggris)"></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="manager" label="Kepala Cabang"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 class="text-md-center" pa-2 d-flex>
              <h4>FORMAT REMINDER H-7</h4>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 pa-2 d-flex>
              <v-textarea filled solo background-color="amber lighten-4" color="orange orange-darken-4" label="Format 1" v-model="format1"
                rows="14"></v-textarea>
            </v-flex>
          </v-layout>

          <v-layout row>
            <v-flex xs12 class="text-md-center" pa-2 d-flex>
              <h4>FORMAT REMINDER HARI H</h4>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 pa-2 d-flex>
              <v-textarea filled solo background-color="amber lighten-4" color="orange orange-darken-4" label="Format 2" v-model="format2"
                rows="14"></v-textarea>
            </v-flex>
          </v-layout>

          <v-layout row>
            <v-flex xs12 class="text-md-center" pa-2 d-flex>
              <h4>FORMAT TAGIHAN</h4>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 pa-2 d-flex>
              <v-textarea filled solo background-color="amber lighten-4" color="orange orange-darken-4" label="Format 3" v-model="format3"
                rows="14"></v-textarea>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="doSave()" color="primary">SIMPAN</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
    <v-flex xs6 ml-1>
      <v-card>
        <v-card-title class="headline grey darken-1 pt-2 pb-2" primary-title style="color:white">
          <h4>Tampilan Email</h4>
        </v-card-title>
        <v-flex xs12 class="text-md-center" pa-2 d-flex>
          <h4>FORMAT REMINDER H-7</h4>
        </v-flex>

        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 pa-2 v-html="format1">

            </v-flex>
          </v-layout>
          <v-divider></v-divider>
          <v-flex xs12 class="text-md-center" pa-2 d-flex>
            <h4>FORMAT REMINDER HARI H</h4>
          </v-flex>
          <v-layout row>
            <v-flex xs12 pa-2 v-html="format2">

            </v-flex>
          </v-layout>
          <v-divider></v-divider>
          <v-flex xs12 class="text-md-center" pa-2 d-flex>
            <h4>FORMAT TAGIHAN</h4>
          </v-flex>
          <v-layout row>
            <v-flex xs12 pa-2 v-html="format3">

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

<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>

<script>
  module.exports = {
    data: () => ({
      color: "success"
    }),
    mounted() {
      this.$store.dispatch("form/getdata")
    },
    computed: {
      sender: {
        get() {
          return this.$store.state.form.sender
        },
        set(val) {
          this.$store.commit("form/update_sender", val)
        }
      },
      manager: {
        get() {
          return this.$store.state.form.manager
        },
        set(val) {
          this.$store.commit("form/update_manager", val)
        }
      },
      server: {
        get() {
          return this.$store.state.form.server
        },
        set(val) {
          this.$store.commit("form/update_server", val)
        }
      },
      email: {
        get() {
          return this.$store.state.form.email
        },
        set(val) {
          this.$store.commit("form/update_email", val)
        }
      },
      password: {
        get() {
          return this.$store.state.form.password
        },
        set(val) {
          this.$store.commit("form/update_password", val)
        }
      },
      title: {
        get() {
          return this.$store.state.form.title
        },
        set(val) {
          this.$store.commit("form/update_title", val)
        }
      },
      titleeng: {
        get() {
          return this.$store.state.form.titleeng
        },
        set(val) {
          this.$store.commit("form/update_titleeng", val)
        }
      },
      emailcc: {
        get() {
          return this.$store.state.form.emailcc
        },
        set(val) {
          this.$store.commit("form/update_emailcc", val)
        }
      },
      format1: {
        get() {
          return this.$store.state.form.format1
        },
        set(val) {
          this.$store.commit("form/update_format1", val)
        }
      },

      format2: {
        get() {
          return this.$store.state.form.format2
        },
        set(val) {
          this.$store.commit("form/update_format2", val)
        }
      },
      format3: {
        get() {
          return this.$store.state.form.format3
        },
        set(val) {
          this.$store.commit("form/update_format3", 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: {
      doSave() {
        var prm = {
          ConfOnHoldFinanceMgrReport: this.manager,
          ConfOnHoldSenderName: this.sender,
          ConfOnHoldServer: this.server,
          ConfOnHoldSenderEmail: this.email,
          ConfOnHoldSenderPassword: this.password,
          ConfOnHoldSenderTitle: this.title,
          ConfOnHoldSenderTitleEng: this.titleeng,
          ConfOnHoldCc: this.emailcc,
          ConfOnHoldTemplateHtml: this.format1,
          ConfOnHoldTemplateHtml02: this.format2,
          ConfOnHoldTemplateHtml03: this.format3,
          ConfOnHoldID: this.$store.state.form.xid
        }
        this.$store.dispatch("form/save", prm)
      }
    }
  }
</script>