<template>
  <div class="file-contain">
    <div class="title">
      <span>相关附件</span>
    </div>
    <van-row type="flex">
      <van-col span="4"
               v-for="(item, index) in dataList"
               :key="index"
               style="display:flex;padding:10px 0;position: relative;">
        <van-image width="40"
                   height="40"
                   @click="handlePreview(item.fileId)"
                   :src="require('@/assets/images/file-icon/'+item.iconUrl)" />
        <!-- <div style="background:#fff;opacity:0.3"> -->
        <van-icon name="cross"
                  @click="closeTag(item)" />
        <!-- </div> -->
      </van-col>
      <van-col span="4"
               style="display:flex;padding:10px 0px">
        <van-uploader accept="image/*,.doc,.docx,.pdf,.msg,.xlsx,xls,.png,.jpg,.jpeg"
                      :after-read="afterRead"
                      preview-size="40px" />
      </van-col>
    </van-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ls-file',
  props: {
    attachFileInfoList: {
      // 初始化数据
      type: Array
    },
    sysId: {
      // 所属系统
      type: String,
      default: 'cloud-crm-project',
      required: false
    },
    buinessId: {
      // 业务ID
      type: String,
      default: 'def',
      required: false
    },
    uid: {
      // 用户账号
      type: String,
      default: 'def',
      required: false
    }
  },
  watch: {
    attachFileInfoList: {
      handler: function (val) {
        this.dataList = this.addIconUrl(val)
      },
      deep: true
    }
  },
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    this.dataList = this.addIconUrl(this.attachFileInfoList)
  },
  methods: {
    // 手动刷新初始化数据
    refreshData (attachFileInfoList) {
      this.dataList = this.addIconUrl(attachFileInfoList)
    },
    // 添加图标地址
    addIconUrl (list) {
      if (list.length !== 0) {
        list.map(v => {
          let lastIndex = v.fileName.lastIndexOf('.')
          let fileType = v.fileName.substring(lastIndex + 1, v.fileName.length)
          if (fileType === 'xlsx') {
            fileType = 'xls'
          }
          if (fileType === 'docx') {
            fileType = 'doc'
          }
          if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'msg') {
            fileType = 'png'
          }
          if (fileType !== 'doc' && fileType !== 'gif' && fileType !== 'pdf' && fileType !== 'png' && fileType !== 'xls') {
            fileType = 'other'
          }
          v.iconUrl = fileType + '.png'
        })
      }
      return list
    },
    // 上传方法
    afterRead (fileInfo) {
      fileInfo.status = 'uploading'
      fileInfo.message = '上传中...'
      let instance = axios.create({
        baseURL: this.$config.getDomain('attachUrl'), // 服务器地址
        headers: {
          'Content-Type': 'multipart/form-data' // 设置为文件类型
        }
      })
      let formData = new FormData()
      formData.append('busSystem', this.sysId)
      formData.append('busModel', this.buinessId)
      formData.append('userName', this.uid)
      formData.append('file', fileInfo.file, fileInfo.file.name)
      let that = this
      instance.post('/upload', formData).then((res) => {
        if (res.data.success) {
          formData.value = null // 清空 input 框
          let fileData = res.data.data
          if (fileData) {
            that.dataList.push(fileData)
          }
          that.dataList = this.addIconUrl(that.dataList)
          fileInfo.status = 'uploading'
          fileInfo.message = '上传中...'
        } else {
          fileInfo.status = 'failed'
          fileInfo.message = '上传失败，' + res.data.msg
        }
      })
    },
    handlePreview (fileId) {
      let param = {
        fileId: fileId,
        busSystem: 'cloud-crm-project',
        busModel: 'cloud-crm-project',
        uid: this.$common.getUrlParams('uid') || this.uid
      }
      this.$axios.post({
        domain: 'attachUrl',
        url: 'downLoadFile',
        data: param,
        requestType: 'form',
        isShow: true,
        success: function (res) {
          if (res.errorCode === 200) {
            longsysWebview.openReader({
              url: res.data
            })
          }
        },
        error: function (err) {
          this.$toast({ type: 'fail', message: err, duration: 3000 })
        }.bind(this)
      })
    },
    // 删除
    closeTag (item) {
      this.dataList = this.dataList.filter(v => v.id !== item.id)
    },
    // 获取当前上传文件信息
    getDataList () {
      return this.dataList
    }
  }
}
</script>

<style type="text/css" scoped lang="scss">
.file-contain {
  background: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  .file-wrap {
    padding: 10px 0;
  }
  .van-icon {
    position: absolute;
    right: 30px;
    top: 8px;
    z-index: 999;
    font-size: 36px;
  }
}
</style>
