<template>
  <view @click="chooseImage">
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    multiple: { type: Boolean, default: false },
    limit: { type: Number, default: 1 },
    uploadUrl: { type: String, default: '' },
    extraData: { type: Object, default: () => ({}) }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: this.multiple ? this.limit : 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.uploadFile(tempFilePath);
        }
      });
    },
    uploadFile(filePath) {
      let token = uni.getStorageSync('token');
      uni.uploadFile({
        url: this.uploadUrl,
        filePath: filePath,
        name: 'file',
        header: {
          'token': token
        },
        formData: this.extraData.formData || {},
        success: (e) => {
          try {
            let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}");
            if (res.code === 1) {
              this.$emit('uplodeImageRes', res.data, this.extraData);
            } else {
              uni.showToast({ title: res.msg, icon: 'none' });
            }
          } catch (error) {
            uni.showToast({ title: '解析失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '上传失败', icon: 'none' });
        }
      });
    }
  }
}
</script>
