<template>
  <div class="lab-file" v-loading="requesting">
    <template>
      <el-upload
          :action="uploadUrl"
          :headers="uploadHeader"
          :name="element.props.limit > 1 ? 'files' : 'file'"
          :data="uploadData"
          :limit="element.props.limit"
          :multiple="element.props.limit > 1"
          :file-list="dataSource"
          :show-file-list="false"
          :on-exceed="onExceed"
          :on-success="onSuccess"
          :auto-upload="false">
        <el-button v-if="element.props.uploadAbled && dataSource.length < element.props.limit" slot="default" type="primary">上传</el-button>
      </el-upload>
    </template>
    <el-table :data="dataSource" :row-key="element.props.resourceId">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column label="文件名" align="center" :prop="element.props.resourceName"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="element.props.previewAbled" type="success" icon="el-icon-view" circle @click="onPreview(scope.row)" title="预览"></el-button>
          <el-button v-if="element.props.downloadAbled" type="warning" icon="el-icon-download" circle @click="onDownload(scope.row)" title="下载"></el-button>
          <el-button v-if="selfType !== 'view' && element.props.removeAbled" type="danger" icon="el-icon-delete" circle @click="onRemove(scope.row, scope.$index)" title="删除"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabRequest from "../../mixins/LabRequest";
import Util from "../../utils/Util";

export default {
  name: "LabFile",
  mixins: [LabBase,LabRequest],
  data() {
    return {
      dataSource: [ ]
    };
  },
  computed: {
    uploadUrl(){
      if (this.labDesign.switch) {
        return '#'
      } else {
        const { limit } = this.element.props
        if (limit < 1) {
          return this.$Util.mergeUrl(process.env.VUE_APP_API_URL,'/resource/upload')
        }
        return this.$Util.mergeUrl(process.env.VUE_APP_API_URL,'/resource/uploads')
      }
    },
    uploadHeader(){
      return { Authorization: 'Bearer ' + this.$AuthStorage.getAccessToken() }
    },
    uploadData(){
      const data = this.$Util.copy(this.modelData)
      return Object.assign({}, this.element.props, data)
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
    this.loadSource([])
  },
  methods: {
    onSuccess(response){
      this.dispatchEvent('onSuccess', { response })
      .then(() => {
        this.loadSource([])
      })
    },
    onRemove(file) {
      this.$remove(this, '/resource/delete/' + file.resourceId)
      .then(res => {
        this.$resultMsg(this, res)
        if (res.code === 200) {
          this.dispatchEvent('onSuccess', { file })
              .then(() => {
                this.loadSource([])
              })
        }
      })
    },
    onPreview(file) {
      const url = this.$Util.mergeUrl(process.env.VUE_APP_API_URL, '/resource/preview/' + file.resourceId)
      window.open(url + '?access_token=' + this.$AuthStorage.getAccessToken())
    },
    onDownload(file) {
      const url = this.$Util.mergeUrl(process.env.VUE_APP_API_URL, '/resource/download/' + file.resourceId)
      window.open(url + '?access_token=' + this.$AuthStorage.getAccessToken())
    },
    onExceed(files, fileList) {
      this.$resultMsg(this, { msg: '超出最大数量'})
      console.info('超出数量',files, fileList)
    },
    loadSource(localFilters){
      this.dataSource.splice(0, this.dataSource.length)
      const sourceRequest = this.findRequest('source')
      if (!sourceRequest) {
        return
      }
      const bodyArgs = this.getBody(sourceRequest,this.modelData)
      if (!Util.isEmpty(localFilters)) {
        if (Util.isArray(localFilters)) {
          localFilters.forEach(item => this.addFilter(item))
        } else {
          this.addFilter(localFilters)
        }
      }
      this.dispatchRequest('source',this.modelData, bodyArgs)
          .then(res => {
            if (res.code === 200 && !Util.isEmpty(res.data)) {
              if (this.$Util.isArray(res.data)) {
                this.dataSource = res.data
              } else {
                this.dataSource.push(res.data)
              }
            } else {
              console.info('节点数据源请求:', this.element, res)
            }
            this.sourceFilters.splice(0, this.sourceFilters.length)
            setTimeout(() => {
              this.requesting = false
            }, 100)
          })
    },
  }
}
</script>

<style lang="scss">
  .lab-file {
    display: flex;
    justify-content: flex-start;
    flex-flow: column;
  }
</style>
