<template>
  <div style="background-color: #FFFFFF;">

      <hr style="width: 90%;margin: 0px auto;border: #999999 1px solid;margin-top: 60px"/>
      <div class="showList col-sm-12" style="padding: 10px;margin-top: 20px">
        <div :class="cols ? cols : 'col-sm-6'" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
             v-for="row in fileInfoData">
          <div class="showData">
            <div class="left">
              <img :src="row.f_downloadURL"/>
            </div>
            <div class="right">
              <div class="top">
                <div class="">上传时间:&nbsp;<span>{{row.f_uploaddate}}</span></div>
              </div>
              <div class="top">
                <div class="">操作员:&nbsp;<span>{{row.f_username}}</span></div>
              </div>
              <div class="top">文件说明:&nbsp;{{row.fremarks}}</div>
              <ul class="buttonList top">
                <li>
                  <a target="_blank" :href="row.f_downloadURL">预览</a>
                </li>
                <li v-show="isDelete == '1'" @click="delet($index,row)">删除</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

  </div>
</template>
<script>
  export default {
    title: '附件',
    props: ['blodid', 'isremark', 'isusetype', 'takeimg', 'defname', 'isupload', 'fusetype', 'cols'],
    data () {
      return {
        isDelete: '1', // 删除按钮，可以进行控制（权限等）
        fileInfoData: [], // 数据库存储的文件记录对象数组
        headers: {'username': this.$login.f.name, 'blodid': '', 'fremarks': '', 'defname': '', 'fusetype': this.fusetype ? this.fusetype : ''}, // 调用rs/file/uploadFile 的参数
        showUpload: false, // 上传模态框控制
        showhighmeter: false, // 高拍仪组件控制
        useType: '', // 使用类型
        fileRemark: '' // 文件说明
      }
    },
    methods: {
      // 查询按钮事件
      delet (index, row) {
        this.$resetdelete('rs/entity/t_files', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
          this.fileInfoData.splice(index, 1)
        })
      },
      GetRequest () {
        var url = location.search
        var theRequest = new Object()
        if (url.indexOf('?') != -1) {
          var str = url.substr(1)
          let strs = str.split('&')
          for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
          }
        }
        return theRequest
      },
      upload () {
        if (this.showhighmeter) {
          console.log(this, '测试')
          this.$refs.ltgao.closeVideo()
        }
        console.log('测试1')
        this.showhighmeter = !this.showhighmeter
      },
      async load (self) {
        let condition = `f_blobid= '${self.headers.blodid}' `
        if (this.fusetype) {
          condition += ` and fusetype='${this.fusetype}'`
        }
        let getFile = await this.$resetpost('rs/sql/singleTable', {
          data: {
            tablename: 't_files',
            condition: condition + ` order by f_uploaddate desc `
          }
        }, {resolveMsg: null, rejectMsg: '获取附件出错'})

        for (var i = 0; i < getFile.data.length; i++) {
          // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
          if (getFile.data[i].fusetype && (getFile.data[i].fusetype.includes('execl导入'))) {
            getFile.data.splice(i, 1)
            i--
            continue
          }
          let temp = getFile.data[i].f_downloadpath
          let URL = temp.substring(temp.lastIndexOf(':\\') + 2)
          getFile.data[i].f_downloadURL = 'http://' + location.host + '/' + URL
        }
        self.fileInfoData = []
        self.fileInfoData = getFile.data
      },
      // 数据库时间格式化
      formatdate (val) {
        // 20180914151603   :    2018-09-14 15:16:03
        if (val.length != 14) { return }
        let year = val.substr(0, 4)
        let month = val.substr(4, 2)
        let day = val.substr(6, 2)
        let hour = val.substr(8, 2)
        let min = val.substr(10, 2)
        let second = val.substr(12, 2)
        return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second
      },
      // 打开文件上传对话框
      fileUpload () {
        this.showUpload = true
      },
      // 关闭文件上传对话框
      close () {
        this.showUpload = false
        // 将选的文件清空
        this.$refs.file.$el.querySelector('input').value = ''
        this.load(this)
      },
      convertBase64ToBlob (base64String) {
        // 将base64解码
        var bytes = atob(base64String)
      // var bytes = base64;
        var bytesCode = new ArrayBuffer(bytes.length)
      // 转换为类型化数组
        var byteArray = new Uint8Array(bytesCode)

      // 将base64转换为ascii码
        for (var i = 0; i < bytes.length; i++) {
          byteArray[i] = bytes.charCodeAt(i)
        }
        // 生成Blob对象（文件对象）
        return new Blob([bytesCode], {type: 'image/jpeg'})
      },
      newPhoto (Imgbase64) {
        let form = new FormData()
        let xhr = new XMLHttpRequest()
        let formDataBoundary = '----WebkitFormBoundary' + 'GaoPaiYi'
        form.append('Content-Type', 'multipart/form-data;boundary=' + formDataBoundary)
        form.append('file', this.convertBase64ToBlob(Imgbase64), 'GaoPaiYi.jpg')
        xhr.open('POST', 'rs/file/uploadFile')

        if (this.headers) {
          for (var header in this.headers) {
            xhr.setRequestHeader(header, encodeURIComponent(this.headers[header]))
          }
        }
        xhr.send(form)
        setTimeout(() => {
          this.load(this)
        }, 5000)
      }
    },
    ready () {
      this.headers.blodid = this.blodid
      console.log('123222', this.blobid)
      if (this.blodid) {
        this.load(this)
      }
    },
    watch: {
      'blodid' (val) {
        if (val) {
          console.log('观察blodid', val)
          this.headers.blodid = this.blodid
          this.load(this)
        }
      },
      'useType' () {
        this.headers.fusetype = this.useType[0] ? this.useType[0] : ''
      },
      'defname' () {
        this.headers.defname = this.defname
      }
    },
    computed: {
      foptions () {
        return this.$appdata.getParam('使用类型')
      }
    },
    events: {
      onFileUpload: function (file, res) {
        console.log('上传完毕')
        this.headers.fremarks = ''
        this.close()
      }
    }
  }
</script>
<style scoped>

  * {
    padding: 0px;
    margin: 0px;
  }

  .inpGroup {
    position: absolute;
    left: 0px;
    right: 220px;
    font-family: "微软雅黑";
  }

  .navWin {
    position: relative;
  }

  .navWin .navShow {
    margin-top: 5px;
    height: 34px;
    font-size: 20px;
    line-height: 34px;
    color: rgb(180, 180, 180);
  }

  .navWin .navShow span {
    display: inline-block;
    height: 34px;
  }

  .navWin .navShow .icon {
    height: 34px;
    margin-right: 10px;
    color: rgb(200, 200, 200);
  }

  .navWin .navList {
    position: absolute;
    width: 100%;
    z-index: 99;
    list-style: none;
    background-color: rgba(241, 241, 241, 0.9);
    line-height: 34px;
    color: #8d8d8d;
    visibility: hidden;
  }

  .navWin:hover .navList {
    visibility: visible;
  }

  .navWin .navList li {
    font-size: 18px;
    padding-left: 30px;
  }

  .navWin .navList li:hover {
    background-color: rgba(220, 220, 220, 0.9);
  }

  .inp {
    box-sizing: border-box;
    width: 79%;
    padding: 0px 10px;
    height: 34px;
    font-size: 14px;
    line-height: 36px;
    color: #999999;
    border: solid 1px #c1c1c1;
    border-radius: 2px;
    background: none;
    outline: none;
  }

  .inp::-webkit-input-placeholder {
    color: #999999;
  }

  .inp_button {
    float: right;
    margin-left: 10px;
    /*    position: absolute;
        right: 35px;
        height: 40px;*/
    width: 100px;
    font-size: 14px;
    line-height: 34px;
    color: #ffffff;
    text-align: center;
    background-color: rgb(90, 180, 90);
    border-radius: 4px;
    cursor: pointer;
  }

  .btn-group {
    height: 34px;
  }

  .inp_button2 {
    float: right;
    margin-left: 10px;
    /*    position: absolute;
        right: 35px;
        height: 40px;*/
    width: auto;
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
  }

  .inp_button:hover {
    /*background-color: rgb(80, 150, 80);*/
  }

  .inp_button:active {
    font-size: 20px;
    /*background-color: rgb(150, 200, 150);*/
  }

  .showData {
    height: auto;
    position: relative;
    padding-bottom: 7px;
    border-bottom: solid 1px #c1c1c1;
    font-family: "微软雅黑";
  }

  .showData .left {
    height: 180px;
    width: 210px;
    background-color: rgb(240, 240, 240);
    overflow: hidden;
    line-height: 180px;
  }

  .showData .left img {
    width: 100%;
    height: auto;
  }

  .showData .right {
    position: absolute;
    top: 0px;
    left: 220px;
    right: 0px;
    height: 180px;
  }

  .showData .right .top {
    height: 30px;
    line-height: 30px;
    color: rgb(98, 98, 98);
  }

  .showData .right .top .topleft {
    float: left;
    font-size: 16px;
    margin-right: 20px;
  }

  .showData .right .top .topright {
    float: right;
    margin-left: 20px;
  }

  .showData .right .text {
    word-wrap: break-word;
    overflow: hidden;
    /*height: 100px;*/
    color: #999999;
    /*padding: 8px 0px;*/
  }

  .showData .right ul {
    height: 20px;
    padding: 0px;
    margin: 0px;
    font-size: 0px;
  }

  .showData .right ul li {
    display: inline-block;
    height: 20px;
    list-style: none;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #5bb85d;
    padding: 0px 7px;
    margin-right: 10px;
    cursor: pointer;
  }

  .showData .right ul li:hover {
    background-color: rgb(80, 150, 80);
  }

  .showData .right ul li:active {
    background-color: rgb(150, 200, 150);
  }

  .showData .right ul li a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #FFFFFF;
  }

  body {
    color: black;
  }

  .search {
    width: 75%;
    margin: 10px auto 30px auto;
  }

  .search .searchAll {
    height: 34px;
    font-size: 18px;
    color: #999999;
    line-height: 34px;
  }

  .search .searchAll span {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: #999999 1px solid;
    position: relative;
    top: 2px;
  }

  .search .searchAll .spanAll {
    background-color: rgb(90, 180, 90);
  }

  .search .itemList {
    font-size: 16px;
    color: #999999;
    line-height: 34px;
  }

  .search .itemList .item {
    height: 34px;
    position: relative;
  }

  .search .itemList .item .descript {
    display: inline-block;
    width: 80px;
  }

  .search .itemList .item .inputBox {
    height: 30px;
    position: absolute;
    top: 0px;
    left: 80px;
    right: 20px;
  }

  .search .itemList .item .inputBox input {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0px 5px;
  }

  .search .itemList .item .inputBox input::-webkit-input-placeholder {
    color: #999999;
  }

  .searchItem {
    height: 30px;
    position: absolute;
    top: 0px;
    left: 80px;
    right: 20px;
  }

  .searchItem .show {
    padding-left: 10px;
  }

  .searchItem ul {
    position: relative;
    list-style: none;
    background-color: rgba(190, 190, 190, 0.9);
    color: #717171;
    z-index: 99;
    visibility: hidden;
  }

  .searchItem ul li {
    padding-left: 10px;
  }

  .searchItem:hover ul {
    visibility: visible;
  }

  .searchItem ul li:hover {
    background-color: rgba(168, 168, 168, 0.8);
    color: #646464;
  }
</style>
