<template>
  <div class="col-sm-12 col-xs-12" style="background-color: #FFFFFF">
    <div class="col-sm-12 col-xs-12" style="padding:50px 100px;height: 25%">
      <div class="col-xs-8" v-if="issearch">
        <v-select
          class="fileType"
          :value.sync="useType"
          width="90%"
          v-model="useType"
          :options='typeOfUse'
          :valueSingle="true"></v-select>
      </div>
      <div class="col-xs-4" style="text-align: center" v-if="issearch">
        <button  class="btn" style="background-color: #7dc1f4;border-radius: 5px;margin-right: 10px" @click="load">搜索</button>
      </div>
<!--      <div class="form-group col-sm-2" style="text-align: center" v-if="isupload">-->
<!--        <button type="button" class="btn btn-primary item_btn" @click="showUpload = !showUpload">本地上传</button>-->
<!--      </div>-->
    </div>
    <hr style="width: 90%;margin: 0px auto;border: #999999 1px solid;"/>
    <div class="col-sm-12 col-xs-12" style="overflow: scroll;height: 75%">
      <div class="col-sm-12 col-xs-12 showData" v-for="row in fileInfoData">
        <div class="col-sm-12 col-xs-12 item"  v-if="row.f_filetype === 'jpg' || row.f_filetype==='png' || row.f_filetype==='gif' || row.f_filetype==='bmp'">
          <div class="left col-sm-12 col-xs-12">
            <a href="#" class="thumbnail" style="width: 100%;height: 100%">
              <img-self
                v-if="row.f_filetype === 'jpg' || row.f_filetype === 'png' || row.f_filetype === 'gif' || row.f_filetype === 'bmp'"
                :src="row.f_downloadURL" alt="..." :width="120" :height="170"></img-self>
              <img v-if="row.f_filetype === 'pdf'" src="../image/pdf.jpg" alt=""/>
              <img v-if="row.f_filetype === 'xls'||row.f_filetype === 'xlsx'" src="../image/excel.jpg" alt=""/>
              <img v-if="row.f_filetype === 'doc'||row.f_filetype === 'docx'" src="../image/doc.jpg" alt=""/>
              <img v-if="row.f_filetype === 'dwg'" src="../image/dwg.png" alt=""  />
              <img v-if="row.f_filetype === 'dxf'" src="../image/dxf.png" alt=""  />
            </a>
          </div>
        </div>
        <div class="col-sm-12 col-xs-12 item">
          <div class="left col-sm-12 col-xs-12">
            <p :title="row.f_filename" class="clears"><strong>文件名：</strong>{{ row.f_filename }}</p>
            <p :title="row.f_username" class="clears"><strong>操作员：</strong><span>{{ row.f_username }}</span></p>
            <p :title="row.fusetype" class="clears"><strong>使用类型：</strong><span>{{ row.fusetype }}</span></p>
            <p :title="row.f_uploaddate" class="clears"><strong>上传时间：</strong><span>{{ row.f_uploaddate }}</span></p>
            <p :title="row.fremarks" class="clears"><strong>文件说明：</strong>{{ row.fremarks }}</p>
            <p class="clears">
              <a
                v-if="row.f_filetype === 'jpg' || row.f_filetype==='png' || row.f_filetype==='gif' || row.f_filetype==='bmp'"></a>
              <a v-else @click="downloadfile(row.f_downloadURL)" style="background:#6aa6e2" class="btn btn-primary"
                      role="button" :href="row.f_downloadURL" download = "row.f_filename" >下载
              </a>
              <!--              <a v-if="isdelete" @click="delet($index, row)" href="#" class="btn btn-default" role="button" role="button">删除</a>-->
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  <modal  :show.sync="showUpload" v-ref:modal backdrop="false">-->
<!--    <header slot="modal-header" class="modal-header">-->
<!--      <button type="button" class="close" @click="close"><span class="glyphicon glyphicon-remove"></span></button>-->
<!--      <h4 class="modal-title" style="text-align: center">文件上传</h4>-->
<!--    </header>-->
<!--    <article slot="modal-body" class="modal-body form-horizontal">-->
<!--      <div class="form-group" style="text-align: center">-->
<!--        <file-upload class="my-file-uploader" :name="'myFile' + blodid"-->
<!--                     action="rs/file/upload" tagname="文件上传" :headers="headers" multiple v-ref:file></file-upload>-->
<!--      </div>-->
<!--      <div class="form-group" v-if="isusetype">-->
<!--        <label class="col-sm-2 control-label">文件类型：</label>-->
<!--        <div class="col-sm-10">-->
<!--          <input-select-->
<!--            class="select select_list"-->
<!--            :value.sync="headers.fusetype"-->
<!--            v-model="headers.fusetype"-->
<!--            :options="$appdata.getParam('使用类型')"-->
<!--            :valueSingle="true"></input-select>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="form-group" v-if="isremark" style="color: #df2424">-->
<!--        <label class="col-sm-2 control-label">文件说明：</label>-->
<!--        <div class="col-sm-10">-->
<!--          <input class="form-control input_view" style=""-->
<!--                 v-model="headers.fremarks"-->
<!--                 :value="headers.fremarks"/>-->
<!--        </div>-->
<!--      </div>-->
<!--    </article>-->
<!--    <footer slot="modal-footer" class="modal-footer">-->
<!--    </footer>-->
<!--  </modal>-->
</template>

<script>
import {HttpResetClass} from 'vue-client'
import {isEmpty} from "../Util";
import Vue from "vue";

export default {
  title: '附件',
  props: ['blodid', 'businessid', 'isremark', 'isusetype', 'takeimg', 'defname', 'isupload', 'isdelete', 'bootstraped', 'issearch'],
  data() {
    return {
      fileInfoData: [], // 数据库存储的文件记录对象数组
      // 调用rs/file/uploadFile 的参数
      headers: {
        'username': Vue.user.name,
        // 'username': this.$login.f.name,
        'blodid': '',
        'businessid': '',
        'fremarks': '',
        'defname': '',
        'fusetype': ''
      }, // 调用rs/file/uploadFile 的参数
      showUpload: false, // 上传模态框控制
      showhighmeter: false, // 高拍仪组件控制
      useType: null
    }
  },
  ready() {
    this.headers.blodid = this.blodid
    this.headers.businessid = this.businessid
    this.headers.defname = this.defname
    if (this.blodid || this.businessid) {
      this.load()
    }
  },
  methods: {
    delet(index, row) {
      // this.$resetdelete(`rs/entity/t_files`, {id: row.id}, {
      this.$resetdelete(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_files`, {id: row.id}, {
        resolveMsg: '删除成功',
        rejectMsg: '删除失败'
      }).then((res) => {
        this.$dispatch("delResid", row.id)
        this.load()
      })
    },
    downloadfile(filepath) {
      HostApp.startExternalViewer(filepath)
    },
    // 关闭文件上传对话框
    close() {
      this.showUpload = false
      this.showhighmeter = false
      // 将选的文件清空
      this.$refs.file.$el.querySelector('input').value = ''
      this.headers.fusetype = ''
      this.headers.fremarks = ''
      this.load()
    },
    // 查询
    async load() {
      let condition = ''

      condition = `f_blobid= '${this.headers.blodid}' `
      if (this.headers.defname &&this.headers.defname.indexOf('单位签字')){
        let http = new HttpResetClass()
        let data = {
          tablename: 't_apply_sign',
          condition: `f_process_id = '${this.headers.blodid}'`
        }
        let res = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`, {data: data}, {
          warnMsg: null,
          resolveMsg: null
        })
        if (res.data.length > 0){
          condition = `(f_blobid= '${this.headers.blodid}' or  f_blobid= '${res.data[0].f_parent_process_id}')`
        }
      }


      if (!isEmpty(this.useType)) {
        condition += `and fusetype like '${this.useType}'`
      }
      let http = new HttpResetClass()
      let data = {
        tablename: 't_files',
        condition: condition + ` order by f_uploaddate desc `
      }
      let getFile = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`, {data: data}, {
        warnMsg: null,
        resolveMsg: null
      })

      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
        if (temp.includes('http:')){
          getFile.data[i].f_downloadURL = temp
        } else {
          let URL = temp.substring(temp.lastIndexOf(":\\") + 2)
          getFile.data[i].f_downloadURL = `${this.$androidUtil.getProxyUrl()}/${URL}`
        }
        // getFile.data[i].f_downloadURL = "http://61.134.61.238:8400" + "/" + URL

      }
      this.fileInfoData = []
      this.fileInfoData = getFile.data
    }

  },
  computed: {
    typeOfUse() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('使用类型')]
    }
  },
  events: {
    onFileUpload: function (file, res) {
      this.$dispatch("resid", res.id)
      this.headers.fremarks = ''
      this.close()
    }
  },
  watch: {
    'blodid'(val) {
      if (val) {
        console.log('观察blodid', val)
        this.headers.blodid = this.blodid
        this.load()
      }
    },
  }
}
</script>

<style scoped>
.clears {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showData {
  padding: 15px 10px 0px 10px;
  box-sizing: border-box;
  height: 500px;
  font-family: "微软雅黑";
}

.showData .item {
  padding-bottom: 10px;
  height: 230px;
  border-bottom: solid 1px #c1c1c1;
}

.left {
  padding-right: 10px;
}

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

.right {
  height: 100%;
  /*display: -webkit-flex;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: space-around;*/
}

.item_btn {
  width: 80%;
  background-color: #6aa6e2;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: PingFang;
}
</style>
