<template>
  <div class="demo-page">
    <!-- eslint-disable max-len -->
    <h1>File related components</h1>

    <h2>Uploads</h2>

    <h3>Default upload</h3>
    <ElUpload
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
    >
      <TfButton
        size="small"
        type="primary"
      >
        Click to upload
      </TfButton>
      <div
        slot="tip"
        class="el-upload__tip"
      >
        jpg/png files with a size less than 500kb
      </div>
    </ElUpload>

    <h3>Drag/drop upload</h3>

    <ElUpload
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        Drop file here <br> or <em>click to upload</em>
      </div>
      <div
        slot="tip"
        class="el-upload__tip"
      >
        jpg/png files with a size less than 500kb
      </div>
    </ElUpload>
    <!-- eslint-enble max-len -->
  </div>
</template>

<script>
  export default {
    name: 'Misc',
    data: () => ({
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
      ],
    }),
    methods: {
      /**
       * Method for when a file is removed
       *
       * @param {object} file
       * @param {Array} fileList
       */
      handleRemove(file, fileList) {
        // eslint-disable-next-line
        console.log(file, fileList); // disabling since this is an example
      },
      /**
       * Handle previewing an uploaded file
       *
       * @param {object} file
       */
      handlePreview(file) {
        // eslint-disable-next-line
        console.log(file); // disabling since this is an example
      },
    },
  };
</script>
