<template>
  <div class="table-wrapper">
    <header
      ref="tableWrapperHeader"
      class="table-header-wrapper"
    >
      <SecurityCheckHeader
        title="代理人信息统计"
        @change="changeHandler"
        @search="searchHandler"
      />
    </header>
    <main>
      <SecurityCheckTable
        :table-cols="tableCols"
        :table-data="tableData"
        :height="tableHeight"
        show-summary
      />
    </main>
  </div>
</template>

<script>
import SecurityCheckHeader from '../components/securityCheckHeader.vue'
import SecurityCheckTable from '../components/securityCheckTable.vue'
export default {
  components: { SecurityCheckHeader, SecurityCheckTable },
  data() {
    return {
      tableHeight: '50vh',
      tableCols: [
        {
          prop: 'index',
          label: '序号'
        },
        {
          prop: 'level',
          label: '等级'
        },
        {
          prop: 'cargoCount',
          label: '货物件数'
        },
        {
          prop: 'unpackCount',
          label: '开箱件数',
          clickHandler: () => {
            this.$router.push({
              path: '/waybillTable'
            })
          }
        },
        {
          prop: 'unpackResult',
          label: '开箱结果',
          children: [
            {
              prop: 'release',
              label: '放行'
            },
            {
              prop: 'reject',
              label: '拒运'
            },
            {
              prop: 'turnOver',
              label: '移交'
            }
          ]
        }
      ],
      tableData: [
        {
          index: 1,
          level: '高风险',
          cargoCount: 100,
          unpackCount: 10,
          release: 5,
          reject: 3,
          turnOver: 2
        },
        {
          index: 1,
          level: '普通',
          cargoCount: 300,
          unpackCount: 30,
          release: 15,
          reject: 9,
          turnOver: 6
        },
        {
          index: 1,
          level: '低风险',
          cargoCount: 100,
          unpackCount: 10,
          release: 5,
          reject: 3,
          turnOver: 2
        }
      ]
    }
  },
  mounted() {
    this.setTableHeight()
    window.addEventListener('resize', this.setTableHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight)
  },
  methods: {
    changeHandler() {
      this.$router.push({
        path: './agent'
      })
    },
    searchHandler(arr) {
      console.log(arr)
    },
    setTableHeight() {
      const topBarHeight = 80
      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
      const footerBlackHeight = 24
      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  padding: 0 24px;
  .table-header-wrapper {
    padding-top: 24px;
  }
}
</style>
