<template>
  <div style="width: 420px;margin: 20px auto;">
    <a-upload
      :action="allurl"
      :headers="header"
      :accept="accept"
      list-type="picture-card"
      @change="uploadSuccess"
      ref="upload">
      <a-icon type="plus" />
    </a-upload>
    <a-modal :open="dialogVisible" :footer="null" @cancel="dialogVisible=false">
      <img width="100%" :src="dialogImageUrl" alt=""></img>
    </a-modal>
    <a-form :model="form" :label-col="{span: 10}" :wrapper-col="{span: 14}">
      <a-form-item label="描述信息">
        <a-textarea v-model:value="description" rows="3"></a-textarea>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  props: ['url'], // 上传基础路径
  data() {
    return {
      fileList: [],
      resList: [],
      length: 0, // 上传列表长度
      sum: 0, // 上传成功次数
      allurl: '', // 上传完整路径
      header: {
        persId: localStorage.getItem('persId'),
        accessToken: localStorage.getItem('accessToken'),
      },
      dialogImageUrl: '',
      dialogVisible: false,
      description: '',
    };
  },
  computed: {
    userid() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  created() {},
  methods: {
    // 初始化，
    init() {
      this.$refs.upload.clearFiles();
      this.length = 0;
      this.sum = 0;
      this.allurl = '';
      this.resList = [];
    },
    // 开始上传，文件列表为空直接返回turn表示结束，不为空触发上传并返回false，由uploadOver判断结束时间
    submitUpload(id, type) {
      this.allurl = `/modular-source/6ace62b8e2bb467d98286d260aebcef2${this.url}${id}&bizType=${type}&keyWord=${this.description}`;
      if (this.length) {
        this.$nextTick(() => {
          this.$refs.upload.submit();
          this.description = '';
        });
        return false;
      } else {
        return true;
      }
    },
    // 上传出错，向上触发结束
    upError(err, file, fileList) {
      this.$message.error('上传出错，请修改文件！');
      this.$emit('uploadOver');
      this.init();
    },
    // 全部上传成功，向上触发结束
    uploadSuccess(response, file, fileList) {
      this.resList.push(response.data);
      console.log(this.resList);
      this.sum = this.sum + 1;
      if (this.sum == this.length) {
        this.$emit('uploadOver', this.resList);
        this.init();
      }
    },
    // 及时更新列表长度
    changeFileList(file, fileList) {
      this.length = fileList.length;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang='less' scoped>

</style>
