<template>
<div class="height-0100 width-0100">
  <div class="height-0100 display-f position-r">
    <div class="padding-t-60 display-f width-0100">
      <div class="display-f flex-direction-c height-0100 width-0100 margin-t-40">
        <!-- contenido con tablas [docs] -->
        <div class="overflow-a height-0100 bg-color-w-0100">
          <table class="js-table-main display responsive no-wrap stickyThead width-0100 js-datatable-docs">
            <thead class="width-0100 bg-color-thead">
              <tr class="bg-color-thead height-50">
                <th class="width-20 padding-16-im"></th>
                <th class="fablet tablet desktop">Nombre</th>
                <th class="tablet desktop">Tamaño</th>
                <th class="fablet tablet desktop">Modificación</th>
                <th>Opciones</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover-link cursor-p border-b-1 border-solid border-color-b-005 height-50 vertical-align-m bg-color-n" :key="file.path" v-for="file of list">
                <td class="width-20 padding-16-im vertical-align-tb"></td>
                <td class="opacity-050 padding-l-10 ellipsis">
                  <span v-if="file.extension != '' ">
                    <a :href="file.webViewLink">{{file.filename}}.{{file.extension}} </a>
                  </span>
                  <span v-else>
                    <a :href="file.webViewLink">{{file.filename}}</a>
                  </span>
                </td>
                <td class="opacity-050 padding-l-10 ellipsis">
                  <a :href="file.webViewLink">{{convertToMbs(file.size)}} MB</a>
                </td>
                <td class="opacity-050 padding-l-10 ellipsis">
                  <a :href="file.webViewLink">{{ file.modifiedTime | moment('LLLL') }}</a>
                </td>
                <td class="opacity-050 padding-l-10 ellipsis">
                  <button @click="visible =! visible"> : </button>
                  <transition v-if ="visible">
                    <div v-show="visible" class="border-radius-modal sh-modal bg-color-w-0100 position-a zindex-10 right-30 zindex-15 dropdown__content margin-t-3">
                      <nav class="position-r padding-t-16 padding-b-16 padding-r-10 padding-l-10">
                        <ul>
                          <li>
                            <button v-on:click='downloadFile(file)'>Descargar</button>
                          </li>
                          <li>
                            <button v-on:click='deleteFile(file)'>Eliminar</button>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </transition>
                </td>

              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end contenido con tablas [docs] -->
</template>

<script>
import ApiClient from '@/api/ApiClient'
export default {
  data () {
    return {list: [], visible: false}
  },
  created () {
    ApiClient.getClientApi().get('/list')
      .then(response => {
        this.list = response.data
      })
  },
  methods: {
    convertToMbs (bytes) {
      return ((bytes / 1024) / 1024).toFixed(2)
    },
    downloadFile (file) {
      var path = file.path
      var filename = file.filename + '.' + file.extension
      var mimetype = file.mimetype

      ApiClient.getClientApi().post('/get', {path, filename, mimetype}, {responseType: 'blob'})
        .then(response => {
          let blob = new Blob([response.data], { type: mimetype })
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = filename
          link.click()
        })
    },
    deleteFile (file) {
      var path = file.path
      ApiClient.getClientApi().get('/delete/' + path)
        .then(response => {
          console.log(response)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>