<template>
  <div>
    <div class="app-container">
      <div class="filter-container">
        <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
          <el-form-item label="搜索文件名">
            <el-input v-model="fillter" @change="fillterFiles" />
          </el-form-item>
          <el-button v-if="hasUpdate" icon="el-icon-upload" size="small" @click="dialogUpdate=true">上传</el-button>
        </el-form>
        <el-row>
          <div v-for="(o, index) in fillterList" :key="o" :span="4" class="product-item">
            <div class="image-box">
              <div class="suffix" :style="'background:rgba('+getColor(o.Url)+',.8) url('+getImage(o.Url)+') center center no-repeat;background-size:60px'">
                <p style="padding-top:200px">
                  {{ o.FileName+ o.Url.substring(o.Url.lastIndexOf('.')) }}
                </p>
              </div>
              <a href="#" @click="openFile(o.Url)" />
            </div>
            <div style=" padding:14px;">
              <span><a :href="o.Url" :download=" o.FileName+ o.Url.substring(o.Url.lastIndexOf('.'))"><i class="el-icon-download" /> {{ o.FileName }}</a></span>
              <div class="bottom clearfix">
                <p>
                  <span class="author">{{ o.CreateUserName }}</span>
                  <time class="time">{{ o.CreateTime.split('.')[0] }}</time>
                </p>
                <p style="text-align:right;margin-top:5px">
                  <el-button v-if="canChange(o)" size="mini" @click="updateFileName(o)"><i class="el-icon-edit">修改文件名</i></el-button>
                  <el-button v-if="canChange(o)" size="mini" @click="deleteFile(o)"><i class="el-icon-delete">删除</i></el-button>
                </p>
              </div> </div>
          </div>
        </el-row>
      </div>
    </div>
    <el-dialog title="上传图片" :visible.sync="dialogUpdate" :before-close="loadFiles">
      <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 { _getFileList, _delete, _put } from '@/api/knowledgeSevice/index'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
const Base64 = require('js-base64').Base64
export default {
  name: 'Files',
  components: {
    vueDropzone: vue2Dropzone
  },
  computed: {
    ...mapGetters([
      'roles',
      'name'
    ])
  },
  data: function() {
    return {
      sData: [],
      dict: '',
      dialogUpdate: false,
      fillter: '',
      fillterList: [],
      hasUpdate: false,
      dropzoneOptions: {
        url: '',
        thumbnailWidth: 150,
        maxFilesize: 100,
        headers: { 'Authorization': 'token ' + getToken() }
      }
    }
  },
  mounted() {
    debugger
    this.hasUpdate = this.roles.includes('知识库上传')
    this.dict = this.$route.params['id']
    this.loadFiles()
    this.dropzoneOptions.url =
        process.env.VUE_APP_Knowledge_API + '/File?dict=' + this.dict
  },
  methods: {
    canChange(data) {
      return data.CreateUserName == this.name
    },
    openFile(url) {
      window.open('http://47.244.232.78:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)))
    },
    loadFiles() {
      this.dialogUpdate = false
      _getFileList(this.dict).then(r => {
        this.sData = r
        this.fillterList = this.sData
      })
    },
    fillterFiles() {
      var d = this.sData.filter(x => {
        debugger
        return x.FileName.indexOf(this.fillter) > -1
      })
      this.fillterList = d
    },
    getImage(url) {
      if (url.lastIndexOf('.') > -1) {
        var extend = url.substring(url.lastIndexOf('.') + 1).toUpperCase()
        switch (extend) {
          case 'PPT':
          case 'PPTX':
            return 'http://wms.xingyunyi.cn/aceui/images/ppt2.png'
          case 'XLSX':
          case 'XLS':
            return 'http://wms.xingyunyi.cn/aceui/images/excel2.png'
          case 'PDF':
            return 'http://wms.xingyunyi.cn/aceui/images/pdf2.png'
          case 'TXT':
            return 'http://wms.xingyunyi.cn/aceui/images/txt.png'
          case 'DOC':
          case 'DOCX':
            return 'http://wms.xingyunyi.cn/aceui/images/word2.png'
          default:
            return 'http://wms.xingyunyi.cn/aceui/images/nfile.png'
        }
      }
      return 'http://wms.xingyunyi.cn/aceui/images/nfile.png'
    },
    deleteFile(data) {
      this.$confirm('是否删除文件' + data.FileName + '?').then(() => {
        _delete(data.Id).then(r => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.loadFiles()
        })
      })
    },
    updateFileName(row) {
      this.$prompt('请输入新文件名', '提示').then(response => {
        row.FileName = response.value
        _put(row).then(r => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.getFileList()
        })
      })
    },
    getColor(url) {
      if (url.lastIndexOf('.') > -1) {
        var extend = url.substring(url.lastIndexOf('.') + 1).toUpperCase()
        switch (extend) {
          case 'PPT':
          case 'PPTX':
            return '33, 150, 243'
          case 'XLSX':
          case 'XLS':
            return '33, 150, 243'
          case 'PDF':
            return '33, 150, 243'
          case 'DOC':
          case 'DOCX':
            return '33, 150, 243'
          default:
            return '33, 150, 243'
        }
      }
      return '0,0,0'
    }
  }
}
</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;
    cursor: pointer;
  }

</style>
