<template>
  <div>
    <div v-if="disabled === undefined || reEdit" class="fl">
      <el-upload
        :multiple="true"
        :action="action"
        :show-file-list="false"
        :data="dataObj"
        :accept="obj.accept"
        :on-success="_handleSuccess"
        with-credentials
        class="upload-file"
        list-type="picture-card">
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div class="fl">
      <ul class="upload-file-ul">
        <li v-for="(item,index) in list" :key="index">
          <span @click="_edit(item)">{{item.fileName}}</span>
          <div @click="_download(item)" class="upload-list-cover">{{item.fileName}}</div>
          <div v-if="disabled === undefined || reEdit" class="upload-list-cover-close">
            <i @click="_del(item)" class="el-icon-close" style="margin-left: 10px"/>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
/**
 * 流程附件：上传、下载、删除、预览
 * 按住ctrl选择多个文件上传
 */
import { flowAttachment } from '../../api'
import global from '../../api/config'

export default {
  name: 'UploadFileList',
  props: {
    // 组件的所有信息
    obj: null,
    // 是否禁用（表示只读，不许上传）
    disabled: null,
    // 附件可操作
    reEdit: null,
    // 流程id(根据流程id查看附件)自定义的
    processId: null
  },
  data() {
    return {
      dataObj: {
        file: ''
      },
      list: [],
      previewList: [],
      // 上传附件
      action: '',
      // 生成form表单的id
      createFormKey: '',
      flowProcessId: '', // 自己定义的id,用于查询附件
      downloadUrl: ''
    }
  },
  watch: {
    // 监听processId数据,更新表单
    processId: {
      handler(val) {
        console.log('processId==', val)
        if (val) {
          this._list()
        } else {
          this.list = []
        }
      },
      deep: true
    },
    // 监听obj数据,更新表单
    obj: {
      handler(val) {
        console.log('obj-value==', val)
        this._list()
      },
      deep: true
    }
  },
  mounted() {
    this._list()
  },
  methods: {
    // 自己定义的流程id
    _replaceId() {
      if (this.processId) {
        let flowProcessId = ''
        const processIdList = this.processId.split(':')
        if (processIdList.length === 1) {
          flowProcessId = processIdList[0]
        } else if (processIdList.length === 3) {
          flowProcessId = processIdList[2]
        }
        this.flowProcessId = flowProcessId
        this.action =
          global.baseURL + '/flow/v1/attachment/upload-' + flowProcessId
        this.downloadUrl = global.baseURL + '/flow/v1/attachment/download?ids='
      }
    },
    _handleSuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this._list()
      } else {
        this.$message.error(response.msg)
      }
    },
    // list接口
    _list: async function() {
      this._replaceId()
      if (this.flowProcessId) {
        const result = await flowAttachment.list(this.flowProcessId)
        // 处理数据，可进行预览图片
        // 拼接图片预览地址
        this.previewList = []
        // 支持page与list
        const records = result.records ? result.records : result
        for (let i = 0; i < records.length; i++) {
          // 判断是否是图片格式
          if (this.$fileFormat(records[i].type, 'img')) {
            const url = this.downloadUrl + records[i].id
            this.$set(records[i], 'url', url)
            this.previewList.push(url)
          }
        }
        this.list = records
      }
    },
    // 下载
    _download(item) {
      const url = this.downloadUrl + item.id
      window.open(url, '_blank')
    },
    // 删除
    _del(item) {
      this.$confirm('确定要删除附件吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this._delOk(item.id)
      })
    },
    _delOk: async function(id) {
      const result = await flowAttachment.delFile(id)
      if (result) {
        this._list()
      }
    },
    // 编辑或预览
    _edit(item) {
      if (this.disabled === undefined || this.reEdit) {
        // 进行编辑
        this.$viewDocument(item, 'edit')
      } else {
        // 进行预览
        this.$viewDocument(item, 'readonly')
      }
    }
  }
}
</script>
<style>
/*多个附件上传*/
.upload-file .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.upload-file-ul {
  overflow: hidden;
}

.upload-file-ul li {
  float: left;
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #ddd;
  margin-left: 5px;
  border-radius: 7px;
  position: relative;
}

.upload-list-cover {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  line-height: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.upload-file-ul li:hover .upload-list-cover {
  display: block;
  color: #fff;
  cursor: pointer;
}

.upload-list-cover-close {
  position: absolute;
  z-index: 2000;
  left: 70px;
  bottom: 70px;
  line-height: 30px;
  cursor: pointer;
}

.upload-list-cover-close:hover {
  color: #eb6877;
}

.upload-file-ul li:hover span {
  cursor: pointer;
  color: #409eff;
}

/*多个附件上传*/
</style>
