<template>
  <div class="raonkupload">
    <h1>{{ msg }}</h1>
    <RAONKUpload
			id="raonkupload"
      :componentUrl="raonkuploadUrl"
      :config="uploadConfig"
		/>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import RAONKUpload from 'raonkupload-vue/dist/cjs/index';
//import RAONKUpload from 'raonkupload-vue/dist/es2015/index';

const raonkuploadUrl = "/raonkupload/js/raonkupload.js";
const uploadConfig = {
  SkinName: "bluegray",
  Runtimes: "html5",
  Event: {
    CreationComplete: function( uplodId, paramObj ) {
      console.log("Using config Evnet - CreationComplete " + {uplodId: uplodId, paramObj: paramObj });
    },
    TransferComplete: function( uplodId, paramObj ) {
      console.log("Using property event - TransferComplete" + {uplodId: uplodId, paramObj: paramObj });
    }
  }
};

export default defineComponent({
  components: {
    RAONKUpload
  },
  props:{
    msg: String
  },
  setup() {
    return {
      raonkuploadUrl,
      uploadConfig
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
