<template>
  <view class="upload-page">
    <view>
      <text>图片上传</text>
    </view>
    <yi-upload @beforeUpload="beforeUpload" @uploadSuccess="onUploadSuccess" @uploadFail="onUploadFail"> </yi-upload>
    <yi-upload @beforeUpload="beforeUpload" @uploadSuccess="onUploadSuccess" @uploadFail="onUploadFail">
      <button
        class="upload-btn"
        hover-class="upload-btn-hover"
        slot="uploadBtn"
        type="primary"
        size="mini"
        :disabled="!isUploadDone"
        :loading="!isUploadDone"
      >
        +图片
      </button>
    </yi-upload>
    <u-line color="red"></u-line>
    <view>
      <text>文件上传</text>
    </view>
    <yi-upload
      upload-type="file"
      @beforeUpload="beforeUpload"
      @uploadSuccess="onUploadSuccess"
      @uploadFail="onUploadFail"
    >
    </yi-upload>
    <yi-upload
      upload-type="file"
      @beforeUpload="beforeUpload"
      @uploadSuccess="onUploadSuccess"
      @uploadFail="onUploadFail"
    >
      <button
        class="upload-btn"
        hover-class="upload-btn-hover"
        slot="uploadBtn"
        type="primary"
        size="mini"
        :disabled="!isUploadDone"
        :loading="!isUploadDone"
      >
        +文件
      </button>
    </yi-upload>
  </view>
</template>

<script>
export default {
  name: 'upload',
  data() {
    return {
      isUploadDone: true,
    };
  },
  methods: {
    beforeUpload() {
      this.isUploadDone = false;
    },
    onUploadSuccess(file) {
      console.log('%c [onUploadSuccess]: ', 'color:#1989fa;', file);
      this.isUploadDone = true;
    },
    onUploadFail() {
      this.isUploadDone = true;
    },
  },
};
</script>

<style scoped lang="scss">
.upload-page {
  padding: 20rpx;
  .upload-btn {
    background-color: #fff;
    color: #999;
    border-radius: 0;
    &::after {
      border: 0;
    }
    border: 1px solid #c0c4cc;
  }
  .upload-btn-hover {
    background-color: #c0c4cc;
  }
}
</style>
