<template>
  <div class="app-container">
      <el-card class="box-carde">
        <div slot="header" class="clearfix">
          <span>文件解析记录</span>

        </div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-date-picker
            v-model="dateTime"
            type="date"
            placeholder="选择日期"/>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="getData">搜索</el-button>
        </div>
      </el-header>

      <el-tabs type="card">

        <vxe-table
          align="center"
          :loading="loading"
          ref="xTable"
          auto-resize
          highlight-current-row
          border
          resizable
          show-overflow
          :data="tableData"
          v-show="showTable"
          :edit-config="{trigger: 'manual', mode: 'row',autoClear: false,icon:'none'}"
        >
        <vxe-table-column title="文件解析记录">
<!--          <vxe-table-column field="createTime" title="时间" :formatter="timestampToTimess"></vxe-table-column>-->
          <vxe-table-column field="fileTitle" title="文件名称"></vxe-table-column>
          <vxe-table-column field="fileType" title="文件类型"></vxe-table-column>
          <vxe-table-column field="fileDescription" title="文件描述"></vxe-table-column>
          <vxe-table-column field="filePath" title="存放路径"></vxe-table-column>
          <vxe-table-column field="fileStatus" title="解析状态">
            <template v-slot="{ row }">
              <el-button type="success" circle v-if="row.fileStatus==1" icon="el-icon-check"></el-button>
              <el-button type="danger" circle v-if="row.fileStatus!=1" icon="el-icon-close"></el-button>
            </template>
          </vxe-table-column>
        </vxe-table-column>
        </vxe-table>
      </el-tabs>
    </el-container>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 日期选择器
      dateTime:  new Date(new Date().toLocaleDateString()),
      tableData:[],
      totalCount: -1,
      currentPage: 1,
      pageSize:25,
      tableLoading: false,
      showTable:true,
      loading:false
    }
  },
  created: function() {
    this.getData()

  },
  methods: {
    getData(){
      this.$axios.get("/FileAnalysisRecord/"+this.dateTime.getTime()).then(res=>{
        this.tableData = res.data
      })
    },
    timestampToTimess(time) {
      const date = new Date(time)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
      const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      return Y + M + D + H + m
    },
  }
}
</script>
<style>
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all .8s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

#MyUltraShortTermChart {
  width: 100%;
  height: 400px;
}
</style>
