<template>
  <div class="row" style="height:8%">
    <div class="col-sm-2 form-group" >
      <label for="f_hand_date" class="font_normal_body">上传日期</label>
      <datepicker style="width:60%" id="f_hand_date" placeholder="上传日期"
                  :value.sync="upload_date"
                  :format="'yyyy-MM-dd'"
                  class="datepicker"
                  :show-reset-button="true">
      </datepicker>
    </div>
    <div class="col-sm-2 form-group" >
      <label  class="font_normal_body">分类</label>
      <v-select :value.sync="fusetype" :options='fusetypes'  placeholder='分类' close-on-select></v-select>
    </div>
    <div style="float: right">
      <button class="button_search"  @click="selfSearch()" style="float:right;margin-right: 5px" v-el:cba>查询</button>
    </div>
  </div>
  <div class="panel panel-info auto" style="overflow-y: auto;height:100%" id="apps">
    <!--        <div class="panel-heading auto">-->
    <!--          上传附件记录-->
    <!--        </div>-->

    <div class="tab-content span" style="min-height:300px" id="app">
      <div style="padding:0px 0px 10px 0px;margin-left: 20px;overflow: auto;">

        <!-- 时间轴显示 -->
        <!-- 工单的基本信息 -->


        <!--            <div class="flex-row" v-for="item in files" ><span >-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</span></div>-->
        <timeline >
          <timeline-item v-for="item in files"
                         :color="$index === files.length - 1 ? 'blue' : 'default'">
            <div class="row" >


              <p> {{item.days}}</p>

              <!-- 派单 -->
              <div v-for="file in item.arrays" class="col-sm-6">

                <div style="height:180px;">
                  <img style="height:100%" :src="file.f_downloadURL"/>
                </div>

                <div style="height:190px;">
                  <div class="showtext">上传时间:&nbsp;<span>{{file.f_uploaddate}}</span></div>
                  <div class="showtext">操作员:&nbsp;<span>{{file.f_username}}</span></div>
                  <div class="showtext">分类:&nbsp;<span>{{file.fusetype}}</span></div>
                  <div class="showtext">文件说明:&nbsp;{{file.fremarks}}</div>
                  <div class="flex-row showtext">
                    <a   target="_blank" :href="file.f_downloadURL">预览</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a   v-show="isDelete == '1'" @click="delet($index,file)">删除</a>
                  </div>
                </div>
              </div>
            </div>

          </timeline-item>
        </timeline>
      </div>
    </div>
  </div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'

export default {
    title: '附件上传记录',
    props: {
      row: ''
    },
    data () {
      return {

        upload_date: '',
        fusetype: [],
        files: [],
        fusetypes: [],
        isDelete: '0', // 删除按钮，可以进行控制（权限等）
        userinfo_id: '',
        images: ''
      }
    },
    methods: {

      selfSearch () {
        this.getFiles()
      },
      async getfusetypes () {
        this.fusetypes.push({label: '全部', value: ''})
        let http = new HttpResetClass()
        let res = await http.load('POST', 'rs/sql/singleTable_OrderBy',
          {data: {items: 'fusetype',
            tablename: 't_files',
            condition: `fusetype is not null GROUP BY fusetype`,
            orderitem: 'fusetype'}},
          {resolveMsg: null, rejectMsg: '获取图片分类失败'})
        res.data.forEach((item) => {
          this.fusetypes.push({
            label: item.fusetype, value: item.fusetype
          })
        })
      },
      delet (index, row) {
        this.$resetdelete('rs/entity/t_files', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
          // this.files.splice(index, 1)
          this.selfSearch()
        })
      },
      getFiles () {
        this.files = []
        this.userinfo_id = this.row.f_userinfo_id
        let condition = `CONVERT(varchar(200),f_blobid) = '${this.userinfo_id}' `
        if (this.upload_date !== '') {
          condition += `and CONVERT( VARCHAR ( 100 ), f_uploaddate, 23 )='${this.upload_date}' `
        }
        if (this.fusetype.length == 1) {
          if (this.fusetype[0] !== '') {
            condition += `and fusetype='${this.fusetype}' `
          }
        }
        let http = new HttpResetClass()

        if (this.userinfo_id) {
          http.load('POST', 'rs/logic/getAllFiles', {
            data: {
              condition: condition
            }
          }, {resolveMsg: null, rejectMsg: '获取附件出错！！！'}).then((res) => {
            for (var i = 0; i < res.data.days.length; i++) {
              // 循环日期。将files组织成[{day:'',array:''},{day:'',array:''}...]格式
              this.files.push({
                days: null,
                arrays: []
              })
              this.files[i].days = res.data.days[i].uploadday
              for (var j = 0; j < res.data.array.length; j++) {
                // 循环查出来的所有附件

                if (res.data.array[j].uploadday == this.files[i].days) {
                  // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
                  if (res.data.array[j].fusetype && res.data.array[j].f_filetype.includes('xls')) {
                    res.data.array[j].splice(i, 1)
                    i--
                    continue
                  }
                  let temp = res.data.array[j].f_downloadpath
                  let URL = temp.substring(temp.lastIndexOf(':\\') + 2)
                  res.data.array[j].f_downloadURL = 'http://' + location.host + '/' + URL
                  this.files[i].arrays.push(res.data.array[j])
                }
              }
            }
          })
        }
      }

    },
    ready () {
      if (this.$login.r.find(value => value == '上传附件删除')) {
        // 有删除权限
        this.isDelete = '1'
      }
      this.getFiles()
      this.getfusetypes()
    }
  }
</script>
<style media="screen">
  #work-history ul {
    padding: 0px;
  }
  .showtext{
    height:20px;
  }
</style>
