<template>
  <div class="upCollapse">
    <!--<span style="color: white">上报日志</span>-->
    <div class="uptable" ref="uptable">
      <div class="tablecon">
        <vxe-table
          ref="sTable"
          border="inner"
          class="mytable"
          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>
</template>

<script>
    export default {
        name: "uploadObjectLog",
      data(){
        return{
          notUploadSortResultList: [],
          fileStatusEnum: [],
          fileTypeEnum:[],
          fileTypeEnumList: [],
          nameList:[],
          timer:''
        }
      },
      destroyed() {
        // console.log("销毁上报对象日志页面")
        clearInterval(this.timer)
        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 *60)
        },
        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()
            }
          })
        },
        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)
            })
          });
        },
        // 过滤条件赋值，重新处理
        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()
        },
        //转换文件解析状态
        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>
  .upCollapse .collapse-title {
    flex: 1 0 90%;
    order: 1;
  }
  .upCollapse{
    margin-left: 1%;
    width: 98%;
  }
  .upCollapse .el-collapse-item__wrap{
    will-change: height;
    background-color: #061f3e;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #061f3e;
  }
  .upCollapse .el-collapse-item__content{
    padding: 0px;
    font-size: 13px;
    color: white;
    background-color: #061f3e;
    line-height: 1.769230769230769;
  }
  .upCollapse .el-collapse-item__header{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 38px;
    line-height: 38px;
    background-color: #061f3e;
    color: white;
    cursor: pointer;
    border: 1px solid #061f3e;
    font-size: 13px;
    font-weight: 500;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
    outline: 0;
    flex: 1 0 auto;
    order: -1;
  }
</style>
