<template>
  <div>
    <div class="app-container">
      <div class="filter-container"> 
        <el-row>
           <img src="" />
        </el-row>
      </div>
    </div>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="getFileList"
    />
    <el-dialog title="上传图片" :visible.sync="dialogUpdate" :before-close="getFileList">
      <vue-dropzone id="dropzone" ref="myVueDropzone" :options="dropzoneOptions" />
    </el-dialog>
  </div>

</template>
<script>

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
import { getToken } from '@/utils/auth'
import { _getFileList, _updateFileName, _deleteFile } from '@/api/modelDrawing'
export default {
  name: 'ModelDrawing',
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dialogUpdate: false,
      currentDate: new Date(),
      pagerDto:
        {
          PageIndex: 1,
          PageSize: 100,
          total: 0,
          _Eq_FileName: '',
          QuerySort: [{
            Field: 'Id',
            IsDesc: true
          }]
        },
      sData: [],
      dropzoneOptions: {
        url: process.env.VUE_APP_BASE_API + '/ModelDrawing/UpdateLoadFile',
        thumbnailWidth: 150,
        maxFilesize: 10,
        headers: { 'token': getToken() }
      }
    }
  }, created() {
    this.getFileList()
  },
  methods: {
    // 增加一个名为 IsPicture 的函数作为
    // String 构造函数的原型对象的一个方法。
    IsPicture(string) {
      // 判断是否是图片 - strFilter必须是小写列举
      var strFilter = '.jpeg|.gif|.jpg|.png|.bmp|.pic|'
      if (string.indexOf('.') > -1) {
        var p = string.lastIndexOf('.')
        var strPostfix = string.substring(p, this.length) + '|'
        strPostfix = strPostfix.toLowerCase()
        if (strFilter.indexOf(strPostfix) > -1) {
          return true
        }
      }
      return false
    },
    getFileList(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex }
      this.serachLadding = true
      var that = this
      _getFileList(this.pagerDto).then(response => {
        that.sData = response.Result
        that.pagerDto.total = response.TotalCount
        that.serachLadding = false
      })
        .catch(response => {
          that.serachLadding = false
        })
      this.dialogUpdate = false
    },
    updateFileName(row) {
      this.$prompt('请输入新文件名', '提示').then(response => {
        row.FileName = response.value
        _updateFileName(row).then(r => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.getFileList()
        })
      })
    },
    downloadFile(row) {
      var url = process.env.VUE_APP_BASE_API + '/ModelDrawing/GetFile?Id=' + row.Id
      var x = new XMLHttpRequest()
      x.open('GET', url, true)
      x.responseType = 'blob'
      x.setRequestHeader('token', getToken())
      x.onload = function(e) {
        // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a')
        a.href = url
        a.download = row.FileName
        a.click()
      }
      x.send()
    },
    deleteFile(row) {
      this.$confirm('是否删除文件').then(resposne => {
        _deleteFile(row).then(r => {
          this.$message({
            type: 'success',
            message: '删除成功: '
          })
          this.getFileList()
        })
      })
    }
  }
}
</script>
<style scoped>
 .product-item{
        width:290px;
        height: 390px;
        background-color: #ffffff;
        float: left;
        margin-left: 45px;
        margin-bottom: 50px;
        position: relative;
        -moz-box-shadow:1px 1px 10px #ccc;; -webkit-box-shadow:1px 1px 10px #ccc;; box-shadow:1px 1px 10px #ccc;;
    }

    .product-item .image-box{
        width:290px;
        height:290px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
    }

    .product-item .image-box .image{
        width: 290px;
        height: 290px;
        background-size: cover;
        transition: all 0.5s;
    }

    .product-item .image-box .suffix{
        width:290px;
        height: 290px;
        text-align: center;
        vertical-align: middle;
        background: rgba(33,150,243,.8);
        color:#fff;
    }

    .product-item:hover .image-box .image{
         -webkit-transform: scale(1.25, 1.25);
         transform: scale(1.25, 1.25);
    }

    .product-item:first{
        margin-left: 0;
    }

    p{
      line-height: 24px;
      height: 24px;
      margin:0;
    }

    .author ,.time{
      color:#333333;
      font-size: 12px;
    }

    .time{
      float:right;
    }
  .image-box {
    position: relative;
  }

  .image-box a{
    position:absolute;
    width:100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 100;
  }

</style>
