<template>
  <div class="vn-pp row justify-center">
  <q-card class="vn-w-md">
    <q-card-section>
      <q-select
        v-model="collection"
        :label="$t('collection')"
        :options="collections"
        option-value="name"
        option-label="desc"
        emit-value/>
    </q-card-section>
    <q-card-section>
      <q-uploader
        ref="uploader"
        :url="`${$apiBase}/Images/upload`"
        :form-fields="formFields"
        @added="onAdded"
        @finish="onFinish"
        :auto-upload="uploadAutomatically"
        multiple
        flat
        bordered
        style="width: 100%;">
        <template v-slot:list="scope">
          <q-list separator>
            <q-item v-for="file in scope.files" :key="file.name">
              <q-item-section>
                <q-input
                  v-model="file.uploadName"
                  :readonly="file.__status == 'uploading' || file.__status == 'uploaded'"
                  :loading="file.__status == 'uploading'"
                  :error="file.__status == 'failed'"
                  dense>
                  <template v-slot:prepend
                    v-if="file.__img">
                    <q-avatar>
                      <img :src="file.__img.src">
                    </q-avatar>
                  </template>
                  <template v-slot:append
                    v-if="file.__status == 'uploaded'">
                    <q-icon
                      name="check"
                      color="green"/>
                  </template>
                  <template v-slot:after>
                    <q-btn
                      icon="delete"
                      @click="scope.removeFile(file)"
                      flat
                      dense
                      round/>
                  </template>
                  <template v-slot:hint>
                    {{ file.__sizeLabel }} / {{ file.__progressLabel }}
                  </template>
                  <template v-slot:error>
                    {{ file.xhr.statusText }}
                  </template>
                </q-input>
              </q-item-section>
            </q-item>
          </q-list>
        </template>
      </q-uploader>
    </q-card-section>
    <q-card-section>
      <q-checkbox
        v-model="updateMatching"
        :label="$t('updateMatchingId')"/>
      <q-checkbox
        v-model="uploadAutomatically"
        :label="$t('uploadAutomatically')"/>
    </q-card-section>
  </q-card>
  </div>
</template>

<script>
export default {
  name: 'Images',
  data () {
    return {
      collection: 'catalog',
      collections: null,
      updateMatching: true,
      uploadAutomatically: true
    }
  },
  mounted () {
    let filter = {
      fields: ['id', 'name', 'desc'],
      order: 'desc'
    }
    this.$axios.get(`ImageCollections`, { params: { filter } })
      .then(res => (this.collections = res.data))
  },
  methods: {
    onAdded (files) {
      for (let file of files) {
        file.uploadName = file.name.split('.')[0]
      }
    },
    onFinish () {
      let error = this.$refs.uploader.files.findIndex(
        file => file.__status === 'failed')

      if (error === -1) {
        this.$q.notify({
          message: this.$t('imagesUploadSuccess'),
          icon: 'check',
          color: 'green'
        })
      } else {
        this.$q.notify({
          message: this.$t('imagesUploadFailed'),
          icon: 'warning',
          color: 'orange'
        })
      }
    },
    formFields (files) {
      return [
        {
          name: 'collectionFk',
          value: this.collection
        }, {
          name: 'updateMatching',
          value: this.updateMatching
        }, {
          name: 'name',
          value: files[0].uploadName
        }
      ]
    }
  }
}
</script>
