<template>
  <div id="vupload">
    <van-uploader :fileList="fileList" :after-read="upload" accept="*" @delete="toDelete" />
  </div>
</template>

<script>
const _ = require('lodash');
import axios from 'axios';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'vupload',
  props: {
    fileList: { type: Array },
    url: { type: String, required: true },
  },
  model: {
    prop: 'fileList',
    event: 'change',
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    async upload({ file }) {
      let formdata = new FormData();
      formdata.append('file', file, file.name);
      const res = await axios.post(this.url, formdata, { headers: { 'Content-Type': 'multipart/form-data' } });
      if (res.status === 200 && res.data.errcode == 0) {
        const { id, name, uri } = res.data;
        const obj = { name, url: uri };
        this.fileList.push(obj);
      }
    },
    toDelete(file) {
      console.log(file);
      const index = this.fileList.findIndex((f) => _.isEqual(f, file));
      if (index > -1) this.fileList.splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>
