<template>
  <div>
    <GenericManager
      object_name="文件"
      :uri="resource_uri"
      :list_fields="show_fields"
      :visible_fields="show_fields"
      :editable_fields="['link', 'title', 'position']"
      show_search=1
      no_create=1
      no_edit=1
      no_details=1
      :actions="actions"
      ref="gm">
    <MediaUploader @change="reload" />
    </GenericManager>
    <Modal ref="modal" close_only=1>
      <img class="preview" :src="modal_url" />
    </Modal>
  </div>
</template>

<script>
import MediaUploader from '../components/media-uploader';
export default {
  name: 'Assets',
  props: [],
  components: {
    MediaUploader,
  },
  data: function () {
    return {
      resource_uri: "/api/v1/asset-file/",
      item: null,
      file: null,
      selected_icon_url: null,
      modal_url: '',
    };
  },
  computed: {
    show_fields: function() {
      return ['filename', 'datetime'];
    },
    actions: function() {
      var r = [
        {
          icon: 'eye',
          handler: this.handle_show_file,
        },
      ];
      return r;
    },
  },
  methods: {
    reload: function() {
      this.$refs.gm.reload_data();
    },
    handle_show_file: function(item) {
      this.modal_url = item.url;
      this.$refs.modal.show();
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
img.preview {
  width: 100%;
}
</style>

