<template>
  <div class="com">
    <div class="title">
      <!-- 汇款凭证 -->
      {{ $t('fund.l81') }}
    </div>
    <van-uploader :after-read="afterRead" result-type="file">
      <van-image width="88px" height="88px" fit="contain" :src="file">
        <template v-slot:error>
          <van-icon name="plus" />
        </template>
      </van-image>
    </van-uploader>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      file: '',
    }
  },
  methods: {
    submit() {
      if (!this.file) {
        // this.$toast('请上传汇款凭证');
        this.$toast(this.$t('fund.l82'));
        return false
      }
      return JSON.stringify({
        file: this.file
      })
    },
    afterRead(file) {
      if (['image/jpg', 'image/jpeg', 'image/png'].indexOf(file.file.type) == -1) {
        // 请上传 jpg/jpeg/png 格式图片
        this.$toast(this.$t('ajax.l5'));
        return false;
      }
      this.upload(file.file)
    },
    upload(file) {
      const formData = new FormData();
      formData.append("file", file);
      axios.post(this.$uploadUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          var file = res.data
          if (file.msg != 'ok') {
            this.$notify({
              message: file.msg || this.$t('fund.l83'),
              type: 'danger'
            });
            return
          }
          this.file = file.data
        })
        .catch((err) => {
          this.$notify({
            message: this.$t('fund.l83'),
            type: 'danger'
          });
        });
    },
  }
}
</script>
<style lang="less" scoped>
.com {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 18px 11px 17px;
}
.title {
  font-size: 16px;
  color: #000000;
  margin-bottom: 17px;
}
.label {
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--color-1-);
}
::v-deep {
  .van-uploader__input-wrapper {
    height: 88px;
  }
}
</style>