<template>
  <v-dialog
    v-model="dialog"
    max-width="1200"
    overlay-color="white"
    content-class="rounded-xl"
    scrollable
  >
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on"
             icon
             x-small
             class="ml-1"
             color="accent"
             @click.native.stop.prevent="dialog = true"
      >
        <slot name="icon" v-if="hasIconSlot"></slot>
        <v-icon v-else>mdi-dots-vertical</v-icon>
      </v-btn>
    </template>

    <v-card>
      <v-card-title class="accent white--text pt-10 pb-4 text-h5 pl-9">
        Details Cycle {{ cycle.id }}
      </v-card-title>

      <v-card-text>
        <v-container fluid>

          <v-row>
            <v-col cols="12">
              <div class="text-h5 text--primary">Objective</div>
              <div class="mb-3">{{ cycle.objective }}</div>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="12">
              <div class="text-h5 text--primary">Definition of Done</div>
              <div class="mb-3">{{ cycle.definition }}</div>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="12" md="6">
              <div class="text-h5 text--primary">Sub-Phase</div>
              <div class="mb-3">{{ cycle.phase }}</div>
            </v-col>
            <v-col cols="12" md="6">
              <div class="text-h5 text--primary">Milestone</div>
              <div class="mb-3">{{ cycle.milestone }}</div>
            </v-col>
          </v-row>
          <v-row v-if="cycle.status === 'Done'">
            <v-col cols="12">
              <div class="text-h5 text--primary">Outcome & Test</div>
              <div class="mb-3">{{ cycle.outcome }}</div>
            </v-col>
<!--            <v-col cols="12" md="6">-->
<!--              <div class="text-h5 text&#45;&#45;primary">Test</div>-->
<!--              <div class="mb-3">{{ cycle.test }}</div>-->
<!--            </v-col>-->
          </v-row>
          <v-row v-if="cycle.status === 'Done'">
            <v-col cols="12">
              <div class="text-h5 text--primary">Key findings</div>
              <div class="mb-3">{{ cycle.insight }}</div>
            </v-col>
          </v-row>
          <v-row v-if="cycle.status === 'Done'">
            <v-col cols="12" md="6">
              <div class="text-h5 text--primary">Lenses</div>
              <div class="mb-3">
                <ul>
                  <li v-for="lens in cycle.lens" :key="lens.id" v-text="lens.name"></li>
                </ul>
              </div>
            </v-col>
            <v-col cols="12" md="6">
              <div class="text-h5 text--primary">Success Rates</div>
              <div class="mb-3">
                <ul>
                  <li>Team: {{ cycle['rating_team'] }}</li>
                  <li>Project Manager: {{ cycle['rating_pm'] }}</li>
                </ul>
              </div>
            </v-col>
<!--            <v-col cols="12" md="4">-->
<!--              <div class="text-h5 text&#45;&#45;primary">Fidelity</div>-->
<!--              <div class="mb-3">{{ cycle.fidelity }}</div>-->
<!--            </v-col>-->
          </v-row>
          <v-row v-if="cycle.status === 'Done'">
            <v-col cols="12" md="6">
              <div class="text-h5 text--primary">Phase Deliverables</div>
              <div class="mb-3">
                <ul>
                  <li v-for="elem in cycle.deliverables" :key="elem.id" v-text="elem.name"></li>
                </ul>
              </div>
            </v-col>
            <v-col cols="12" md="6">
              <div class="text-h5 text--primary">Design Methods</div>
              <div class="mb-3">
                <ul>
                  <li v-for="elem in cycle.methods" :key="elem.id" v-text="elem.name"></li>
                </ul>
              </div>
            </v-col>
          </v-row>
          <div v-if="cycle.status === 'Done' && cycle.attachments && cycle.attachments.length > 0">
            <div class="text-h5 text--primary">Uploaded Files</div>
            <ul>
            <li v-for="file in cycle.attachments" :key="file.filename">
              {{ file.description ? file.description : 'Missing description' }} ({{ file.filename }})
              <v-btn small icon class="ml-1" @click="download(file)">
                <v-icon small>mdi-download</v-icon>
              </v-btn>
            </li>
            </ul>
          </div>

        </v-container>

      </v-card-text>

      <v-card-actions class="ma-7">
        <v-spacer></v-spacer>
        <v-btn
          color="primary"
          depressed
          @click="dialog = false"
          width="150"
        >
          Close
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>

export default {
  name: "CycleDetails",
  props: ['cycle'],
  data: () => ({
    dialog: false,
  }),
  methods: {
    download(file) {
      window.open('/api/uploads/' + file.filename, '_blank')
    }
  },
  computed: {
    hasIconSlot() {
      return !!this.$slots.icon
    }
  }
}
</script>

<style scoped>

</style>