<template>
  <Dialog :flag="errorDialogFlag" width="900px">
    <div id="warningDialog" ref="dialog" :tabindex="0" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" @keyup.esc="dialogHide">
      <div class="title">
        <span>行李报文错误信息</span>
        <i class="el-icon-close" @click="dialogHide" />
      </div>
      <div class="content">
        <el-table ref="table" v-el-table-infinite-scroll="load" height="400px" class="table" :data="tableData" border stripe fit>
          <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :align="column.align || 'center'" :formatter="formatter" />
        </el-table>
      </div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from '@/layout/components/Dialog'
import { mapGetters } from 'vuex'
import { Query } from '@/api/webApi'

export default {
  name: 'WarningDialog',
  components: { Dialog },
  data () {
    return {
      tableColumns: [
        {
          prop: 'luggageNum',
          label: '行李号',
        },
        {
          prop: 'dataType',
          label: '报文类型',
        },
        {
          prop: 'errMessage',
          label: '错误信息',
        },
        {
          prop: 'sourceData',
          label: '原始报文',
        },
        {
          prop: 'readTime',
          label: '读取时间',
        },
      ],
      tableData: [],
      loading: false,
      noMore: false,
      page: 0,
      pageSize: 50,
    }
  },
  computed: {
    ...mapGetters(['errorDialogFlag']),
  },
  watch: {
    errorDialogFlag (flag) {
      if (flag) {
        this.resetTable()
        this.load()
        this.$nextTick(() => {
          this.$refs['dialog']?.focus()
        })
      }
    },
  },
  methods: {
    dialogHide () {
      this.$store.dispatch('app/toggleErrorDialogFlag', false)
    },
    load () {
      if (this.loading || this.noMore) {
        return
      }
      this.getTableData()
    },
    resetTable () {
      this.page = 0
      this.loading = false
      this.noMore = false
      this.tableData = []
    },
    formatter (row, column, cellValue, index) {
      if (column.property === 'readTime') {
        return String(cellValue ?? '').replace('T', ' ')
      }
      return cellValue
    },
    async getTableData () {
      this.loading = true
      try {
        const { code, returnData, message } = await Query({
          serviceId: SERVICE_ID.errorInfo,
          dataContent: {},
          page: ++this.page,
          pageSize: this.pageSize,
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error(message || '获取数据失败')
        }
        if (!returnData.length) {
          this.page--
          this.noMore = true
          this.loading = false
          return
        }
        this.tableData.push(...returnData)
      } catch (error) {
        this.page--
        this.$message.error(error.message || '失败')
      }
      this.loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
#warningDialog {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    .el-icon-close {
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .content {
    margin: 0;
    ::v-deep .el-table {
      .cell {
        padding: 0;
        text-align: center;
        font-size: 14px;
        font-family: Helvetica, "Microsoft YaHei";
        letter-spacing: 0;
      }
      .el-table__header-wrapper,
      .el-table__fixed-header-wrapper {
        .cell {
          font-weight: bold;
          color: #101116;
        }
      }
    }
  }
}
</style>
