<template>
  <v-layout>
    <v-dialog
      v-model="dialogNotification"
      max-width="50vw"
    >

    <v-card>
        <v-toolbar color="pink" dark>
        <v-toolbar-title>Task List Notification</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-icon>notifications</v-icon>
        </v-toolbar>
        <v-list two-line>
        <template v-for="(item, index) in notification_list">
            <v-list-tile :key="index" avatar ripple @click="updateNotification(item)">
            <v-list-tile-content>
                <v-list-tile-title>{{ item.NotificationType }}</v-list-tile-title>
                <!-- <v-list-tile-sub-title class="text--primary">{{ item.headline }}</v-list-tile-sub-title> -->
                <v-list-tile-sub-title v-html="item.NotificationDescription"
                  :style="{
                        whiteSpace: 'normal',
                        wordBreak: 'break-word',
                        display: '-webkit-box',
                        WebkitLineClamp: 3,
                        WebkitBoxOrient: 'vertical',
                        overflow: 'hidden'
                    }"></v-list-tile-sub-title>
            </v-list-tile-content>
            <v-list-tile-action>
                <v-list-tile-action-text>{{ item.time_ago }}</v-list-tile-action-text>
                <!-- <v-icon color="grey lighten-1">star_border</v-icon> -->
            </v-list-tile-action>
            </v-list-tile>
            <v-divider v-if="index + 1 < notification_list.length" :key="`divider-${index}`"></v-divider>
        </template>
        </v-list>
    </v-card>

    </v-dialog>
  </v-layout>
</template>

<style scoped>
.wrap-text {
  white-space: normal !important;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* jumlah baris maksimum */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bread-crumb {
  margin-left: 20px;
  font-weight: normal !important;
}
.v-badge__badge {
  top: 0px;
  right: 0px;
}
#topbar{
  background-color: #F2E5D3;
}
</style>
<script>
module.exports = {
  components: {

  },

  data: function () {
    return {

    };
  },
  mounted() {
    this.$store.dispatch("system/getlistnotif")
  },
  computed: {
    notification_list() {
      return this.$store.state.system.notification_list;
    },
    dialogNotification: {
        get() {
            return this.$store.state.system.dialogNotification
        },
        set(val) {
            this.$store.commit("system/update_dialogNotification",val)
        }
    },
  },
  methods: {
    updateNotification(item) {
        let prm = {
            notif_id: item.NotificationID,
            url: item.NotificationUrl,
            type: item.NotificationType,
            approve_level_id: item.NotificationDetailM_ApproveLevelID
        }
        this.$store.dispatch("system/readnotif", prm);
    }
  },
  watch: {

  },
};
</script>
