/**
* @Author think
* @Date 2019-07-11 11:04
*/

<template>
  <h-view title="HFile">
    <h-header :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">HFile</div>
    </h-header>
    <h-content>
      <h-file
        :fileList="fileList" v-model="fileList" :upload="upload"
        :uploadConfig="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
        :afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
        :deleteImage="deleteImage"
        :result-type="resultType"
        @upload="uploaded"
        @delete="deletePic"
        @oversize="oversize">
        <div class="file-chose">
          文件上传 <i class="icon ion-ios-cloud-upload"/>
        </div>
      </h-file>
      <list-item>
        <item>
          <div slot="name">融资额</div>
          <currency-input slot="content" v-model="money"/>
          <div slot="right-icon">¥</div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
export default {

  name: 'FileTest',
  data () {
    return {
      fileList: [], // 文件数组 必填
      disable: false, // 是否禁用文件上传 默认false 可选
      accept: 'image/png,image/jpeg', // 接受的文件类型 可选
      upload: false, // 选取完成是否自动上传 默认 false 可选
      maxSize: 2000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
      maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
      deleteImage: true, // 是否删除文件 默认true 可选
      previewImage: true, // 是否在选取完成后展示预览图 默认true 可选
      resultType: 'dataUrl', // 文件读取结果类型 dataUrl 可选值为text
      uploadConfig: { // 文件上传配置
        uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
        params: { // 上传的额外参数
          user_id: 1,
          source_type: 'HLS_DOC_FILE_TEMPLET',
          pkvalue: 42,
        },
        uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
      },
      money: 2100.98,
    }
  },
  methods: {
    /**
     * email事件 可选
     * 删除文件后触发 返回当前文件以及 对应的index
     * @param file
     * @param index
     */
    deletePic (file, index) {
    //   debugger
    },
    /**
     * 可选
     * 文件选择完成后读取前触发 返回当前选择的文件数组
     * 返回 ture 或者promise对象 标示继续读取，否则终止 操作
     * @param files 选择的文件数组
     * @returns {boolean}
     */
    beforeRead (files) {
      files.forEach((file, index) => {
        console.log(file.size)
      })
      return true
    },
    /**
     * 可选
     * 文件读取成功后触发添加了文件的content内容
     * @param files 选择的文件数组
     * @returns {boolean}
     */
    afterRead (files) {
      files.forEach((item, index) => {
        console.log(item.file.name)
      })
      return true
    },
    /**
     * email事件 可选
     * 全部文件上传成功后触发
     * @param fileList 全部文件数组
     */
    uploaded (fileList) {
      debugger
    },
    /**
     * email事件 可选
     * 文件大小超过配置的大小
     * @param files
     */
    oversize (files) {
      debugger
    },
    /**
     * 每个文件上传成功后的回调 可选配置
     * @param fileList 文件数组
     * @param result 上传返回结果
     */

    fileSuccess (fileList, result) {
      this.fileList = fileList
      debugger
      this.fileList.forEach((itemFile, index) => {
        if (result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name) {
          itemFile.attachment_id = result.response.attachment_id
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.content{
  .h-file{
    .file-chose{
      width: 110px;
      height: 44px;
      background-color: #07c160;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 4px;
      .icon{
        margin-left: 10px;
        font-size: 20px;
        //color: #fff;
      }
    }
  }
}
</style>
