<template>
  <el-dialog
    class="recordDetail"
    :title="'' "
    :close-on-click-modal="false"

    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" >
      <el-form-item v-if="status===1">
        <el-upload
          class="upload-demo igo-form-item"
          ref="upload"
          :action="uploadUrl"
          :data="isCompressNormal"
          :headers="uploadData"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :limit="10">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading" border fit highlight-current-row
        @selection-change="selectionChangeHandle"
        style="width: 100%;"     >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" header-align="center" align="center" label="ID" width="50"></el-table-column>
        <el-table-column prop="staffName" header-align="center" align="center" label="姓名" width="80"></el-table-column>
        <el-table-column prop="fileName" header-align="center" align="center" label="文件名称"></el-table-column>
        <el-table-column v-if="status===1"
          fixed="right"
          header-align="center"
          align="center"
          width="100"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small"  @click="deleteHandle(scope.row.id)">删除</el-button>
            <a :href="scope.row.fileUrl" target="_blank">下载</a>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit"  v-if="status === 1 ">确定</el-button>
      <el-button type="primary" @click="dowLoadZip" v-if="status === 2 " >下载</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getUploadFileList, deleteFile} from '@/api/api_result'

export default {
  data () {
    return {
      visible: false,
      recordResultId: 0,
      auth: [],
      resultCommitId: 0,
      status: 1,
      dataForm: {
        a: ''
      },
      dataRule: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      fileList: [],
      uploadUrl: '/lz_management/file/uploadFile',
      // 上传图片其他参数
      isCompressNormal: {
        isCompressNormal: 0,
        isCompressThumbnail: 0
      },
      uploadData: {},
      dataListSelections: [],
      recordIdsSelect: []
    }
  },
  mounted () {

  },
  computed: {},
  methods: {
    async init (recordResultId, auth, status) {
      this.recordResultId = recordResultId
      this.auth = auth
      this.visible = true
      this.status = status
      this.uploadUrl = '/lz_management/file/uploadFile?recordId=' + this.recordResultId
      this.$nextTick(async () => {
        this.$refs['dataForm'].resetFields()
        this.getDataList()
      })
    },
    // 获取数据列表
    getDataList () {
      getUploadFileList({
        'page': this.pageIndex,
        'limit': this.pageSize,
        'recordId': this.recordResultId
      }).then(data => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
      this.recordIdsSelect = []
      for (let i = 0; i < this.dataListSelections.length; i++) {
        this.recordIdsSelect.push(this.dataListSelections[i].id)
      }
    },
    dowLoadZip () {
      let a = this.recordIdsSelect.join(',')
      if (this.stringIsNull(a)) {
        this.alertInfo(' 请选择要下载的 id')
        return
      }
      window.open('/lz_management/file/downZip?ids=' + this.recordIdsSelect.join(','))
    },
    deleteHandle (id) {
      this.$confirm('你确定要删除文件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile({
          'id': id
        }).then(data => {
          if (data && data.code === 0) {
            this.getDataList()
            this.$message({
              message: data.msg,
              type: 'success',
              duration: 1500,
              onClose: () => {
              }
            })
          }
        })
      }).catch(() => {
      })
    },
    handleRemove (file, fileList) {
      const index = this.fileList.findIndex(item => item.url === file.url)
      if (index !== -1) {
        this.fileList.splice(index, 1)
        this.form.width = ''
        this.form.height = ''
      }
    },
    downloadTemplate (id) {
      window.open('/lz_management/file/downFile?id=' + id)
    },
    submit () {
      this.visible = false
      this.$emit('refreshDataList')
    },
    handleSuccess (res, fileList, response) {
      this.getDataList()
    },
    alertInfo (msg) {
      this.$message({
        message: msg,
        type: 'success',
        duration: 1500,
        onClose: () => {
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },

    stringIsNull (str) {
      if (typeof str === 'undefined' || str === null || str === '') {
        return true
      }
      return false
    }
  }
}
</script>

<style>
.recordDetail .el-upload-list{
  display: none;
}
</style>
