<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="flexcwr bottom10">
        <div></div>
        <div>
          <el-button
            @click="creatNotification"
            icon="el-icon-plus"
            type="primary">
            Create Notification
          </el-button>
        </div>
      </div>
    </div>
    <el-table
      :data="table.list"
      v-loading="table.loading"
      fit>
      <el-table-column
        align="center"
        label="Notificaiton ID"
        min-width="180">
        <template v-slot="{row}">
          <span
            class="link-type"
            @click="viewNotification(row)">
            {{ row.notificationId }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="Notification Title"
        prop="title"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Notification Message"
        prop="message"
        min-width="280">
        <template v-slot="{row}">
          <div class="message" :title="row.message">
            {{ row.message }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="Time Sent"
        prop="createdOn"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Target"
        min-width="100">
        <template v-slot="{row}">
          <div class="flexcc">
            <img
              class="img-platform"
              v-for="item in row.targets"
              :key="item"
              :src='"../../assets/plat-" + item + ".png"'/>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="Status"
        prop="status"
        min-width="100"/>
      <el-table-column
        label="Action"
        align="center"
        min-width="100">
          <template slot-scope="{row}">
            <TableAction
              :showDel="false"
              :showView="true"
              :showEdit="false"
              @view="viewNotification(row)"/>
          </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <Pagination
        v-show="table.total > 0"
        :total="table.total"
        :page.sync="table.pageNo"
        :limit.sync="table.pageSize"
        @pagination="handlePageChange" />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import TableAction from '@/components/TableAction.vue'
import api from '../../http/api/notification'
export default {
  data() {
    return {
      table: {
        list: [],
        total: 0,
        pageNo: 1,
        pageSize: 10,
        loading: false
      }
    }
  },
  components: { Pagination, TableAction },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.table.loading = true;
      api.notificaitonPages({
        pageNo: this.table.pageNo,
        pageSize: this.table.pageSize,
        pageVo: {criteria: ""}
      }).then(res => {
        if (res.data) {
          this.table.list = res.data
          this.table.total = res.total
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      }).finally(() => {
        this.table.loading = false;
      })
    },
    creatNotification() {
      this.$router.push({path: '/notification-management/in-app-notification/add'})
    },
    viewNotification(row) {
      this.$router.push({path: '/notification-management/in-app-notification/' + row.notificationId})
    },
    handlePageChange() {
      this.getTableData();
    }
  }
}
</script>

<style scoped>
  .bottom10 {
    padding-bottom: 10px;
  }
  .img-platform {
    width: 28px;
    height: 28px;
    margin: 0 5px;
  }
  .message {
    display: block;
    overflow: hidden;
    max-height: 50px;
    text-align: center;
    text-overflow: ellipsis;
  }
</style>