<template>
  <div class="file">
    <!-- <div class="flex-align-center flex-between pionter" v-for="(img,index) in fileLinkList" :key="img.index">
      <div class="flex-align-center">
        <img width="30" :src="img.type.split('/')[0] === 'image'?img.url:require('@/assets/file_icons/file.svg')" class="inline-16" alt="">
        <div class="file__link inline-16">
          <p>{{img.name}}</p>
        </div>
      </div>
      <i style="color:red;" class="el-icon-delete" @click="handleRemove(index)"></i>
    </div> -->
    <file-item 
        :auto="true"
        :isDownLoad="true" 
        :isDelete='true'
        :fileData="fileLinkList"
        @deleteFile="handleRemove">
    </file-item>
    <el-upload
      action="#"
      :on-change="onChange"
      :show-file-list="false"
      :auto-upload="false"
      multiple>
      <el-button size="small" type="text" icon="el-icon-paperclip">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import FileItem from './file/index2'
export default {
  components: {FileItem},
  props:['folderid','bindData','type','accept'],
  name: '',
  data() {
    return {
      imageUrl:'',
      fileList:[],
      fileLinkList:[],
      params: {
        "classname": "system.attachment.huawei.OBS",
        "method": "getFileName",
        "content": {
          "filename": '',
          "filetype": '',
          "parentid": ""//归属文件夹ID
        }
      },
      fileLength:0
    };
  },
  computed:{
  },
  watch:{
  },
  methods: {
    onChange (file,filelist) {
      this.fileList.push(file)
      console.log(this.fileList);
      
      this.beforeUpload(file.raw)
    },
    beforeUpload (file) {
      var that = this

      var fileReader = new FileReader();

      fileReader.readAsDataURL(file);

      fileReader.onload = function(e) {
        
        var result = e.target.result;

        let postfix = file.name.substr(file.name.lastIndexOf('.') + 1)
        
        that.fileLinkList.push(that.fileType.fileList([{document:file.name,url:result,type:file.type,name:file.name,postfix:postfix}])[0])
        console.log(that.fileLinkList);
        
      }
    },
    handleRemove (index) {
      this.fileList = this.fileList.filter((e,idx)=>{
        if (idx !== index) {
          return e
        }
      })
      console.log(this.fileList);
      
      this.fileLinkList = this.fileLinkList.filter((e,idx)=>{
        if (idx !== index) {
          return e
        }
      })
    },
    toUpload (callback) {
      if (this.fileList.length == 0) callback() 
      this.fileList.forEach(file=>{
        let index = file.name.lastIndexOf(".");
        let ext = file.name.substr(index + 1);
        this.params.content.filename = file.name
        this.params.content.filetype = ext
        this.getUploadUrl(file, ext,callback)
      })
     
    },

    // 获取华为云上传地址
    async getUploadUrl (file, ext,callback) {
      this.params.content.parentid = this.folderid
      const res = await this.$api.requested(this.params)
      let url = res.data.uploadurl
      let obsfilename = res.data.serialfilename

      this.upoladFileToServer(url, file, ext, obsfilename,callback)
    },

    // 上传到华为云
    async upoladFileToServer (url, file, ext, obsfilename,callback) {      
      let THIS = this
      let config = {
        headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : ext === 'svg'?{ 'Content-Type': 'image/svg+xml' } : { 'Content-Type': 'application/octet-stream' },
      }
      let res = await this.$upload.hw_upload(url, file.raw, config)
      this.createFileRecord(obsfilename,callback)
      
    },

    // 上传成功以后生成附件记录
    async createFileRecord (obsfilename,callback) {
      let obj = {
        "serialfilename": obsfilename
      }
      obj = Object.assign({},obj,this.bindData)
      let param = {
        "classname": "system.attachment.huawei.OBS",
        "method": "uploadSuccess",
        "content":obj
      }
      const res = await this.$api.requested(param)
      if (res.code ===  1) {
        callback()
        this.$emit('onSuccess',res)
        this.fileList = []
        this.fileLinkList = []
      }
    },
  },
};
</script>

<style scoped>
.upload_image__panel{
  position: relative;
  height:148px;
  width: 148px;
  border-radius: 6px;
  margin-right: 10px;
  margin-bottom:10px;
  border: 1px solid #c0ccda;
  overflow: hidden;
}
.upload_image__panel img{
  width: 100%;
  height: 100%;
}
.upload_image__panel_mod{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:#fff;
  background: rgba(0,0,0,.8);
  opacity: 0;
  transition: .3s linear;
  cursor: pointer;
}
.upload_image__panel:hover .upload_image__panel_mod{
  opacity: 1;
}
.pionter{
  margin:6px 0;
  padding: 20px 10px;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
}
.pionter:hover{
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
</style>
