<template>
<div>
<el-form :model="form" :rules="rules" ref="fm">
  <el-row :gutter="24">
    <el-col :span="12">
      <el-form-item label="region" prop="region">
        <el-input v-model.trim="form.region" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="accessKeyId" prop="accessKeyId">
        <el-input v-model.trim="form.accessKeyId" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="accessKeySecret" prop="accessKeySecret">
        <el-input v-model.trim="form.accessKeySecret" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="bucket" prop="bucket">
        <el-input v-model.trim="form.bucket" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="stsToken" prop="stsToken">
        <el-input v-model.trim="form.stsToken" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="path" prop="path">
        <el-input v-model.trim="form.path" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

<honjo-upload v-model="value" :request="oosRequest" multiple></honjo-upload>
</div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { FileResp, RequestOptions } from '@@/components/upload/HonjoUpload.vue'
import OSS from 'ali-oss'

/**
 * @title  调用 OSS 上传
 * @desc 调用阿里云oss服务。
 */
@Component
export default class OSSExample extends Vue {
  @Ref() fm!: any

  value: FileResp[] = [
    {
      name: '1.jpg',
      url: 'http://localhost:3000/nas/download/1.jpg'
    }
  ]

  form = {
    region: '',
    accessKeyId: '',
    accessKeySecret: '',
    bucket: '',
    stsToken: '',
    path: ''
  }

  rules = {
    region: [{ required: true, trigger: 'change' }],
    accessKeyId: [{ required: true, trigger: 'change' }],
    regaccessKeySecretion: [{ required: true, trigger: 'change' }],
    bucket: [{ required: true, trigger: 'change' }],
    stsToken: [{ required: true, trigger: 'change' }],
    path: [{ required: true, trigger: 'change' }]
  }

  oosRequest (options: RequestOptions) {
    this.fm.validate().then((valid: boolean) => {
      if (!valid) {
        options.onError(new Error('参数不完整'))
        return
      }
      try {
        const client = new OSS(this.form)
        const data = options.file
        options.onProgress({ percent: 50 })
        const result = client.put(this.form.path + '/' + Date.now() + '/' + data.name, data).then((result: any) => {
          options.onProgress({ percent: 100 })
          options.onSuccess(result)
          console.log(result)
        }).catch((err: Error) => {
          options.onError(err)
        })
      } catch (err) {
        options.onError(err)
      }
    })
    return this.oosRequest
  }

  resp = (response: any) => response.data
}
</script>
