<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <a-upload
        list-type="picture-card"
        :file-list="[]"
        :disabled="true"
      />
      <p>{{ placeholder }} {{ sizeTip }}</p>
    </div>
    <div v-else>
      <a-upload
        :action="fileUploadUrl"
        :headers="headers"
        :multiple="true"
        :file-list="[]"
        list-type="picture-card"
        :data="{}"
        :before-upload="beforeUpload"
        @change="handleChange"
      />
      <p class="font">{{ placeholder }} {{ sizeTip }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'ImageUpload',
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    readerMode: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    },
    maxSize: {
      type: Number,
      default: 5
    },
    maxNumber: {
      type: Number,
      default: 3
    },
    enableZip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fileUploadUrl: 'sys/upload/uploadMinioNew'
    }
  },
  computed: {
    ...mapState({
      userAuth: state => state.auth
    }),
    headers() {
      return {
        token: this.userAuth.token,
        tanentId: this.userAuth.tenantId
      };
    },
    // fileUploadUrl() {
    //   const { baseURL } = createServiceConfig(process.env);
    //   return `${baseURL}/api/oss/upload`;
    // },
    sizeTip() {
      return this.maxSize > 0 ? `| 每张图不超过${this.maxSize}MB` : '';
    }
  },
  methods: {
    beforeUpload(file) {
      const isLtSize = file.size / 1024 / 1024 < this.maxSize;
      if (!isLtSize) {
        this.$message.error(`图片大小不能超过 ${this.maxSize}MB`);
        return false;
      }
      return true;
    },
    handleChange(info) {
      const res = info.file.response;
      if (res && res.data) {
        const newValue = [...this.value, res.data.id];
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

<style scoped>
.font {
  font-size: 12px;
  color: #303133;
  margin-top: 7px;
}
</style>
