<template>
  <div class="layout-no-cols">
    <div class="tar">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="16">
          <el-date-picker id="downLog-date-picker" class="layout-date-picker" v-model="downLog.search.dateInterval" type="datetimerange" placeholder="选择日志时间范围"></el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-input v-model="downLog.search.fileName" placeholder="文件名" @keyup.enter.native="searchLogsClickHandler" size="medium">
          </el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchLogsClickHandler" title="查询"></i></span>
        </el-col>
      </el-row>
    </div>

    <div class="padding-top-bottom">
      <el-table tooltip-effect="dark" ref="dataTable1" :data-read-url="getDownLogsUrl" :page-size="10">
        <el-table-column type="index" width="60" align="center"></el-table-column>
        <el-table-column prop="fileName" label="文件名"></el-table-column>
        <el-table-column prop="fileSize" label="大小"></el-table-column>
        <el-table-column prop="lastModifyTime" label="最后修改时间">
          <template slot-scope="scope">
            {{scope.row.lastModifyTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column label="下载" align="right">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadClickHandler(scope.row)" title="下载">
              <i class="fa fa-arrow-down" aria-hidden="true"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      downLog: {
        search: {
          fileName: '',
          dateInterval: []
        }
      }
    }
  },
  methods: {
    getDownLogsUrl() {
      const fileName = this.downLog.search.fileName
      const dateInterval = this.downLog.search.dateInterval
      return [
        '/ui/logs/downlog',
        {
          params: {
            fileName,
            startTime: dateInterval.length > 0 ? Date.parse(dateInterval[0]) : null,
            endTime: dateInterval.length > 1 ? Date.parse(dateInterval[1]) : null
          }
        }
      ]
    },
    searchLogsClickHandler() {
      this.$refs.dataTable1.getData(1)
    },
    downloadClickHandler(row) {
      let downloadPath = './ui/logs/downloads?fileName=' + row.fileName
      window.location.href = downloadPath
    }
  }
}
</script>

<style scoped>
.search-icon {
  top: 9px;
  right: 8px;
}
</style>
