<template>
  <div>
    <v-container fluid>
      <v-row style="margin-bottom: -20px ">
        <v-col cols="4">
          <v-autocomplete
            v-model="selected"
            item-value="id"
            item-text="name"
            label="Wybierz sprint"
            :items="sprintList"
            filled
            dense
            attach
            chips
            multiple
            solo
            rounded
            clearable
          >
            <template v-slot:append-outer>
              <v-btn icon :medium="true">
                <v-icon>fas fa-sync</v-icon>
              </v-btn>
            </template>
          </v-autocomplete>
        </v-col>
        <v-col cols="6">
          <div style="position: relative; height:0.1rem; width:60vw;">
            <canvas id="myChart"></canvas>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="2">
          <v-card color="grey" class="white--text" elevation="5" height="90">
            <v-card-title primary title class="justify-center">
              <div>
                <h2 class="title font-weight-light text-sm-center">
                  Cel sprintu
                  <br />
                  {{sprintReport["spPlanned"]}} SP
                </h2>
              </div>
            </v-card-title>
          </v-card>
        </v-col>
        <v-col cols="2">
          <v-card
            :color="sprintColor"
            class="white--text"
            elevation="5"
            height="90"
            v-on:click="changeResult"
          >
            <v-card-title
              primary
              title
              class="justify-center"
              style="line-height:60px; height:60px;"
            >
              <div>
                <v-layout row>
                  <h2 class="title font-weight-light text-sm-center">
                    Zrealizowane
                    <br />
                    {{sprintReport["spDelivered"]}} SP
                  </h2>
                </v-layout>
              </div>
            </v-card-title>
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <costBox
            name="Projektowe"
            color="#009c08"
            :storyPoints="sprintReport['groupedCosts']['Projektowe']"
          ></costBox>
          <costBox
            name="Rozwój"
            color="#ffe100"
            :storyPoints="sprintReport['groupedCosts']['Rozwój']"
          ></costBox>
          <costBox
            name="Rozwój techniczny"
            color="black"
            :storyPoints="sprintReport['groupedCosts']['Rozwój techniczny']"
          ></costBox>
          <costBox
            name="Maintenance"
            color="#e63737"
            :storyPoints="sprintReport['groupedCosts']['Maintenance']"
          ></costBox>
          <costBox
            name="Organizacyjne"
            color="#919191"
            :storyPoints="sprintReport['groupedCosts']['Organizacyjne']"
          ></costBox>
          <costBox
            name="Sprzedaż"
            color="#266afc"
            :storyPoints="sprintReport['groupedCosts']['Sprzedaż']"
          ></costBox>
        </v-col>
      </v-row>
      <v-row style="margin-top: -15px">
        <v-col cols="4">
          <v-dialog v-model="dialog_details" width="500">
            <template v-slot:activator="{ on }">
              <v-btn
                large
                color="primary"
                class="mt-2"
                :disabled="pieChart == null"
                dark
                v-on="on"
              >Szczegóły</v-btn>
            </template>
            <v-card class="mx-auto">
              <v-card-text>
                <p class="title font-weight-bold">Zakończone</p>
                <li v-for="(value,name) in sprintReport['sprintDetails']">
                  <a v-bind:href="'http://jira.contman.local/browse/' + name">{{name}}</a>
                  : {{ value }}
                </li>
                <br />
                <p class="title font-weight-bold">Dodatkowe</p>
                <li v-for="(value,name) in sprintReport['tasksAdded']">
                  <a v-bind:href="'http://jira.contman.local/browse/' + name">{{name}}</a>
                </li>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" text @click="dialog_details = false">Zamknij</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <taskManagement v-bind:report="this.datamodelForRecalculate"></taskManagement>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>