<template>
  <div>
    <div class="uploadLog">
      <!--<span>上报日志</span>-->
      <div class="uptable" ref="uptable">
        <div class="tablecon">
          <vxe-table
            ref="sTable"
            border="inner"
            class="mytable"
            max-height="400px"
            show-overflow
            auto-resize
            :data="notUploadSortResultList">
            <vxe-table-column type="seq" width="10%"></vxe-table-column>
            <vxe-table-column field="uploadObjectName" width="16%" title="对象名称":filters="nameList" :filter-multiple="false"></vxe-table-column>
            <vxe-table-column field="fileName" width="40%" title="文件名称"></vxe-table-column>
            <vxe-table-column field="fileTypeEnum" width="15%" title="文件类型" :filters="fileTypeEnumList" :filter-multiple="false" :formatter="formatefileType"></vxe-table-column>
            <vxe-table-column field="fileStatusEnum" width="18%" title="文件状态" :formatter="formateStatus"></vxe-table-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "upload",
    data(){
      return{
        timer: '',
        notUploadSortResultList: [],
        nameList: [],
        fileStatusEnum: [],
        fileTypeEnum:[],
        fileTypeEnumList: [],
      }
    },
    destroyed(){
      clearInterval(this.timer)
    },
    mounted() {
      this.init()
      this.getUploadFileType()
    },
    methods:{
      init(){
        Promise.all([this.getStatusEnum(),this.getFileTypeEnum()]).then((res)=>{
          this.fileStatusEnum = res[0]
          this.fileTypeEnum = res[1]
          this.getUploadFile()
        })
        this.timer = setInterval(this.getUploadFile, 1000)
      },
      getUploadFileType(){
        this.$axios.get('/dashboard/getUploadFileType').then(res => {
          this.fileTypeEnumList = res.data
          this.updatefileTypeEnum()
        })
      },
      async getUploadFile() {
        this.$axios.get('/dashboard/getUploadFileInfo').then(res => {
          this.notUploadSortResultList = res.data.notUploadSortResultList
          if(this.notUploadSortResultList !== []){
            this.nameList = res.data.nameList
            this.updateFilterEvent()
          }

        })
      },
      // 过滤条件赋值，重新处理
      updateFilterEvent () {
        const xTable = this.$refs.sTable
        const column = xTable.getColumnByField('uploadObjectName')
        // 修改筛选列表，并默认设置为选中状态
        xTable.setFilter(column,this.nameList)
        // 修改条件之后，需要手动调用 updateData 处理表格数据
        xTable.updateData()
      },
      updatefileTypeEnum () {
        const xTable = this.$refs.sTable
        const column = xTable.getColumnByField('fileTypeEnum')
        // 修改筛选列表，并默认设置为选中状态
        xTable.setFilter(column,this.fileTypeEnumList)
        // 修改条件之后，需要手动调用 updateData 处理表格数据
        xTable.updateData()
      },
      getFileTypeEnum() {
        const a = this.$axios
        return new Promise(function (resolve, reject) {
          a.get("/dashboard/getFileTypeEnum").then(res => {
            resolve(res.data)
            // console.log("获取上报文件类型成功")
          }).catch((error) => {
            this.$message.error('获取上报文件类型枚举出错' + error)
          })
        });
      },
      getStatusEnum() {
        const a = this.$axios
        return new Promise(function (resolve, reject) {
          a.get("/dashboard/getFileStatusEnum").then(res => {
            resolve(res.data)
            // console.log("获取上报文件类型成功")
          }).catch((error) => {
            this.$message.error('获取上报状态枚举出错' + error)
          })
        });
      },
      filterNameMethod ({ value, row, column }) {
        return XEUtils.toString(row.uploadObjectName).toLowerCase().indexOf(value) > -1
      },
      //转换文件解析状态
      formateStatus({cellValue}){
        const item = this.fileStatusEnum.find(item => item.name === cellValue)
        return item ? item.message : ''
      },
      //转换文件类型协议
      formatefileType({cellValue}){
        const item = this.fileTypeEnum.find(item => item.name === cellValue)
        return item ? item.message : ''
      }
    }
  }
</script>

<style scoped>
</style>
