<template>
  <div>
    <div class="page-line" />
    <div class="list-style">
      证件型单列：listStyle = 'single', capture='camera'
    </div>
    <bxs-uploader
      :oss-type="2"
      :disabled="disabled"
      list-style="single"
      v-model="singleImages"
      :max-size="1024*1024*4"
      :before-read="beforeRead"
      :before-upload="beforeUpload"
      error-message=""
      :capture="capture"
      @delete="delImg"
      @preview="preview"
      @upload-success="uploadSuccess"
      @upload-failed="uploadFailed"
      />
    <div class="page-line" />

    <div class="list-style">
      件型双列：listStyle = 'double'，并且设置了自定义上传 customUpload
    </div>
    <bxs-uploader
      :disabled="disabled"
      list-style="double"
      v-model="doubleImages"
      :custom-upload="customUpload"
      :max-size="100000000000"
      :max-amount="1"
      :before-read="beforeRead"
      :before-upload="beforeUpload"
      error-message=""
      @delete="delImg"
      @preview="preview"
      @upload-success="uploadSuccess"
      @upload-failed="uploadFailed"
      />

    <div class="page-line" />

    <div class="list-style">
      宫格型：listStyle = 'lattice', 并且设置了图片处理 handleFile
    </div>
    <bxs-uploader
      :disabled="disabled"
      list-style="lattice"
      v-model="latticeImages"
      :max-size="100000000000"
      :max-amount="9"
      :handle-file="handleFile"
      :before-read="beforeRead"
      :before-upload="beforeUpload"
      error-message=""
      @delete="delImg"
      @preview="preview"
      @upload-success="uploadSuccess"
      @upload-failed="uploadFailed"
      />
    <div class="page-line" />

    <div class="list-style">
      多行：listStyle = 'rows', capture="camera"
    </div>
    <bxs-uploader
      :disabled="disabled"
      list-style="rows"
      v-model="rowsImages"
      :max-size="100000000000"
      :capture="capture"
      :max-amount="9"
      :before-read="beforeRead"
      :before-upload="beforeUpload"
      error-message=""
      @delete="delImg"
      @preview="preview"
      @upload-success="uploadSuccess"
      @upload-failed="uploadFailed"
      />
    <div class="page-line" />

    <div class="list-style">
      单行：listStyle = 'row'，并且设置了自定义上传 customUpload（结合appBridge来使用）
    </div>
    <bxs-uploader
      :disabled="disabled"
      list-style="row"
      v-model="rowImages"
      :custom-upload="customUploadUseBridge"
      :max-size="100000000000"
      :max-amount="4"
      :before-read="beforeRead"
      :before-upload="beforeUpload"
      error-message=""
      @delete="delImg"
      @preview="preview"
      @upload-success="uploadSuccess"
      @upload-failed="uploadFailed"
      />
    <div class="page-line" />

    <div class="list-style">
      listStyle = null
    </div>
    <bxs-uploader
      ref="noStyleUploader"
      :disabled="disabled"
      v-model="noStyleImages"
      :before-read="beforeRead"
      :before-upload="beforeUpload"
      error-message=""
      @delete="delImg"
      @preview="preview"
      @upload-success="uploadSuccess"
      @upload-failed="uploadFailed"
      >
      <div
        slot="button"
        class="btn-outer"
        >
        <button class="trigger-btn">
          上传图片
        </button>
      </div>
    </bxs-uploader>
  </div>
</template>
<script>
/* eslint-disable no-undef */
export default {
  data() {
    return {
      capture: 'camera',
      userAgent: null,
      devicePixelRatio: null,
      disabled: false,
      singleImages: [
        {
          title: '身份证正面',
          url:
            'https://media.winbaoxian.com/bxs_ui_uploader/f7PmApxScYH8ahm.jpeg',
          bgImg: 'bank_card_front',
          status: '',
        },
        {
          title: '身份证反面',
          url: '',
          bgImg: '',
          status: '',
        },
      ],
      doubleImages: [
        {
          title: '身份证正面',
          url:
            'https://media.winbaoxian.com/bxs_ui_uploader/f7PmApxScYH8ahm.jpeg',
          bgImg: '',
          status: '',
        },
        {
          title: '身份证反面(自定义背景图片)',
          url: '',
          bgImg:
            'https://media.winbaoxian.com/autoUpload/activity/zl_930e11c727d83c7.png?kobe=1',
          status: '',
        },
      ],
      latticeImages: [
        {
          url:
            'https://media.winbaoxian.com/oss/c/default/bxs-ui-uploader/2018/11/19/15/03/41/998a6d1ac65c42aba40f5928ec07bb80.jpg',
        },
      ],
      rowsImages: [
        {
          url:
            'https://media.winbaoxian.com/oss/c/default/bxs-ui-uploader/2018/11/19/15/03/41/998a6d1ac65c42aba40f5928ec07bb80.jpg',
        },
      ],
      rowImages: [
        {
          url:
            'https://media.winbaoxian.com/oss/c/default/bxs-ui-uploader/2018/11/19/15/03/41/998a6d1ac65c42aba40f5928ec07bb80.jpg',
        },
      ],
      noStyleImages: [],
    }
  },
  created() {
    this.devicePixelRatio = window.devicePixelRatio
    this.userAgent = navigator.userAgent.toLowerCase()
  },
  methods: {
    handleFile(file) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(file)
        }, 1000)
      })
    },
    customUpload() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            'https://media.winbaoxian.com/bxs_ui_uploader/f7PmApxScYH8ahm.jpeg',
            'https://media.winbaoxian.com/oss/c/default/bxs-ui-uploader/2018/11/19/15/03/41/998a6d1ac65c42aba40f5928ec07bb80.jpg',
          ])
        }, 1000)
      })
    },
    customUploadUseBridge() {
      return new Promise((resolve, reject) => {
        if (window.appBridge && appBridge.checkAppFeature('PHOTO')) {
          appBridge.getPhoto({
            ossType: 1, // 选填 ，Number 类型，表示图片上传到哪个oss实体；1表示科技，2表示经纪；默认为1； V5.1.0版本开始支持这个参数
            size: {
              // size 代表裁剪尺寸， 不传则代表不裁剪图片
              width: 300,
              height: 400,
            },
            type: 3, // 1: 拍照、2: 相册、3: 拍照+相册(以 actionsheetr 方式让用户选择)
            isSecret: false, // 为 false 时返回图片 url 为 http://media.winbaoxian.com/upload/a-test... ，为 true 时 url 为 http://bxs.oss-cn.hangzhou.aliyuncs.com/upload/a-test/...
            folderName: 'a-test', // oss 上的图片保存文件夹名字
            maxKB: 100, // (3.2.0版本添加)(可选,如不传,保持之前的逻辑-500KB限制)  0: 无大小限制，200: 代表最大为 200KB
          })
          // 注册回调
          appBridge.onPhotoDone(photoInfo => {
            if (photoInfo && photoInfo.photoUrl) {
              resolve(photoInfo.photoUrl)
            } else {
              reject(new Error('appBridge上传失败'))
            }
          })
        } else {
          reject(new Error('该版本不支持appBridge.getPhoto'))
        }
      })
    },
    beforeRead(data) {
      console.log('beforeRead', data)
      return true
    },
    beforeUpload(data) {
      console.log('beforeUpload', data)
      return true
    },
    delImg(data) {
      this.$toast('删除成功')
      console.log('delImg', data)
    },
    preview(data) {
      this.$toast('预览')
      console.log('preview', data)
    },
    oversize(data) {
      this.$toast('图片体积超出返回')
      console.log('oversize', data)
    },
    overAmount(data) {
      this.$toast('图片数量超出范围')
      console.log('overAmount', data)
    },
    uploadSuccess(data) {
      this.$toast('上传成功')
      console.log('uploadSuccess', data)
    },
    uploadFailed(data) {
      this.$toast('上传失败')
      console.log('uploadFailed', data)
    },
  },
}
</script>
<style lang="css">
.list-style {
  margin-left: 15px;
  margin-bottom: 5px;
  font-size: 20px;
}

.page-line {
  position: relative;
  height: 40px;
}

.btn-outer {
  background: #fff;
  padding: 15px;
}

.trigger-btn {
  width: 100px;
  font-size: 14px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  color: #333;
  border: 1px solid #333;
}
</style>
