<template>
  <div class="row my-2 justify-content-center">
    <v-data-table
      hide-actions
      :headers="headers"
      :items="submissions"
      item-key="type"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.type_name }}</td>
        <td class="text-xs-right">{{ props.item.score }}</td>
        <td class="text-xs-right">{{ props.item.full_score }}</td>
        <td class="text-xs-right"><v-btn :to="`submission/${props.item.type_id}`" color="orange lighten-2">View</v-btn></td>
      </template>
    </v-data-table>
    <v-alert color="info" value="true">
      You reached <b>{{ sumScore }}</b> of <b>{{ sumFullScore }}</b> possible points ( {{ pointRatio }}% ).
    </v-alert>
  </div>
</template>


<script>
  export default {
    name: 'submission-list',
    data () {
      return {
        headers: [
          {
            text: 'Task',
            align: 'left',
            value: 'type'
          },
          {
            text: 'Score',
            value: 'score'
          },
          {
            text: 'Maximum Score',
            value: 'full_score'
          }
        ],

        fields: [
          { key: 'type', sortable: true },
          { key: 'score', label: 'Score', sortable: true },
          { key: 'full_score', sortable: true }
        ]
      }
    },
    props: ['submissions'],
    computed: {
      sumScore () {
        return this.submissions.map(a => a.score).reduce((a, b) => a + b)
      },
      sumFullScore () {
        return this.submissions.map(a => a.full_score).reduce((a, b) => a + b)
      },
      pointRatio () {
        return ((this.sumScore / this.sumFullScore) * 100).toFixed(2)
      }
    }
  }
</script>