<template>
  <v-layout>

    <v-flex xs12>
      <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
        <v-toolbar color="blue lighten-3" dark height="50px">
          <v-toolbar-title>DAFTAR MENU APPROVE</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>

        <div v-for="(vs, index) in approvelist">

          <v-layout pa-2 v-if="isSelected(vs)" row>
            <v-flex xs12 @click="selectMe(vs)">
              <v-layout row>
                <v-flex class="boxsolid" xs12>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="subname(vs.menuname)" v-on="on"></span>
                    </template>
                    <span>{{ vs.name }}</span>
                  </v-tooltip>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>



          <v-layout pa-2 v-if="!isSelected(vs)" row>
            <v-flex xs12 @click="selectMe(vs)">
              <v-layout row>
                <v-flex class="boxoutline" xs12>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="subname(vs.menuname)" v-on="on"></span>
                    </template>
                    <span>{{ vs.name }}</span>
                  </v-tooltip>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
          <v-divider></v-divider>
        </div>

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

<style scoped>
.textinput {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
  border: 1px solid #607d8b;

}

.textinput:focus {
  width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
  color: transparent;
}

.textinput:focus::-moz-placeholder {
  color: transparent;
}

.textinput:-moz-placeholder {
  color: transparent;
}

.boxoutline {
  color: red;
  border: 1px solid red;
  justify-content: center;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px
}

.boxoutline:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  font-size: 15px;
  font-weight: 700;
}

.boxsolid {
  color: #ffffff;
  border: 1px solid #ffffff;
  justify-content: center;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
  background: #f44336;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px
}

.boxsolid:hover {
  background: #f44336de;
  font-size: 15px;
  font-weight: 700;
}

.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: () => ({

  }),
  mounted() {
    this.$store.dispatch("approve/listApprove")
  },
  computed: {
    approvelist() {
      return this.$store.state.approve.approvelist
    }
  },
  methods: {
    isSelected(p) {
      return p.S_MenuID == this.$store.state.approve.selected_menu.S_MenuID
    },
    selectMe(sc) {
      this.$store.commit("approve/update_selected_menu", sc)
      let url = '/' + sc.S_MenuUrl.replace(/^\/+/, '');
       window.open(url, '_blank')

    },
    subname(name) {
      var xname = name
      if (xname.length > 18) {
        xname = xname.substring(0, 18) + '...'
      }
      return xname
    },
  },
  watch: {
  }
}
</script>
